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?
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.