Develop Reference

Google + YouTube JS API Blocked a frame from accessing a cross-origin frame

I am working on a site that uses ajax for page transitions. On the home page, I am loading youtube videos and a subscribe button dynamically via javascript. When I transition from the homepage to another page, I am getting the following error:
Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame
Anyone run into this when using "single page apps"?

You did not give a whole lot of context but my money is on you are trying to show a youtube video with a "watch" link in an iframe, all you have to do is use an embedded link to display youtube videos in an iframe.
https://www.youtube.com/watch?v=giYeaKsXnsI
vs
https://www.youtube.com/embed/giYeaKsXnsI
Otherwise, youtube will throw cross-origin errors.
I suggest using some regex to pull out the video id (giYeaKsXnsI in the example above) and append that to the end of the embedded URL and pass that as the src attribute in the iframe.

How to make the contents inside an iframe responsive?

I have embedded a player from a site which streams a channel using an iframe. I am able to make the iframe responsive. But the content i.e the video player inside the iframe is not adaptive to the changes in viewport. I have tried several solutions from internet but all of them make the iframe responsive but not the content inside.
Is there any way I can make the video player inside the iframe responsive?
Please note that I don't have access to the source code of the player.
Here's the link to the html file: IFrame Code (I was not able to create a working fiddle of this. So shared the file instead)

Please note that I don't have access to the source code of the player.
You are in trouble
The one major thing to know while dealing with iframe is the source of the iframe
iframe source has the same domain as the main page which renders this iframe: In this case the browser will let you put your hands on the iframe contents and manipulate it as desired. As both the main site and the iframe are unders same domain it means you are a authorized person so you can change the contents if required.
So even if you don't have access to the source code of the file there are still way's to make your contents responsive if they are in the same domain. This would require Jquery
iframe source domain is not the same as your main page which renders this iframe: In this case you cannot do much with the iframe except displaying it in your page. The browser will not allow you to change any stuff on this iframe. This is a security protocol followed in all the browsers.
what happens if at all we are given access to manipulate the contents - Eg: I can render youtube in my iframe of my website and change all the instances of the string "youtube" to my own name, thus making this entire site look like my own. Also I can manipulate the ajax calls, jquery stuff etc,etc.. and get data from the site.

How to cause an IFrame link to open into a new window?

I have a website which is built using WP and uses SSL. On one of the page on my website, I have added an iframe call to another http website.
Here is my iframe call:
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//childwebsite.com/" target="_blank"></iframe>
</div>
The iframe is displayed properly. Now when you click on anything inside the iframe, Chrome displays a message saying
Mixed Content: The page at 'https://parentwebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://childwebsite.com'. This request has been blocked; the content must be served over HTTPS.
What I am looking for is when a user clicks inside an iframe, open a new tab in the browser and let the user be redirected to a particular on the childwebsite.
I tried adding target="_blank" to the iframe but it did not work.
I added the following JS also but it did not work
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('smugmugGallery') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('target','_blank');
}
Any help will be appreciated.

You have two issues here. An SSL issue, and a cross domain issue.
Your SSL issue can only be solved by serving the iframed content via SSL or serving the parent page via non-SSL. This will remove the security alerts you are seeing.
You cannot assert control over iframed content if it comes from another domain, well at least not easily for cross browser purposes.
From the Mozilla dev site:
Scripts trying to access a frame's content are subject to the
same-origin policy, and cannot access most of the properties in the
other window object if it was loaded from a different domain. This
also applies to a script inside a frame trying to access its parent
window. Cross-domain communication can still be achieved with
window.postMessage.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting

Use base tag in iframe and try once.
<base target="_blank" />
you can see more about Base tag here

Communicating with the crossrider sidepanel plugin

The crossrider sidepanel is simply an iframe (you can use js-injected html, but I'm interested in using an iframe to reduce interference with the rest of the page). I'm having trouble getting any interaction between my browser extension and the iframe at all.
I see no point at all in adding a sidepanel with an extension unless you can do some basic JS communication. In this case I want a few options, checkboxes etc, in the iframe which control the extension. Since this plugin exists, I'm assuming there must be a way.
Ideally I'd like to have some basic input handling js in the child iframe and have it send back the odd save/load command. Is the answer really some form of message passing? If so which API should I be using here?
I believe this is related: Accessing iframe from chrome extension
[EDIT]
OK, so I've tried a few things...
It seems the expected usage is to host the iframe's html content somewhere. A bit strange considering it should be local and part of the extension. What happens if you want to view some pages offline?? This is just silly and I'm dismissing it as an option. Why waste resources hosting something that should just be available locally.
The alternative is to provide the HTML that goes in the sidebar. Note that this HTML doesn't get put in an iframe. I like the idea of an iframe because it keeps the CSS and JS very separate, so there's minimal interference between a page and your extension.
So I tried creating an iframe via the html sidebar attribute with and ID and injected the content after a 100ms delay using myiframe.contentWindow.document.open/writeln/close(). This works fine on chrome but fails in firefox with a security error (The operation is insecure on open()).
Another way is to provide the iframe content via the src url (for the sidebar I use a data address for the url attribute): Html code as IFRAME source rather than a URL. This works in firefox but results in a CORS error in chrome: The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match. and Warning: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame. Function-name: appAPI.message.addListener
These CORS issues strike me as really daft. It's all my code coming from the same extension, injected into the same page. There's no cross origin happening, I created the damn thing. If I have the power to change the origin, then it's not secure in the first place so why bother.

Assuming you are using the url sidebar property to load your sidebar's HTML (i.e. a hosted web page), you can use the extension's Run in Iframe feature to communicate between the iframe extension and the parent window's extension.
To achieve this, first enable the extension to run in iframes (Settings > Run in Iframes) and then you can use the extension.js to load your sidebar and handle messaging. For example, the following code loads a page that has a button with identification btnSave:
Hosted web page file:
<html>
<head>
</head>
<body>
<div id="mySidebar">
My sidebar form
<br />
<button id="btnSave">Save</button>
</div>
</body>
</html>
extension.js file:
appAPI.ready(function($) {
// Check if running in iframe and the sidebar page loaded
if (appAPI.dom.isIframe() && $('#mySidebar').length) {
// Set click handler for button to send message to parent window
$('#btnSave').click(function() {
appAPI.message.toCurrentTabWindow({
type:'save',
data:'My save data'
});
});
// End of Iframe code ... exit
return;
}
// Parent window message listener
appAPI.message.addListener(function(msg) {
if (msg.type === 'save') {
console.log('Extn:: Parent received data: ' +
appAPI.JSON.stringify(msg.data));
}
});
// Create the sidebar
var sidebar = new appAPI.sidebar({
position:'right',
url: 'http://yourdomain.com/sidebar_page.html',
title:{
content:'Sidebar Title',
close:true
},
opacity:1.0,
width:'300px',
height:'650px',
preloader:true,
sticky:true,
slide:150,
openAction:['click', 'mouseover'],
closeAction:'click',
theme:'default',
scrollbars:false,
openOnInstall:true,
events:{
onShow:function () {
console.log("Extn:: Show sidebar event triggered");
},
onHide:function () {
console.log("Extn:: Hide sidebar event triggered");
}
}
});
});
However, if you are using the html sidebar property to load your sidebar's HTML, then this solution will not work since the extension does not run in this context. However, you may be able to utilize the methods described in the StackOverflow thread you quoted to communicate with the parent window (this would be browser specific) that in turn can communicate with the extension using our CrossriderAPI event.
[Disclaimer: I am a Crossrider employee]

How to grant permission to function or document element from iframe created through external .js script tag? [duplicate]

This question already has answers here:
Cross domain iframe issue
(5 answers)
Closed 6 years ago.
I am embedding a script via <script src="example.com/file.js"></script> on a domain that does not belong to me. The script outputs a iframe with its src set to a script on my site. I'm also outputting a div tag that contains the iframe (it is not rendered by the iframe but the js file). Now, I want to be able to execute a function that is loaded via the iframe to control the parent div of the iframe OR output the function along with the div tag and execute the function from the iframe. I am getting permission denied errors when attempting to do either. How can I grant permission?

You can't (and then time passes and the answer changes, see the duplicate question).

In short, you can't using the way you posted. The only thing windows (including iframe windows) can do to each other is change the URL / hash. What you can do is:
1) Make an HTML page that checks its hash for commands to run. Put this on SITEA.
2) On your regular SITEA page load SITEB in an iframe.
3) SITEB iframes doesn't have access to it's parent since it's on a seperate domain. However, it can load the page you set in step 1 through an iframe. You can also change the URL on this iframe. This SITEA iframe is allowed to talk and control SITEA parent (through something like window.top).
This may sound confusing but it works and is pretty much the only way to do it cross-browser and in IE6. I've done stuff like this to support ads that expand on the parent site.