Trix: Inline style blocks and CSP

Created on 8 Mar 2017 · 8Comments · Source: basecamp/trix

Trix injects a couple of inline <style> blocks into the page <head>: one for the editor itself, and another for the toolbar. Neither block includes a nonce attribute; consequently, the CSP must include 'unsafe-inline' in the style-src directive.

It would be nice to be able to either:

Have Trix auto-generate nonce attributes for its inline style blocks, or...
Preferably, eliminate the need for these inline <style> blocks altogether

Maybe I'm missing the point, but these <style> blocks appear not to contain anything that could not be factored out into the existing trix.css external stylesheet.

Steps to Reproduce

Use Trix
Inspect the page source
See the inline <style> blocks that Trix has injected

Details

Trix version: 0.10.1
Browser name and version: Chromium 56.0.2924.76
Operating system: Ubuntu 16.04 (64-bit)

Source

spdawson

👍7

All 8 comments

Hey @spdawson, thanks for the report!

Maybe I'm missing the point, but these <style> blocks appear not to contain anything that could not be factored out into the existing trix.css external stylesheet.

The inline <style> styles are for crucial core functionality and behavior. Without them, the editor may not behave correctly. The trix.css are optional and purely decorative. So, that's the reason they're separate. Technically you're correct, the inline styles could be moved to an external .css file.

I see a couple options:

Add a Trix.config option to disable the inline styles and offer them as a .css file alternative.
Provide Trix with a nonce to use for its <style> tags, possibly as a <meta name="trix-style-nonce" content="..."> tag. Might look something like:

```diff
--- a/src/trix/core/helpers/custom_elements.coffee
+++ b/src/trix/core/helpers/custom_elements.coffee
@@ -35,9 +35,15 @@ insertStyleElementForTagName = (tagName) ->
   element = document.createElement("style")
   element.setAttribute("type", "text/css")
   element.setAttribute("data-tag-name", tagName.toLowerCase())
+  if nonce = getNonceForStyleElement()
+    element.setAttribute("nonce", nonce)
   document.head.insertBefore(element, document.head.firstChild)
   element

+getNonceForStyleElement = ->
+  if element = document.head.querySelector("meta[name=trix-style-nonce]")
+    element.getAttribute("content")
+
```