3

Why does adding the following header cause Firefox only to empty all style="" attributes when rendered in the browser?

context.HttpContext.Response.Headers.Add("Content-Security-Policy", "style-src-attr 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'");

Chrome and Edge browser show all content correct that means the style attribute`s value was not cleared to "".

HelloWorld
  • 4,671
  • 12
  • 46
  • 78

2 Answers2

1

The directives and syntax both you have used are valid but as per Content Security Policy Level 3 specifications, which are under Working Draft status right now.

Modern Chrome and Edge browsers are now fully support Content Security Policy Level 2 specifications as well as Content Security Policy Level 3 specifications partially. While Firefox has partial support to Content Security Policy Level 2 and Level 3 specifications till now, and this is the reason why Chrome and Edge browser showing all your content correct but Firefox. (please update your Firefox version and then re-check).

https://caniuse.com/#search=content%20security%20policy%20level

enter image description here

FYI, If your browser supports, style-src-attr can be used in conjunction with style-src. If this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr

Coming back to answer, now resolve this issue your Content Security policy header should be like below which is supported by almost all browsers.

context.HttpContext.Response.Headers.Add("Content-Security-Policy","style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'");

Update:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr#Browser_compatibility

enter image description here

This is a bug in Mozilla, which is already reported by someone ten months ago, maybe fixed in new updates.

https://bugzilla.mozilla.org/show_bug.cgi?id=1529338

Noor A Shuvo
  • 2,639
  • 3
  • 23
  • 48
Vaibhav J
  • 1,316
  • 8
  • 15
0

First of all I could not reproduce the problem. When I added your Content-Security-Policy Firefox displayed inline styles just fine (v 70.0.1, 64 bit).

Then I tested your CSP with https://cspvalidator.org and it gave the following errors

1:1: Unrecognised directive-name: "style-src-attr".

1:33: Unrecognised directive-name: "script-src-elem".

Which would make sense since those attributes do not exist according the site https://content-security-policy.com/

So the CSP should propably be

"style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'"
Community
  • 1
  • 1
VDWWD
  • 35,079
  • 22
  • 62
  • 79
  • It is correct that both attributes do not exist. But the problem is in the "style-src 'unsafe-inline'" the style attributes are also blocked/cleared. That should not happen according to: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src I use FF 68.2.0esr (32-Bit). – HelloWorld Nov 29 '19 at 10:32
  • Yeah, and it doesn't. At least on 2 sites I've tested it with. – VDWWD Nov 29 '19 at 10:34
  • I even did: style-src 'self' which should allow style attributes/tags from the own site but even that does not work. all styles are cleared. So you agree it is buggy? – HelloWorld Nov 29 '19 at 10:38
  • What is your firefox version? And does it perhaps have plugins that might interfere? And buggy is questionable since so far only youu have an issue, but then again it could be buggy in a specific version on a specific site. Is the site with the issue accessible? – VDWWD Nov 29 '19 at 11:10
  • its also happening on FF 70.0.1 (64bit). The site is not public for everyone. I can set the minimum header configuration like: style-src 'self' that should allow all style tags/attributes coming from the own domain. Even that did not work. What are the 2 sites you found where csp does NOT work like you have written above? – HelloWorld Nov 29 '19 at 12:32
  • I've set up a simple test. What happens if you visit http://test01.vanderwaal.eu? It has inline styles and the CSP header. It also displayes fine in Firefox. If you see the green block and red border then you know the problem lies with your website/server. – VDWWD Nov 29 '19 at 17:49
  • The test seems not logical to me. Its even green/red in chrome because its your server :P – HelloWorld Dec 06 '19 at 11:03
  • I know. It's just to prove the problem probably not lies in FireFox ;) – VDWWD Dec 06 '19 at 17:43