Develop Reference

Failed to execute 'postMessage' on 'DOMWindow': YoutubeIframe

I am rendering an iframe at the bottom of my page like this :
<iframe
id="yt-iframe"
title="xyz"
loading="lazy"
src=`https://www.youtube.com/embed/${videoId}?enablejsapi=1`
frameBorder="0"
allowFullScreen
allow="autoplay"
/>
Initially the iframe is not visible on page load and user has to scroll a bit to make it visible on viewport.
I get following endless errors once the page is loaded.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
The errors would stop coming if any of these happens:
with loading="lazy" --> the window is scrolled and the iframe is in the viewport.
loading="eager"
enablejsapi=0
However my requirement is that I need the loading to be "lazy" and I also need the enablejsapi=1 in order for the YoutubeIframeAPI to work (to be able to do things on state change of the player).
Would be great if anyone can suggest a fix with proper reasoning.

I would recommend you to check the following docs
Try adding an origin parameter to your embed URL
https://developers.google.com/youtube/player_parameters#origin
Instead of directly constructing the Iframe by yourself, consider using iframe API from youtube
https://developers.google.com/youtube/iframe_api_reference

How do I redirect user to another page from clicking a button that's in an iframe

I've created a fully customizable audio player widget with the intent that people can embed it in their blog posts (such as wordpress) by including an <iframe> tag like so:
<iframe id=“my_widget” width="800px" height="100%" scrolling="no" frameborder="no" allow="autoplay" src="http://mywebsite.com/player?audio_id=xxxxxxx">
</iframe>
The widget includes a few buttons for the purpose of sharing the article to facebook, twitter, and copying the blog url to the clipboard. When I tested my widget by embedding it in a page on my website, all of the buttons worked as expected. However, when I embedded the widget in a wordpress post, clicking on the share buttons gives me this javascript error:
Uncaught DOMException: Blocked a frame with origin "http://mywebsite.com" from accessing a cross-origin frame.
at shareFacebook (http://mywebsite.com/player?audio_id=xxxxxxx:172:46)
at HTMLButtonElement.onclick (http://mywebsite.com/player?audio_id=xxxxxxx:38:123)
My logic for redirecting the user to facebook for sharing the post (in my widget code) looks like this:
<button class="share-fb-button-sm" onclick="shareFacebook();">
<script>
function shareFacebook() {
var currentURL = window.top.location.href;
window.top.location.href = "https://www.facebook.com/sharer/sharer.php?u=" + currentURL;
}
</script>
I understand that this javascript error is telling me that my attempt at redirection is being blocked by the Same-Origin Policy. But I've definitely seen other iframe widgets do what I'm trying to do. What is the proper course of action here? I can't seem to figure out how everyone else is doing this.

Thank you for the suggestion Jimmy Leahy, I didn't know about window.open(). That partly fixed my problem. After some more research I discovered document.referrer(). Accessing location.href from an iframe is blocked by the same-origin policy, but document.referrer() is not. This function will return the url that called the iframe, which ends up being the parent url. Here's how I implemented my solution.
<button class="share-fb-button-sm" onclick="shareFacebook();">
<script>
function shareFacebook() {
var currentURL = document.referrer;
window.open("https://www.facebook.com/sharer/sharer.php?u=" + currentURL);
}
</script>

simulate referer iframe with javascript?

my question is this
I have 2 sites, SiteA, SiteB, and what I want is to pretend that the traffic of a website through an open iframe in SiteA, simulate SiteB come from, for example we have:
*SitioA.com/index.php
*SitioB.com/redirect.php (Placed a javascript that redirects to the site I want it to open in the iframe, so the javascript code clears the referrer)
In SitioA.com/index.php, I put an iframe to call SitioB.com/redirect.php, which, in turn redirects with javascript to the web that I want to simulate the referer, here I leave the code to understand better:
In SitioA.com/Index.php I put:
<iframe class="premium_frame" src="http://SitioB.com/redirect.php" width="1000" height="1000" scrolling="no" frameborder="0"></iframe>
In sitioB.com/redirect.php, I put:
window.location.href = "http://jaqhegrjghegr.com";
Doing this is no way to jaqhegrjghegr.com for example, discover that the check actually comes from SiteA and not SiteB? that's my question

Same-Origin error when using iframe code copied from vimeo/youtube

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?

adding an iframe to facebook does not work anymore since ~2 weeks

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.