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
meta
tag in the page.
I tried using meta
tag.
Connect-src Demo
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 connect-src
to none
, no fetch call can happen from the page.
Now let us change the value of none
to self
.
<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 connect-src
is 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.