0

I have a HTML/EJS webpage with the following Content Security Policy in the head tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; frame-src https://externalpage.com/">

As can be seen, I have stated a URL for the "frame-src" in order to load an external iframe into the page. This, however, is not functional. The error is the following:

"Refused to frame 'https://externalpage.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback."

The iframe is similar to the following:

<iframe width="256" height="256" style="display:inline-block;border:none;" src="//externalpage.com/ect/long/remainder/of/url/link/here</iframe>

The error message persists even if I remove the 'default-src' directive. I have also tried to define a 'wildcard' as "https://externalpage.com/*" without success. I also do not understand why the error indicates that I have not set a 'frame-src' directive, when I clearly have. What am I to do to resolve this...????

In addition as can be seen I was forced to add an "unsafe-inline" rule in order to allow inline styling, such as "div class="container-fluid" style="margin-top:30px"" ...is there some way to get around this? I know the 'unsafe-inline' should not be used due to security issues.

This Content Security Policy nonsense is madness.

Pangit
  • 564
  • 1
  • 7
  • 23

1 Answers1

2

Looks like you have 2 different CSPs - the first one via HTTP header, and the second - via meta tag.

Content Security Policy in the HTTP header has more strict rules, therefore it is who actually performs the locks.

Check is there CSP delivered in HTTP header (here is tutorial).

Multi-scheme URL like <iframe src="//externalpage.com/"> means that on HTTP:-pages it will be <iframe src="http://externalpage.com/"> and on HTTPS: - <iframe src="https://externalpage.com/"> (browser add the scheme on its own using to Same Origin Policy).
Hence you need to use frame-src externalpage.com without scheme too.
On HTTP:-pages it will be frame-src http://externalpage.com and the frame-src https://externalpage.com on HTTPS: pages.

granty
  • 7,234
  • 1
  • 14
  • 21
  • Thank you for the reply. I find it informative. I have retrieved the HTTP response header using the method you provided. Where does this CSP originate from? I am using my localhost, so I do not understand how this CSP is set? Also, more importantly...how do I over-ride this CSP so as to replace with what I have set in the meta tag? From what I can see, the HTTP header is delivering a much more restrictive CSP...? – Pangit Dec 27 '20 at 00:19
  • Also I have attempted to create a SCRIPT object in my external .js file the page is using. I still get CSP blocking of that script as well. I would have thought this would qualify as "script-src 'self'"...however apparently not. Therefore what exactly is the 'self' directive supposed to be allowing? I know it does not allow 'inline script' either...if 'inline' and 'external' scripts cannot be processed how am I supposed to resolve this??? I thank you again for your information. – Pangit Dec 27 '20 at 00:23
  • It's need to know what software do you use on backend. Some of those auto set default CSP header (Helmet 4 for example). The `'self'` token could be a little bit tricky - commonly it means Same Origin Policy (the same Scheme/HostName/PortNumber over which the page was loaded). In CSP3 browsers `'self'` extends `http:` scheme to `http: https:` and to [ws: wss: too](http://csplite.com/csp/test15/). "I have attempted to create a SCRIPT object" - it's treated as inline script if you creates `` using `createElement('script')`. Creation of ` – granty Dec 27 '20 at 06:34
  • Thanks again for the response. I am using Node/Express, and I also use the Helmet module...perhaps this is why my CSP was created through HTTP Headers and is set as it is. I will remove Helmet and see what effect that has on the CSP. I believe I can also form the CSP directly within Node.js itself...I will have to research that. – Pangit Dec 27 '20 at 11:55
  • Yes my external .js file attempts to create the script element using "createElement('SCRIPT'). I wrote that code within the external .js file that is called using a "script src'=/path/to/my/external/js/file"...so I am still confused why it would be considered inline...? Thanks again for your useful information. – Pangit Dec 27 '20 at 12:02
  • You can just [switch off CSP](https://helmetjs.github.io/) in Helmet and continue to use other security headers: `app.use( helmet({ contentSecurityPolicy: false,}) );` – granty Dec 27 '20 at 17:18
  • Thanks for all your help, much appreciated ! – Pangit Dec 27 '20 at 23:52