[BUG] editor uses inlined style attributes, but default CSP (Content-Security-Policy) disallows them. #332
Labels
bug
Something isn't working
Comments
|
@TomNUSDS the part which I'm not sure about is how would dynamically positioned elements like tooltips and popovers would work without inline styles to position them. As far as I saw, popular UI libraries like Radix (used in the editor) and MUI have not solved that. Have you seen anything regarding that? |
|
Note, maybe this... https://stackoverflow.com/a/29089970 |
|
Any updates in this area? I am trying to setup mdx editor but I'm also running into unsafe-inline styling issues with our CSP |
|
I am unlikely to get to this anytime soon, given the pop up implementation. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Sites that use a CSP to improve their security are moving away from inlined styles (
styleattributes that appear on elements) in favor ofclassattributes.See: https://content-security-policy.com/examples/allow-inline-style/
Good background read (balanced): https://scotthelme.co.uk/can-you-get-pwned-with-css/
Reproduction
The easiest way to reproduce this issue is to add the meta tag to the
index.html's<head>section:<meta http-equiv="Content-Security-Policy" content="default-src 'self'">The meta header is not considered best practice (putting the csp in the http header is), but this approach fine for demonstration/dev.
To Reproduce
Steps to reproduce the behavior:
index.htmltemplate page.<meta http-equiv="Content-Security-Policy" content="default-src 'self'">and saveResult:
A blank screen is displayed, the console shows errors like:
Expected behavior
CSPs are quickly gaining popularity because they greatly increase a site's security. For SPAs (Single Page Apps), the CSP http-header applies to the "whole site" since there's only one http page load. If any component requires insecure behaviors, then the whole site must have it's security stance lowered.
Desktop (please complete the following information):
Additional context
This is likely not a minor change. However, thinking about CSP as new features are added or refactored is useful for forward compatibility.
A useful exercise is to tweak the CSP ever so slightly until the component does work to understand what's involved for users of the component.
https://content-security-policy.com/examples/allow-inline-style/
Because this is a long-term goal, it may make sense to close this issue.
The text was updated successfully, but these errors were encountered: