Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline Styles cause Content Security Policy Violation #905

Closed
felixbuenemann opened this issue Mar 17, 2019 · 0 comments
Closed

Inline Styles cause Content Security Policy Violation #905

felixbuenemann opened this issue Mar 17, 2019 · 0 comments

Comments

@felixbuenemann
Copy link
Contributor

Version

5.0.0-beta.4

Browser and OS info

Chrome 72 / macOS 10.14

Steps to reproduce

When the vue-devtools inspector is used on a website that has Content Security Policy deployed and the policy does not whiltelist inline styles using the insecure 'unsafe-inline' policy, the following error is logged in the console over and over:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-BLZdMv2gh2vNZKxp7hehCQqh6sIu14k4XWIywP6 mJA='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Note that the hint to whitelist a sha256 is misleading, since it won't work. Only inline <style> tags can use hashes, inline style attributes are not supported.

See https://bugs.chromium.org/p/chromium/issues/detail?id=546106 for details on the misleading error message.

What is expected?

Vue-devtools should work fine with CSP enabled.

What is actually happening?

Vue-devtools inspector styles are not applied due to the unnecessary usage of inline styles.

This problem can easily be fixed by converting the affected code to use the JavaScript DOM API to create DOM elements and set the styles using the style property of the element.

The current problem only exists because the extension uses html snippets with inline styles that are inserted as innerHTML.

I will work on a PR to fix this problem.
felixbuenemann added a commit to felixbuenemann/vue-devtools that referenced this issue Mar 17, 2019
@felixbuenemann
fix: CSP inline style violations (fix vuejs#905)
c1cc5d5 
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
@felixbuenemann felixbuenemann mentioned this issue Mar 17, 2019
Merged
Akryum pushed a commit that referenced this issue Mar 20, 2019
@felixbuenemann @Akryum
fix: CSP inline style violations, closes #905 (#906)
47d2562 
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
simsim0709 pushed a commit to simsim0709/vue-devtools that referenced this issue May 7, 2019
@felixbuenemann
fix: CSP inline style violations, closes vuejs#905 (vuejs#906)
bb78ebb 
Content Security Policy prevents the usage of inline styles on DOM
elements, unless the insecure 'unsafe-inline' rule is used. This
can be worked around by setting styles through the JS DOM API.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@felixbuenemann