search

mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.78k stars 138 forks source link

[BUG] editor uses inlined style attributes, but default CSP (Content-Security-Policy) disallows them. #332

Open TomNUSDS opened 7 months ago

TomNUSDS commented 7 months ago

Describe the bug Sites that use a CSP to improve their security are moving away from inlined styles (style attributes that appear on elements) in favor of class attributes.

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:

  1. Using a dev localhost site, edit the index.html template page.
  2. Add the basic CSP header: <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> and save
  3. Reload the page
  4. Open the debugger and look for the CSP errors in the console. Result: A blank screen is displayed, the console shows errors like:

    Refused to apply inline style because it violates the following Content Security Policy

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/

"The unsafe-inline source list keyword can be used to allow inline styles, but this also removes much of the security protection that you gain when you enable CSP."

Because this is a long-term goal, it may make sense to close this issue.

petyosi commented 7 months ago

@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?

petyosi commented 7 months ago

Note, maybe this... https://stackoverflow.com/a/29089970

prests commented 4 months ago

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

petyosi commented 4 months ago

I am unlikely to get to this anytime soon, given the pop up implementation.