Last day, while working on my client project, all of a sudden I saw a new error in console, at least for me it was new. It said "Refused to connect to URL because it violates the following content security policy directive: 'connect-src none'".
I tried to understand it by creating a POC.
First of all
connect-src none is a new way to bring more security to web pages. It is part of the new Content-Security-Policy HTTP response header. Using this new header, we can declaratively bring different levels of security.
We can try Content-Security-Policy either through HTTP response header or by placing
metatag in the page.
I tried using
Our aim is to restrict a web page from making AJAX calls.
For that, create a web page
index.html. Add the below
meta tag in the page.
<meta http-equiv="Content-Security-Policy" content="connect-src 'none'" />
Next, we place a
fetch request in the page:
fetch("http://127.0.0.1:5500/data.json") .then((response) => response.json()) .then((data) => console.log(data));
Note that my
data.json is in my same server. When I run my page, I will see below error in console:
Refused to connect to 'http://127.0.0.1:5500/data.json' because it violates the following Content Security Policy directive: "connect-src 'none'".
That means, since I set the value of
none, no fetch call can happen from the page.
Now let us change the value of
<meta http-equiv="Content-Security-Policy" content="connect-src 'self'" />
Now I could see the JSON data. Now let us change the API url to an external open API.
fetch("https://jsonplaceholder.typicode.com/todos") .then((response) => response.json()) .then((data) => console.log(data));
It now throws below error in console.
Refused to connect to 'https://jsonplaceholder.typicode.com/todos' because it violates the following Content Security Policy directive: "connect-src 'self'".
That means, if the value of
self, a fetch call will work only if the domains are same.
You can read more about Content Security Policy and its browser support here.