close sharing button

How To Fix The CORS Policy Errors in Blogger



One fine day, I just noticed an error when my form was getting submitted but the message was not being displayed whether the request was successful. I quickly checked the console log to check the fault and I found that is it a CORS Error. I never had this error earlier. The behavior I was observing was the effect of browsers CORS implementation.
Bloggers on blogger.com generally use JavaScript to interact with resources on the internet and Blogger.com platform also does not have PHP support to change the headers received from the server.




What is CORS?

Cross-Origin Resource Sharing (CORS) is a method that uses the HTTP headers to tell browsers to accept and allow connection requests to resources from a different source to a web application running in a browser from one source. CORS aims to allow requests made on your behalf while simultaneously blocking requests made by rogue JavaScript and is triggered whenever you make an HTTP request to a different domain or a different subdomain or port to a different protocol.

An ideal scenario why CORS mechanism is important because it prevents attackers using the Cross-site scripting vulnerability to plant scripts on various websites to make an AJAX call to gain access to your bank website or social media networks.

But there is a way to allow a specific site to use the resources on that particular server. The server with the resource uses the ‘Access-Control-Allow-Origin’ header to whitelist particular domains or allow requests from all origins using the wildcard.

Access-Control-Allow-Origin: *

(The wildcard in the above line allows all sites to be trusted. It is not recommended to use it.)

The browser enforces the CORS policy and not the server. The server just sets few HTTP headers telling the browser how it wants to behave.

So the proxy can send the request that you cannot through the browser directly by its limitations. There is no way around that. We cannot change the headers on the server and even if it is allowed by the server for public it would expose itself to vulnerabilities. This leaves us with few options to resolve this CORS Policy Issue. The best option is using a PHP proxy.

Is the CORS useless if it can be bypassed with a simple proxy? No! Since the request is now made through a proxy any cookies or other authentication information for the site we are accessing will not be included automatically in the request by the browser.

A Simple CORS PHP Proxy 




Copy the above code into a Text Editor and Save it as Filename: "get.php"
Change the below section in the above code to reflect your domain and hostname.
Also, add the destination hostnames to whitelist and click save



The above get.php PHP Proxy Script can be uploaded on a PHP Server which will host it for us.
Now when you have your PHP Server ready. Upload the PHP Proxy Script File to the Server.


Web hosting

   
There are many hosting service providers which can host your PHP scripts. You can try 000webhost. You would get the following features for free : 

*** 1500 MB of disk space
*** 100 GB of data transfer
*** PHP and MySQL support
*** cPanel control panel
*** Website Builder
*** Absolutely no advertising!


Testing the CORS Policy Issue


To test this with your domain, you need to copy and paste the below JavaScript code in the body of your blogger website HTML.



Once you paste this code on your website domain, you will get a test field similar to below on your website which you can use to check how the request is responded to from your domain.



Success Trending

Now in the Test field like one above on your site, enter the URL directly. For example, https://www.google.com. Click on Test

Check the console log of your browser
You must have CORS Policy Error

Next, try with the Proxy URL. For example, https://hostname/get.php?u=www.google.com
Make sure you have replaced the hostname with the one that you signed up with the hosting website. Click on Test

Check the console log of your browser
Your CORS Issue must have disappeared :)

By using PHP Proxy, the CORS issue is successfully resolved without violations and without making our server vulnerable.

Happy Day!

This article includes links to items from our affiliates. We may earn a commission if you buy through these links.



No comments:

Post a Comment