Player.twitch.tv refused to connect

API
1

Hello,

I am a streamer and I use a service to host my personal webpage with some off-stream content to my community.

Recently I stumbled up with an issue that is preventing my website to load a collection of videos that I set to be loaded as a preview of my work.

When looked upon the error, I saw the following error message:

Refused to frame https://player.twitch.tv/ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://vonschappler.rf.gd”.

I already contacted my host service but they didn’t have any clues on what’s causing it, since the embeds were working before…

A copy of the same website is hosted on Github pages and it works as intended…

Could you guys offer some clues on how to make them work again, please?

2

image
image1564×688 29.5 KB

Your website is not available over SSL

SSL is now required for Embeds.

see also

3

Ok, and when that changed? Because I remember well editing my website locally (like one month ago) and having the embeds running all right and now they don’t show locally aswell…

Now I can’t even edit my own website in a local server without having to create a localhost SSL…

That’s really bad.

4

June 10th

localhost is exempt from this to allow testing/development

5

I tried using "parent: [‘localhost’] already and it does not work here… the port i use is 81 (since 80 is already in use by other application and blocked by my local server wamp)

So this “Any port can be used” seems not to be a true statement.

6

code (same for both tests)

<html>
  <body>

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="test"></div>
<script type="text/javascript">
  var options = {
    width: 600,
    height: 300,
    channel: "bikeman",
    parent: ["localhost"]
  };
  var player = new Twitch.Player("test", options);
</script>

  </body>
</html>

Worth noting using the JS embed you can omit parent and it’ll do the math for you

localhost

image
image2020×966 233 KB

localhost:81

image
image1904×798 241 KB

Looks/tested ok here

So if it’s not working for you I’m not sure what the issue is

7

yeah - it just won’t work here…

<script type="text/javascript">

    var options = {
        collection: "TPK8B2ug0BUaPA",
        layout: "video-with-chat",
        parent: ["localhost"]
    };

    var player = new Twitch.Player("homeVideo", options);

    player.setVolume(0.0);

</script>

This is my script code…

image
image1833×899 115 KB

8

And this is the error I get:

image
image813×49 3.71 KB

9

Screenshot 2020-06-16 at 16.59.12

Thats not localhost

Thats http://vonschappler:81

10

That is an alias inside my local host.

11

Doesn’t matter if it’s an alias or not.

To browser security, thats not localhost it’s another website.

So it’s expecting a SSL Cert.

The expected domains/protocols are listed in the error

localhost over ssl/non ssl on any port

or https://vonschappler (so 443)

12

Ok so why no “lock” in here to say that localhost is “secure”?

image
image835×96 16 KB

13

Ask chrome?

I imagine there your actual URL is

http://localhost:81/

or if it is over SSL, it doesn’t show a padlock for self signed certs?

And chrome address bar hides the protocol in use, and you are not on SSL so it doesn’t show a padlock

image
image746×210 10.3 KB

Mine doesn’t show secure for the explict site of http://localhost/ and I don’t test using sign signed certs to test what chrome does on localhost with self signed certs

According to

Check if a site’s connection is secure

To see whether a website is safe to visit, you can check for security info about the site. Chrome will alert you if you can’t visit the site safely or privately.

  1. In Chrome, open a page.
  2. To check a site’s security, to the left of the web address, look at the security status:
  • Lock Secure
  • View site information Info or Not secure
  • Dangerous|autox18 Not secure or Dangerous
  1. To see the site’s details and permissions, select the icon. You’ll see a summary of how private Chrome thinks the connection is.
14

Ok, so to install a local SSL to keep working… and move everything i have to github since that’s the only “hosting service” I can use at this moment, that is working as intented.
image
Thank you!

15

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

16

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.