Add style-nonce attribute to import-map-overrides-full element to support use under a Content Security Policy(CSP) #126
Conversation
…port use under a Content Security Policy(CSP)
🦋 Changeset detectedLatest commit: 43db437 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| @@ -22,7 +22,9 @@ export default [ | |||
| babelHelpers: "bundled", | |||
| }), | |||
| nodeResolve(), | |||
| postcss(), | |||
| postcss({ | |||
| inject: false, | |||
There was a problem hiding this comment.
This is technically a breaking change because user code could be accidentally or intentionally relying on the injected import-map-overrides.css in the global page, so I added a new changeset for this. Injecting the css into the main document isn't needed, since it's only used within shadow dom
src/ui/custom-elements.js
Outdated
| if (name === "style-nonce") { | ||
| this.styleNonce = newValue; | ||
| if (this.shadow) { | ||
| this.shadow.querySelector("style").nonce = this.styleNonce; | ||
| } | ||
| } |
There was a problem hiding this comment.
This should be handled within renderWithPreact, like the other attribute changes are handled. I removed it in the commits I pushed
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta | ||
| http-equiv="Content-Security-Policy" | ||
| content="style-src 'nonce-adsffdsa78dsaf87a9'" |
There was a problem hiding this comment.
Confirmed that with this CSP the browser complains without the style-nonce attribute
| @@ -43,6 +44,9 @@ function preactCustomElement(Comp, observedAttributes = []) { | |||
| this.shadow = this.attachShadow({ mode: "open" }); | |||
| const style = document.createElement("style"); | |||
| style.textContent = styles.toString(); | |||
| if (this.getAttribute("style-nonce")) { | |||
| style.setAttribute("nonce", this.getAttribute("style-nonce")); | |||
There was a problem hiding this comment.
I switched from style.nonce = to style.setAttribute('nonce', ..) even though both approaches function, since the javascript property version is not visible in the browser devtools and makes it more difficult to know that there is a nonce on the style element
Enables use of the import-map-overrides UI on a site that uses a strict CSP by providing a style-nonce attribute that can be set with the nonce required by the CSP for style tags.