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?
Your website is not available over SSL
SSL is now required for Embeds.
see also
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.
June 10th
localhost is exempt from this to allow testing/development
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.
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
localhost:81
Looks/tested ok here
So if it’s not working for you I’m not sure what the issue is
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…
And this is the error I get:
Thats not localhost
Thats http://vonschappler:81
That is an alias inside my local host.
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)
Ok so why no “lock” in here to say that localhost is “secure”?
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
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.
- In Chrome, open a page.
- To check a site’s security, to the left of the web address, look at the security status:
Secure
Info or Not secure
Not secure or Dangerous
- To see the site’s details and permissions, select the icon. You’ll see a summary of how private Chrome thinks the connection is.
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.
Thank you!
system
Closed
16
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
