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.