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

API
#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

#22

Yes, much appreciated. This was not a problem until a couple days ago.

#23

Changes were announced over 4 months ago, along with info on how to comply with these new changes.

If using a parent param is still not working for you, then you’ve either entered it erroneously (eg, you’ve included things other than the domain portion, such as protocol, port, or path, which should not be included), not included every parent (if you’re using a site-builder such as wix then they will put your content inside another iframe, ALL parents must be included so you need to include every iframe your embed is within as parents), or you’re not serving your page over HTTPS which is a requirement now (with the exception being localhost or 127.0.0.0/8 parents where HTTPS is not required).

I don’t see an embed on the page you linked, so I can’t help you.

#24

I have no idea what the iframe is for wix’es editor is, I don’t use wix

I was asleep, there is no need to bump threads

IE is dead/deprecated doesn’t implement new browser features

Checking https://sourceinvite.wixsite.com/sourceinvite/streams

has the iframe of

https://sourceinvite-wixsite-com.filesusr.com/html/ff247d_a61dced71f0dc378928cbf0b15b78b5d.html

Which has no parents


<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>

Should be


<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>

image

If you are using Wix please see the great big Wix thread

https://discuss.dev.twitch.tv/t/the-great-big-im-using-wix-and-i-dont-know-how-to-fix-my-embed-thread/26297/

Otherwise

https://discuss.dev.twitch.tv/t/twitch-embedded-player-updates-in-2020/23956/

#25

I used this and it worked. for some reason it wasnt loading in the editor like it normally does. I had to publish it first and then after i published it it appeared on the live site. thanks for the help barry.

<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>

you can see it here https://sourceinvite.wixsite.com/sourceinvite/streams

#26

Yup all of our fixes don’t contain the fix for WIX’s editor just live

1 Like
#27

A post was merged into an existing topic: The great big “I’m using WIX/SomeWebsiteMaking Tool and I don’t know how to fix my embed” thread

#28