-
Notifications
You must be signed in to change notification settings - Fork 206
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.
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
Inline styles in web-components.min.js cause CSP violation #2506
Comments
It appears that CSP is a challenge to get working with any Web Components that utilize inline CSS. I found this discussion which seems to indicate that there is currently no trivial way to get the benefits of web components in a CSP compatible way. How frustrating. But... where are the inline styles coming from? Any idea? I (wrongly) assumed that since some of the CSS is bundled in a separate file... elements/examples/static-html/zoom-api/index.html Lines 10 to 13 in 3e17d63
that ALL of it was bundled in a separate file, but clearly that's not the case. @PatrickSchuster any chance you can provide a working reproduction, perhaps by modifying the |
Hi @billiegoose and thank you for your detailed response! Here is a minimal reproducable example that is very similar to my project: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inline styles VS CSP demo</title>
<meta name="description" content="Example site using Stoplight Elements along with a CSP in the meta element to highlight violations"/>
<meta name="author" content="Patrick"/>
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'sha256-MBVp6JYxbC/wICelYC6eULCRpgi9kGezXXSaq/TS2+I=';">
<script src="web-components.min.js"></script>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<elements-api
apiDescriptionUrl="https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml"
router="hash"
layout="sidebar"
/>
</body>
</html> (Make sure to click on the "Update a webhook confugration" endpoint to see an error.) Notice that I added a hash ( Also notice that I reference the: locally. I know that CSP is frustrating and is tricky to add especially when working with 3rd party software. Still, it is required in my project for security reasons and I wanted to point out the issues I found. Btw, as a very "caveman-like" workaround I added some code to the locally hosted Thank you and BR! |
This ticket has been labeled jira. A tracking ticket in Stoplight's Jira ( |
I have a CSP which sets
style-src 'self' 'sha256-...'
.Unfortunately, I cannot add the sha256 hash that Chrome calculated to my CSP since it keeps changing and therefore I keep running into the same violation.
Context
I'm trying to have a strict CSP while using stoplight.
Current Behavior
I'm using https://unpkg.com/@stoplight/[email protected]/web-components.min.js which seem to to cause a CSP violation:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-...
.Expected Behavior
There are no more CSP violations while using the library.
Possible Solution(s)
Are there any plans to get rid of inline styles to avoid CSP violations? I'm a bit hesitant to weaken my CSP by using
script-src 'unsafe-inline'
.Thank you!
The text was updated successfully, but these errors were encountered: