How to fix The request was blocked for security reasons error
The request was blocked for security reasons message can sometimes appear in your browser and prevent you from downloading attachments or visiting certain websites. However, there’s a way to fix that problem, and today we’re going to show you how to do it.
Sometimes when you switch to another browser, your info won’t sync correctly. This can lead to various issues due to security reasons. The cause for this problem are certain file types that are blocked in common email services or faulty plug-ins. However, there’s a way to fix this problem.
How can I fix Blocked for security reasons message in Gmail
- Check the email attachment file type
- Disable add-ons
- Disable your VPN
1. Check the email attachment file type
Certain attachments may be blocked by your email service. For example, Gmail doesn’t allow attachments that contain compressed files, such as gz or .bz2. We already covered this issue in-depth in our RAR email attachments blocked for security reasons in Gmail article, so be sure to check it out.
2. Disable add-ons
In this case, the actual culprit is most likely a security setting from an add-on you’ve installed at some point. You can disable plug-ins one by one till you’ve found the one responsible for your troubles.
For Internet Explorer 11
- Open Internet Explorer, and click on the Tools icon, next to the Tools button.
- Now click Manage add-ons.
- Under the Show panel, click on All add-ons, and then select the add-on you wish to disable.
- Click Disable to disable the add-on;
- Restart Internet Explorer.
For Mozilla
- In Firefox click the menu button and choose Add-ons, then click the Extensions panel.
- Select the add-on you wish to disable.
- Click the Disable button(or Remove if you wish to permanently discard the extension).
- Click Restart now if it pops up. Your information will be saved and restored after the restart.
For Chrome
- In Chrome click on the Menu icon at the top right of the browser window.
- Now choose More tools and select Extensions.
- Uncheck Enabled to disable an extension.
- Restart Chrome.
3. Disable your VPN
If you’re using a VPN to mask your IP, Mozilla will restrict your access to websites you’re trying to browse. Disable your VPN and try accessing the website again. Also, you might be able to fix the problem by changing the URL from http:// to https://.
If this issue is caused by your VPN, you may be able to fix it by switching to a different service.
Some of the best VPNs for Windows 10 PCs will not interfere with your browser. They generally come with zero-logging policies, killswitch protection, and split tunneling.
We recommend you get a stable VPN with a large number of servers and good worldwide coverage. Stable and worthwhile VPNs are configured to allow you to browse securely and surpass all restrictions without causing any errors in the process.
We hope these solutions could help, in the meantime, what problems have you encountered while using your browser?
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. #184
In my app I am redirecting the URL to SIngle-Sign_on server from ‘/login’ end point. I am getting the CORS issue which is below.
The text was updated successfully, but these errors were encountered:
bhargavr445 commented Jan 28, 2020
I am making request from UI(https://localhost://3200) to Node js route(/login) running on (localhost://8090), after hitting node js I am making a call to Single-sign-on using SAML methods, in respone I am receiving URL(https://sso.dol.gov), after receiving URL I am using response.redirect(https://sso.dol.gov). This is when I am getting error.
dougwilson commented Jan 28, 2020
Gotcha. So which one of those parts are using XMLHttpRequest ? It sounds to me based on your description like the XMLHttpRequest is the request to localhost:8090, which is redirected to sso.dol.gov. If this is the case, the sso.dol.gov domain is what needs CORS policy applied to it to allow calls from localhost:3200.
bhargavr445 commented Jan 28, 2020
dougwilson commented Jan 28, 2020
Maybe I’m just not understand what you’re describing. Can you provide a way to reproduce the issue locally? Or, do you know what needs to be fixed in this module? I want to help, but need to understand the issue first
bhargavr445 commented Jan 28, 2020 •
Frontend: React.js (localhost:3200)
Backend: Node.js(localhost:8090)
From UI request is coming to /login route
when redirecting to this login_url I am getting below error.
dougwilson commented Jan 28, 2020
Ok. That doesn’t seem like any more information that what has already been provided. t sounds to me based on your description like the XMLHttpRequest is the request to localhost:8090, which is redirected to sso.dol.gov. If this is the case, the sso.dol.gov domain is what needs CORS policy applied to it to allow calls from localhost:3200.
thediveshsoni commented Jul 9, 2020
Any resolution for the issue.
dougwilson commented Aug 22, 2020
Closing due to no more information coming to light in order for any of us to help further.
koshpendi commented Feb 7, 2021 •
@bhargavr445 hi. Did you solve this? because i’m trying do the same and get the same error
React: localhost: 3000
axios.post(«/saml», body).then();
Expressjs: localhost: 4200
app.post(‘/saml’, (req: express.Request, res: express.Response,) => < res.redirect('https:/some idp url') >)
The result of that should be redirecting to some idp url (external url i would say) from React click
Works example for me but looks not so good
goktugyil commented Mar 26, 2021
Did you guys solve this issue? I have a similar issue
Access to XMLHttpRequest at ‘https://domain.com/logout’ (redirected from ‘https://socket.domain.com/logout’) from origin ‘https://domain.com/’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
So essentially what happens is,
- Inside https://domain.com user clicks the button, ‘https://socket.domain.com/logout’
- Logout logic is applied at the path, and so far CORS works
- Then when it is redirected to ‘https://domain.com/logout’ , more logic is applied, but CORS does not work
Mukund0206 commented Jul 4, 2021 •
I am also having the same issue when redirecting my client to the stripe payment dashboard through the express route as explained in this tutorial.
Has been blocked by cors policy [Explain like I am 5]
Here I will explain why it happens and how it protects a user.
Who is a resource and who blocks access
Imagine a browser requests a font or calls some REST API by using JavaScript from a page served on a.com . Both front and REST calls are resources. Imagine font or REST API is located on a domain b.com .
- The page https://a.com/about has a font loaded from CSS src: url(«b.com/font.ttf») .
- The page has some JavaScript file https://a.com/script.js that inside of it’s code does a REST API call using fetch/XHR/jQuery ajax . E.g. fetch(«https://b.com/api/v1/stats»)
Normally the browser will block the request according to the same-origin policy ( SOP ).
In the examples, a.com is an origin of the page which does request and b.com is an origin of the requested resource. Origins are different so the browser would normally drop an exception in console (F12 in Chrome): has been blocked by cors policy.
To remove the SOP restriction developers use a special header-based mechanism called Cross-Origin Resource Sharing ( CORS ).
CORS should be implemented on the side of the webserver that serves resources and only there! In our case it is b.com ‘s webserver. Leter I will show how to implement it, but first, we need to consider more important things.
Two kinds of requests
It is very important to know that CORS works differently on two kinds of requests: simple, and non-simple.
Simple requests are:
- GET
- HEAD
- POST
And only that of these which have one of the next values in Content-Type request header:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
So multipart/form-data POST is simple, but application/json POST is not simple! Also application/xml POST is not simple!
☝Another tricky important condition — to be simple requests must have no manually set headers. Default headers sent by the browser are OK, we are talking only about headers set by you from your request maker (for example one of XHR/fetch/axios/superagent/jQuery Ajax etc). By the way, the request maker can set it without your agreement, so better start with pure browser-native XHR of fetch API, unless you know why you need more complex requesters.
If you need to set a header by yourself still, and still wish to keep the request simple you are allowed to white-listed request headers and their values, they called CORS-safelisted. You can find their list and allowed values on fetch spec: https://fetch.spec.whatwg.org/#cors-safelisted-request-header
NOTE: This is a base rule, but also there might be some rare extra situations when requests are non-simple. I would say it should never happen to you. 99% of cases are covered with the rules above. So if you write a simple blog and don’t see an explanation, just carefully check the rules above. However, If you are paranoid, and worry about extra cases refer to browser documentation, e.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/AccesscontrolCORS#Preflighted_requests
All requests that are not simple are non-simple
CORS on simple requests
To allow CORS , web-server, in responses to simple requests should add special HTTP response header that describes what set of origins which are permitted to get this resource. In the example, the origin is a.com . It all works in a CONFUSING way: when HTML or JavaScript asks for resource:
- The browser asks the web server for resources regardless of the same or different origins are used.
- Web-server should always answer with content but can add some extra headers, or may not. The base header is Access-Control-Allow-Origin ( ACAO ). It should contain allowed origin, e.g. a.com , or wildcard * that will allow all origins.
- Only then browser searches for ACAO a header in the response and if there is no header with current origin it blocks content usage in HTML or JS code and throws an error in the developer’s console, e.g. if there are no headers at all: XMLHttpRequest cannot load . No ‘Access-Control-Allow-Origin’ header is present. :
So blocking performed by the browser after reading response headers. Most browsers even have some flag like chrome.exe —disable-web-security which disables SOP. But most times it is easier to add headers on the backend. For a good maintainable backend, it is 1 minute.
You might want to ask, so if a hacker can run their browser with —disable-web-security , how then it helps at all? The thing is the hacker can’t receive a benefit from attacking himself. And normal users will not do it. And even if they will, the browser will say, «Hey man, I hope you know what you are doing, it might hurt you».
SOP aim is to protect users which use official browsers with a SOP protection enabled.
And you, as a user, should always do the same, otherwise, hackers will be able to work with your web-banking via non-simple CORS requests when you are browsing sites owned by hackers (see below)!
CORS on Non-simple requests – mr. Preflight
The main point here, assumed, that a non-simple method can change data on a server. But performing things in the way above for requests which can change the data is unacceptable: first, we will change data on the server (e.g. make a bank transaction) and only then verify access. Yes, a hacker would receive an error in the console, but who cares? He was able to change the data on your server.
So before making a non-simple request, the browser will try to make some preflight OPTIONS request which should get a response with allowed origins and only then if the origin is allowed browser will actually do a request that will change the data. So preflight itself will not change any data on the server, just will give a green or red light to browser to execute dangerous non-simple request which could change the data on server.
Let’s consider preflight in details:
The client wants to do application/json POST to http://b.com/post_url and browser makes preflight:
ACRM and ACRH notify the server about what method will be used after preflight and what headers will be present (browser adds here Content-Type and custom headers that will be attached to XHR call).
ACAM and ACAH headers in response will say browser can it do actual method or not.
ACMA say browser that it can remember preflight for some seconds value, e.g. 86400 s = 24 h . So this means that the browser instance will not make preflights to http://b.com/post_url during the next 24 hours. BTW sometimes it is hard to reset this cache, so be careful with this header during development, better turn it to 1 second.
Only after this the browser makes actual POST :
And in response browser also should set ACAO :
Never change data in GET methods (and any requests that assumed to be simple)
Security is a most challenging point of development, and SOP-related attacks are super common still, because of the simplicity of becoming a developer without understanding how it works .
Now think about what happens when newbie developers decide that they can always use GET because it is working anyway, start passing data via query params and change data on the server in GET method handlers. They will be treated as simple! No preflight at all. Developers start earning good money on development start working in big companies or at freelance find a a client with growing buisness. (Client does not understand what is security, team leads are also can’t always think about it, such developer is the hidden bomb). The developed product is more popular and popular, and more it popular more hacker’s attention will be there. Hacker finds URL and makes more research, finds some users of a product, creates a.com with the same look and typo in domain and BOOM, he has can run queries.
When you ask a new developers when to use POST and when to use GET, and they answer that POST is needed when you need to send data to the server. This is not fully true. Better to say: non-simple requests should be used when you need to change data on the server (by change I mean add, update and delete of course).
How to attach cookies on request
By default browser does not send cookies installed to the original domain (a.com). This is a great hole-fixer. For most sites, you need to attach cookies to run APIs like change passwords or withdraw money (any requests for which it is important to identify and authorize users).
It is possible to say browser that he should apply cookies saved for http://b.com .
To do this you should use withCredentials field of XMLHttpRequest request object:
jQuery ajax version can be something like this:
In this case, the browser will attach cookies to request, but to complete such request after response, the web-server should include in response ACAC :
For all requests, limit backend to accept only Content-Type: JSON
This is a well-known rule known as content-type enforcement or application/json enforcement . Just raise an exception immediately if the content-type request header is not JSON. A lot of frameworks do it for you. To understand the reason, you should know two important facts:
So if you allow application/x-www-form-urlencoded then hacker might place a