Search code examples
javascripthtmlbrowserhttp-headerscontent-security-policy

What might reasons be of having a Content Security Policy error when a CSP is not even specified?

My web application is failing to load the static resources from a DigitalOcean Space, by throwing the following error in the browser console:

Content Security Policy: The page’s settings blocked the loading of a resource at https://somespace.digitaloceanspaces.com/static/css/mystyle.css (“style-src”).

I went through some reading regarding CSP, and on this resource I found the following statement:

This warning message means that due to the existence of a particular CSP directive, a resource wasn't loaded.

However, I have not provided any particular CSP directive. I am also providing a short snippet on how I am including the CSS file on my HTML document:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://somespace.digitaloceanspaces.com/static/css/mystyle.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-TileColor" content="#ffffff">
</head>

Might there be another reason why this error is being thrown? What would be a workaround or at least a way to debug this problem?

Solution

  • You need to firstly check the response headers you are receiving. The Content-Security-Policy should be defined there. This header contains the configurations. You can learn more about them here: https://content-security-policy.com/

    Then, you need to determine where this header is being added. In my case, it was being added through an old NGINX configuration.