Twitch embedded in a Chrome Extension

API Migration
1

Hi there,

Posted a thread on SO a few months back on this issue, but never got an answer. Figured I try here instead :slight_smile:

So, I guess it was around the migration my extenstion stopped working with the Twitch embedded player and I then started to get this error message:

Refused to frame 'https://embed.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://<my extension id>".

My setup is that I developed in a React app (The embeded player works fine there) and then building and importing that into a Chrome extension. Worth mentioning is that i’m loading the the Twitch embeded iFrame with a library: GitHub - talk2MeGooseman/react-twitch-embed-video: Twitch Embed Video wrapper for ReactJS.

When the iFrame is opened the element looks like this:

<iframe src="https://embed.twitch.tv?autoplay=true&channel=<a channel>&height=720px&layout=video-with-chat&muted=false&parent=<id of my chrome extension>&referrer=chrome-extension%3A%2F%<id of my chrome extension>%2Fbuild%2Findex.html&targetId=twitch-embed&width=1280px" allowfullscreen="" scrolling="no" frameborder="0" allow="autoplay; fullscreen" title="Twitch" sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" width="1280px" height="720px"></iframe>

Looked around a little bit more today and tried figuring out what the issue could be. Worth mentioning here as well is that I have tried different urls, and sometimes i’m getting:

[InvalidCharInParent] parent query string value contains invalid character

But I can never get it to play a stream. (Testing as in removing the extra /build/index.html on the parent, removing the referer, having just the stream and the parent, but nothing works). Also worth noting is that the url in the Chrome Extension is just “chrome-extension:///build/index.html”. So I interpret that the parent/domain ought to be the extension id.

I guess there has to be something to do with the Chrome Extension, but I really can’t find any resources online about this. Was hoping someone here might help me!

Thank you in advance,
Viktor

2

The parent for embeds is JUST the domain name.

so for https://mysite/somepage/another/ the parent is only mysite

I don’t believe this will work on chrome-extension since embeds also require the page to be served over SSL

3

Thank you for your quick answer,
and I figured that something like this might have been the issue.

Too bad this wont work anymore :pensive: