Refused to frame 'https://embed.twitch.tv/' because an ancestor violates the following Content Security Policy directive

API
1

I am trying to embed my twitch stream into my wix website. It was working for the past few weeks but all of a sudden it stopped. I am not sure what happened. But when I look in the developer console of google chrome I see the following error string: “Refused to frame ‘https://embed.twitch.tv/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://ff247d54-a3ca-4fa8-b615-4c58d7f011b3.htmlcomponentservice.com”.”

The code below is what I am using to embed my stream. Please assist! Thank you.

<div id="twitch-embed"></div>

<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
  new Twitch.Embed("twitch-embed", {
    width: '100%',
    height: '100%',
    channel: "sourceinvite"
  });
</script>
3

bump

4

I’m also seeing this error:

Capture
Capture1021×560 32.4 KB

5

Seems to be web server or web app related

6

However, it is working in Internet Explorer 11.900.18362.0. But it does not work in Opera, Mozilla Firefox, Google Chrome, or Microsoft Edge.

3
31735×951 100 KB

1 Like
7

Hi
i thing is parent option isue
try

<div id="twitch-embed"></div>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
  new Twitch.Embed("twitch-embed", {
    width: '100%',
    height: '100%',
    channel: "sourceinvite"
     parent: ['server.com']  <-------
  });
</script>
8

What do you recommend I replace server.com with? the website im using is https://sourceinvite.wixsite.com/sourceinvite and the streams page is https://sourceinvite.wixsite.com/sourceinvite/streams

Please assist.

Thank you.

9

Stop using wix please!!! It causes so many issues… It’s the top “problem” that results in “we can’t help you” on this forum :smiley:

You page is https://sourceinvite.wixsite.com/sourceinvite/streams

Which has a iframe to https://sourceinvite-wixsite-com.filesusr.com/html/ff247d_a61dced71f0dc378928cbf0b15b78b5d.html

And that iframe contains your embed which is currently

https://embed.twitch.tv?channel=sourceinvite&height=100%25&migration=true&parent=sourceinvite-wixsite-com.filesusr.com&referrer=https%3A%2F%2Fsourceinvite-wixsite-com.filesusr.com%2Fhtml%2Fff247d_a61dced71f0dc378928cbf0b15b78b5d.html&width=100%25

You seem to be using the JS embed, which is good, you need to update your options from

  new Twitch.Embed("twitch-embed", {
    width: '100%',
    height: '100%',
    channel: "sourceinvite",
  });

to

  new Twitch.Embed("twitch-embed", {
    width: '100%',
    height: '100%',
    channel: "sourceinvite",
    parent: ["sourceinvite-wixsite-com.filesusr.com", "sourceinvite.wixsite.com"]
  });

And that should get you going.

10

What would be the whole script that I would need to enter? That doesn’t seem to be working.

11

Can you give the URL to the page with the error and I’ll go look what the problem is instead

12

Sure, the link is https://sourceinvite.wixsite.com/sourceinvite/streams. It works in internet explorer 11, though, which is odd. The original code I posted, that is.

13

Thats dead?! and/or behind on security


<html>
  <body>
    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: '100%',
        height: '100%',
        channel: "sourceinvite",
      });
    </script>
  </body>
</html>

needs to become


<html>
  <body>
    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: '100%',
        height: '100%',
        channel: "sourceinvite",
         parent: ["sourceinvite-wixsite-com.filesusr.com","sourceinvite.wixsite.com"]
      });
    </script>
  </body>
</html>
14

its still broken barry :confused:

Refused to frame ‘https://embed.twitch.tv/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://sourceinvite-wixsite-com.filesusr.com https://sourceinvite.wixsite.com https://ff247d54-a3ca-4fa8-b615-4c58d7f011b3.htmlcomponentservice.com”.

15

image
image1163×428 17.9 KB

The code has not been updated

16

I tested it. It didn’t work so therefore I did not publish it or save the changes.

17

Wix’es editor has yet another iframe in the way I believe

18

I would need the iframe code though. I can try it if you have something that you think will work.

19

any ideas barry?

20

it works fine on IE

ie
ie1892×1076 123 KB

21

Running into the same issue here. Embed code worked fine up until a day or two ago. But now player/iframe will not load, with console debug showing something along the lines of (using Safari as example):

“Refused to load [playerurl] because it does not appear in the frame-ancestors directive of the Content Security Policy.”

Same results observed on:

  • Safari 12.1.2
  • Firefox 77.0.1
  • Chrome 83.0.4.*

I have not yet tested on IE or Edge, but it doesn’t surprise me that some people are experiencing no problem with IE, because if memory serves me correctly, it does not support the frame-ancestors directive (even more reason to avoid using IE).

Also, note: Even when specifying “parent” when instantiating Twitch.Player (js), the player still does not load.

Hopefully twitch can get this resolved soon, or provide info on whatever embed requirements/changes they have implemented because it’s a pretty big issue.

Thx,

– Rex