The Web Inspector cannot add inline styles when Content Security Policy disallows unsafe inline styles
Categories
(DevTools :: Inspector, defect)
Tracking
(Not tracked)
People
(Reporter: mikey.clarke, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0
Steps to reproduce:
- Ensure that you have a Content Security Policy header that blocks inline styles, e.g.
style-src 'self';
- Open the Web Inspector, target an element, and attempt to add an inline style through the Rules tab in the element inspector sidebar
Actual results:
The Web Inspector shows the inline style that you’ve added, but it is not actually applied to the element. If you open the Console you’ll see a warning: “Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).”
Expected results:
I would expect the Web Inspector to receive an exemption from CSP compliance. I’m not sure that there’s really any reason for it not to, and it renders Firefox’s developer tools less useful for anyone working on a site or web app using a strict CSP. I checked this in Chrome and (macOS) Safari and their developer tools both apply inline styles despite the CSP.
Comment 1•5 years ago
|
||
Hi @mikey.clarke, can you provide a TC (test case) in order to test the issue?
Thanks.
Reporter | ||
Comment 2•5 years ago
|
||
(In reply to Liviu Seplecan from comment #1)
Hi @mikey.clarke, can you provide a TC (test case) in order to test the issue?
Thanks.
Hi, I discovered this whilst working on something that isn’t live yet, but you should be able to see it on any site that has a CSP that disallows inline styles. Here’s a good example: https://scotthelme.co.uk/content-security-policy-an-introduction/. Try to add an inline style to any element on that page through the web inspector and you should see the issue.
Thanks!
Comment 3•5 years ago
|
||
I not requested an example to read, the one for test.
Reporter | ||
Comment 4•5 years ago
|
||
(In reply to Liviu Seplecan from comment #3)
I not requested an example to read, the one for test.
Sorry, I wasn’t suggesting that you read the article on that page. That blog just happens to have a CSP that disallows inline styles and so you can use it to replicate the issue.
If you load any page on that site, inspect an element, and try to add an inline style to that element through the web inspector, the style won’t be applied and the aforementioned error will appear in the console.
Updated•5 years ago
|
Comment 5•5 years ago
|
||
Thanks for filing. I'm fairly sure this is a duplicate of bug 1391994. Feel free to re-open if not.
Description
•