1

I'm trying to embed a twitch.tv player in my webpage but I keep getting:

Content Security Policy: The page’s settings blocked the loading of a resource at https://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe (“default-src”).

My current header settings:

    header("Content-Security-Policy: default-src 'self' *.twitch.tv; script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'none'; style-src 'self' 'unsafe-inline'; media-src *; frame-src 'unsafe-inline' 'unsafe-eval' *.twitch.tv;");

My current meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' player.twitch.tv; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.twitch.tv">

What am I doing wrong?

Requiem
  • 23
  • 1
  • 3

1 Answers1

1

It can be 2 issues:

A). You use non CSP3-compatible browser. On HTTP: pages the schemeless sources will obtain schemes via Same Origin Policy. Therefore player.twitch.tv -> http://player.twitch.tv and *.twitch.tv -> http://*.twitch.tv.
Both http://*.twitch.tv and http://player.twitch.tv do not allow iframe with httpS://player.twitch.tv in CSP2 browsers (while CSP3 browsers allow upgrade http: to https:).
In this case use source with scheme like default-src 'self' https://player.twitch.tv if you embed <iframe src='https://player.twitch.tv'> with exact scheme.

B). Probably your CSP header is overridden by other CSP in .htaccess or web server config. HTTP header you shown contains frame-src, but you observe violation in the default-src, it means that not HTTP header is the reason of lock.
Check what CSP header is really delivered to a web page, here is tutorial.
Alternatively you can have a look into Chrome browser console - it's more verbose than Firefoxes one, and will show not only violated directive, but its riles too.

BTW

  1. You have an error in Url phttps://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe (have a look into Dev Tools or browser console), the parent=http://blue.requiem.moe parameter should be without http:// scheme:

https://player.twitch.tv/?channel=bluebeast8888&parent=http://blue.requiem.moe

  1. You have different CSPs in HTTP header and meta tag.

Multiple policies operates by logical "AND" - all sources should pass unscrathed trough both CSP.
Keep 2 CSPs at the same is a headache, remove one ot that.

  1. The frame-src directive does not support 'unsafe-inline' and 'unsafe-eval' tokens, you can remove them.
granty
  • 7,234
  • 1
  • 14
  • 21