Tracing security policy permissions in JavaScript

Question

Despite having set the following headers:

Access-Control-Allow-Origin: *
Content-Security-Policy: default-src 'self' 'unsafe-inline' *.speech.is http://bits.speech.is https://bits.speech.is http://speech.is

JavaScript is still blocking me from accessing iframe.contentWindow.document:

Error: Permission denied to access property 'document'

From Firefox console after speech.contentWindow.document at http://bits.speech.is. Chrome gives the more verbose yet still cryptic:

SecurityError: Blocked a frame with origin "http://bits.speech.is" from accessing a frame with origin "http://208.113.212.187". Protocols, domains, and ports must match.
code: 18
message: "Blocked a frame with origin "http://bits.speech.is" from accessing a frame with origin "http://208.113.212.187". Protocols, domains, and ports must match."
name: "SecurityError"
stack: "Error: Blocked a frame with origin "http://bits.speech.is" from accessing a frame with origin "http://208.113.212.187". Protocols, domains, and ports must match.↵    at <anonymous>:2:21↵    at Object.InjectedScript._evaluateOn (<anonymous>:580:39)↵    at Object.InjectedScript._evaluateAndWrap (<anonymous>:539:52)↵    at Object.InjectedScript.evaluate (<anonymous>:458:21)"

Is there anyway to trace where this security policy is getting set? How do figure out what else am I missing?

Answer 1

Best method I was able to find for fine-tuning CSP was a combination of these two:

• looking at browser console
• configuring CSP to sent CSP reports as they sometimes contain more details can console messages

For the latter you'd need to add report-uri to your CSP header and I use http://cspbuilder.info/ unique URLs as report collectors. You might also set the Content-Security-Policy-Report-Only variant until it starts working.

It would also help if you write what browser you are using. The message doesn't look like CSP violation error from Chrome - they are way more verbose and really helpful than this one.