[DISCUSS] react-ace/brace + Content Security Policy

[chandlerprall]

Extending conversations from #1472 #1431 #506 /cc @kobelb @azasypkin @alexbrasetvik

EuiCodeEditor uses react-ace, a React wrapper around the brace library. brace violates a lock-down CSP (default-src 'self') in the following ways:

• data: image source for a blank drag&drop icon when dragging highlighted text
• blob: web workers for language processing
• <style> elements appended to the document head for themes
• inline style= attributes for various text/line-specific positioning and sizing

To make sure I caught everything, I forked brace and made the following modifications (chandlerprall/brace@638e695?diff=split&w=1), which restored all functionality and avoids CSP errors.

• drag&drop image swapped for an empty canvas element
• disabled web workers, falling back to same-thread language processing (brace does this by default if it can't spawn the web worker, I only disabled the happy-path)
• added a nonce to created style elements (see below for details)
• instead of inline style attributes, applies the styles via javascript (element.style.foo =)

nonce details

For testing, I hard coded the nonce into my fork. Otherwise, the nonce would need to be placed on the global window object and read by brace on import, as brace auto-injects its base styles immediately.

attempt at sha256-digest

The worker blobs and inline style attributes cannot be solved with CSP hashes.

loosening the CSP for brace

Allowing these data sources via default-src 'self'; style-src 'unsafe-inline'; worker-src blob:; img-src 'self' data: also solves the issues, with the added benefit that the language processing can continue working off the main thread. This is what cloud ui currently does as EuiCodeEditor is in use there.

[kobelb]

Does ace itself do the automatic style attribute insertion? It also seems like ace doesn't use the inline blob for Webworkers, which might play more nicely with our CSP rules at the expense of hosting the webworker at an accessible URL.

[chandlerprall]

There are four issues on ace when I search for content security policy, two open and two closed - https://github.com/ajaxorg/ace/issues?utf8=%E2%9C%93&q=is%3Aissue+content+security+policy It looks like they are working on some of the issues, and helping provide/find workarounds in other places.

Does ace itself do the automatic style attribute insertion?

At a quick search, I couldn't find any relevant style= assignments in ace, but there are many .style.foo = assignments.

It also seems like ace doesn't use the inline blob for Webworkers

It looks like there is a config to disable web-worker blob:, though one of those issues indicates doing so might be broken in the react-ace wrapper.

Based on your questions, would you like me to make an in-depth look at using ace instead of brace?

[kobelb]

Based on your questions, would you like me to make an in-depth look at using ace instead of brace?

If you could, that'd be great.

[kobelb]

It looks like the index pattern scripted field editor is currently using EuiCodeEditor which is causing the following CSP violation as well via react-ace:

index.js:3802 Refused to load the script 'http://localhost:5601/app/theme-theme.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'nonce-zfod+VaGDi+DbLPr'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.