Debugging CSP violation in Google Chrome

Although this question is old, the answer is still the same. The default code written by TinyMCE is not non-csp compliant.

Tinymce inserts inline css into the elements it adds the dom. It doesn't have to be this way, but it is the way they have written it. You can see it if you inspect the dom with with google or firefox dev tools, here is one example that can be found within the iframe it inserts:

<body spellcheck="false" id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('story_story').fire('load');" contenteditable="true"><p><br></p></body>

The browser detects this and raises a violation report as your csp does not allow this. There are two ways to make this error disappear:

1) add 'inline' or 'unsafe-inline' to your csp script-src for that page

or

2) recode the tinymce javascript files. This would require you to open all the javascript files are change the code it inserts to exclude the inline js parts. These scripts would then have to be placed into script files which are inserted into the dom to enable the code to still work.


Be sure to disable all Chrome Extensions when testing the CSP on your site - AdBlock and PhotoZoom extensions, for instance, both add their own inline styles to the DOM which trigger a violation (and subsequent hit to report-uri if you have that feature enabled, and others extensions likely do the same.