Debugging CSP violation in Google Chrome

Question

I'm trying to use TinyMCE while using following Content-Security-Policy HTTP header:

X-WebKit-CSP: default-src 'self'; script-src 'self' 'unsafe-eval'; img-src *; media-src *; frame-src *; font-src *; style-src 'self' 'unsafe-inline'; report-uri /:reportcspviolation

I get following errors in Tools - JavaScript Console:

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 about:blank:1
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 test.xhtml:1
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 about:blank:1
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
 test.xhtml:1

However, there's no executable JS code in the test.xhtml because it only uses external <script> to work with CSP header given. The reference to about:blank is also similarly invalid.

Any ideas how to figure out where the cause for the CSP violation is?

It seems that Chrome's internal JS debugger does not identify the source.

In addition, for some reason, Chrome shows CSP violation reports as "Pending" in Tools - Developer Tools - Network but inspecting the data-to-be-send does not give any additional info. Example:

{"csp-report":{"document-uri":"about:blank","referrer":"url-of/test.xhtml","violated-directive":"script-src 'self' 'unsafe-eval'","original-policy":"default-src 'self'; script-src 'self' 'unsafe-eval'; img-src *; media-src *; frame-src *; font-src *; style-src 'self' 'unsafe-inline'; report-uri /:reportcspviolation"}}

I'm able to figure out that the error messages are about using e.g. onclick attribute in some piece of HTML that TinyMCE loads on the fly but what file to look for? Another error is probably a piece of TinyMCE HTML where some href has value that starts with javascript: but that too is really hard to find without any pointers from the Chrome. The whole setup works with Firefox 13 (using corresponding CSP header).

Is there any way to make Chrome throw Exception for every CSP violation?

Answer 1

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.