I created a slideshow for a website and users can put videos from vimeo or youtube in it. It works just fine. Due to some limitations with current browsers I have the thumbnail of the video showing in the slideshow, and clicking the picture opens a lightbox with the actual video. I copied the iframe code from both the youtube and vimeo websites exactly as they have it, but my console is showing errors for every iframe on the page. This is an example iframe element on my page:
<iframe
class="hide_me"
src="http://player.vimeo.com/video/7339803"
width="100%"
height="100%"
frameborder="0"
webkitallowfullscreen=""
mozallowfullscreen=""
allowfullscreen="">
</iframe>
And this is the error I'm getting in my console:
Blocked a frame with origin "http://player.vimeo.com" from accessing a frame with origin "http://my-machine-name". Protocols, domains, and ports must match.
Am I doing something wrong?
Pages can prevent themselves being loaded inside iframes on third party sites (same origin policy).
The whole rundown can be found here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Pages that allow embedding in general often have a specific URL without these restrictions, but even YouTube has added them to their current embed URL recently with the old /embed/ scheme still working. Maybe Vimeo also has a working alternative?
Related
Say there is some website hosting a video that doesn't have an option for captions. Is there a way to "forcefully" attach captions to the <video> element from my side, for example by editing the DOM with Chrome? I've tried the following:
$("#video_id").append('<track label="English" kind="subtitles" srclang="en" src="https://websitefromotherdomain.com/subs.srt" default>')
This returns:
Unsafe attempt to load URL https://websitefromotherdomain.com/subs.srt from frame with URL https://video_domain.com/123.html. Domains, protocols and ports must match.
So this error is pretty self explanatory. But I was wondering if what I'd want to accomplish is even possible, and if there is another method for appending captions to a video (where the captions are hosted on a different website).
I'm embedding an iFrame to an external payment-provider, after the user completes their step the user gets redirected to my domain.
I'm now trying to redirect the parent page to another page located on my domain like so:
iFrame embedded on mydomain.com
<iframe src="example.com/payment" sandbox="allow-top-navigation allow-forms allow-scripts"></iframe>
Code to redirect the parent page
window.top.location.href = "mydomain.com";
On Safari in iOS I'm now getting: SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Is this the expected behavior even though I used allow-top-navigation in my sandbox parameter?
If so, are there any existing workarounds?
I found the answer myself.
My iframe sandbox attribute was missing the: allow-same-origin Parameter
Working Example
<iframe src="example.com/payment" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>
Explanation
From what I understand the problem was the redirect of:
example.com/payment to mydomain.com this gets prevented by some browsers.
Sadly I found no clear explanation on why this particular redirect is prevented.
It seems to be related to: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
When I go to this url : (warning: some Ad-blocker is recommended)
https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda
The web-page link loads fine, without errors.
However, when I try to load same page via iframe in my html code, an error appears:
My html code :
<html>
<head>
</head>
<body>
<iframe width="600" height="700"
src="https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda">
</iframe>
</body>
</html>
Below image: Error result within my iframe. How to fix such error?
If you're willing to design/code your own player interface then one loading option is to use a <video> tag instead of via <iframe> tag...
<video width="640" height="480" controls crossorigin="anonymous">
<source src="https://oload.stream/stream/M4pSomdJWME~1508775093~213.205.0.0~IzmpIUe0?mime=true" type="video/mp4">
</video>
I'm not going to tell you how to steal access any video by code, but some advice is:
1) You can see in the source code that a server 1508775191~213.205.0.0 is accessed for media files including subtitle VTT file). Study rest of source code. Consider why token is mentioned and why referrer is checked. What can you do pass and get same access?
2) By using your browser's Developer Tools (especially "network" and "console" tabs), you can find the related https://oload.stream/stream/ url for any future updates or alternate embeds.
PS:
"but, this tugaflix.com/Episodio?E=2310910&S2 website is using that iframe"
Look at source code of: http://tugaflix.com/Episodio?E=2310910&S2/
You will see that no iframe is mentioned or used... They are even using two different player interfaces so you cannot assume that tugaflix.com is loading this page https://oload.stream/embed/M4pSomdJWME within some iframe. They are instead accessing the MP4 video file from some server calledhttps://lemonade-fruit.fruithosted.net/
The target site has code that prevents it from being shown in an Iframe. Unfortunately you will not be able to use that url in an Iframe.
I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?
I'm writing a firefox extension to read out the privacy settings of a facebook user. (not a facebook app!!) To switch between different websites of facebook I used iframes, but this isn't working anymore. I have this problem since 2 weeks.
$('#globalContainer').append('<iframe id="reusable_iframe" src="" width="90%"
height="400" name="reusable_iframe"></iframe>');
//....
$('#reusable_iframe').attr('src', link);
I'm follow the Same origin policy and it was working just fine since a 2 weeks!? an example:
var link = "http://www.facebook.com/editprofile.php?sk=basic";
Now I just get a blank iframe :(
the funny thing is, that if I add "http://www.youtube.com/embed/Qi_AAqi0RZM" or "http://trololololololololololo.com/" to the iframe it's working without a problem... :/
did facebook change the rules for own links in iframes? Is there a workaround? Is there an other way for me to scan different sites with firefox-extensions? i would prefer to stay with content-scripts....
Edit: This is how it looks at firebugs... also funny is that the facebook page http://www.facebook.com/undefined is working however!?
<iframe id="areusable_iframe" width="90%" height="400" name="areusable_iframe" src="http://www.facebook.com/">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
Facebook sends the following response header to the browser:
X-Frame-Options: DENY
This cause all major browsers (even IE8 and higher) to prevent showing it inside frames.
The old way was "frame buster" using JavaScript forcing the page to open as the top window, but it's very unfriendly so it was replaced by this header in most modern websites that don't want to be displayed in frames.
Not much you can do though, sorry.
The "undefined" page is just blank content which is their 404 custom error page as it does not contain the above header, it can be displayed inside frame.
To learn more about the X-Frame-Options header see this documentation.