I've created a "new tab, chrome extension" a while back which is running a React App. One of the feature of this extension is a Twitch player, with the possibility of opening streams using an iFrame to watch the streams. The data and urls are retrived from the open Twitch API. This has worked fine for quite a while, but about a month back it stopped working for some reason.
When I open a stream I get this error message:
Refused to frame 'https://embed.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://".
It could be worth noting as well that the player works when I'm just running the React App, so it has something to do with the Chrome Extension.
I did some research about this issue and found that it was some issue with how the parent and referer is specified in the iFrame. The iFrame look like this and most of it is automatically generated when I build and run the extension.
<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&style=%5Bobject%20Object%5D&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>
Since I coudn't find anything that helps solve the issue, I figured I try with a new post. Could anyone help me solving the issue?
I asked the same question on the twitch developer forum, and got the answer that this is not supported anymore.
source: https://discuss.dev.twitch.tv/t/twitch-embedded-in-a-chrome-extension/33157
So for anyone coming to this question, this is not possible anymore.