Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging CSP violation in Google Chrome

Tags:

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?

like image 878
Mikko Rantalainen Avatar asked Jul 06 '12 10:07

Mikko Rantalainen


People also ask

What is CSP Chrome?

# What is the CSP for Chrome Apps? The content security policy for Chrome Apps restricts you from doing the following: You can't use inline scripting in your Chrome App pages. The restriction bans both <script> blocks and event handlers ( <button onclick="..."> ).

How do I disable CSP in my browser?

Turn off the CSP for your entire browser in Firefox by disabling security. csp. enable in the about:config menu. Note: You must log in to the ELM instance in the new tab of the same browser before you access the resource or configuration picker through Publishing Document Builder.


2 Answers

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.

like image 127
GaryJ Avatar answered Oct 14 '22 23:10

GaryJ


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.

like image 40
ABrowne Avatar answered Oct 14 '22 21:10

ABrowne