6

As many of us know there is no way to edit a Cross Domain IFrame due to the Same Origin Policy.

Is there a way around this if we use the Stylish extension etc. locally only?

Take this video being launched inside an iframe for example:

Iframe ESPN

I need to simply add "zoom:2;" onto "#video21588864 iframe figure"

If this is 100% not possible, why am I able to do it successfully in the Inspector window, but not automatically? Is there really ZERO automatic local ways around this using Javascript or something?

WebMW
  • 514
  • 2
  • 13
  • 26
  • Use postMessage. You can follow the [link](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) – Shubham Nov 28 '17 at 06:34

2 Answers2

8

There is no way you can access the content inside the <iframe> in a cross-origin fashion. You might be able to if the response includes a CORS header.

Why am I able to do it successfully in the Inspector window

The developer tools is separate from your document. It can do much more things that you cannot possibly do with normal JavaScript in a webpage.

Rationale

There is a reason why you cannot access the content inside an iframe. Consider this, a user was logged into their bank webpage. A token is stored in a cookie to prove that the user is logged in.

Now you include an iframe in your webpage and loads the bank's webpage. Since the cookie contains a valid token, the iframe will show that the user has been logged in.

Wouldn't it be great if you can access the iframe and send yourself some money? Well, this is exactly why it's not allowed, 100% not possible, given that the browser is implemented correctly.

Addendum

I have decided to add this part after seeing that you have mentioned the word locally. Now, I do not know exactly what you are trying to do, but it is possible to manipulate the content inside the iframe if you have an elevated privilege, including:

  • a userscript
  • an extension with proper permissions acquired
  • developer tools
  • the browser itself

If you merely want to add zoom: 2 to videos from ESPN on your own computer, I would suggest creating a userscript which has a much higher privilege than a normal webpage and much easier to make than an extension.

// ==UserScript==
// @match http://www.espn.com/core/video/iframe*
// ==/UserScript==

document.querySelector("figure").style.zoom = 2;

Save that as myscript.user.js. Open up chrome://extensions and drag that file onto the page. The userscript will have a higher privilege and can access the page.

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • Great answer. You couldn't explain it any better. – Tim Gerhard Nov 28 '17 at 06:52
  • Great answer +1! There's one more hacky way using curl and php. See my answer. – Miro Nov 28 '17 at 07:20
  • The Userscript was a great recommendation and it works flawlessly-- local automation of that CSS was exactly what I was looking for! – WebMW Nov 29 '17 at 03:25
  • @WebMW Glad the answer helped you. As a side note, in the future if you end up creating a lot of userscripts, you might want to use a userscript manager such as [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) or [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) to help organizing them. – Derek 朕會功夫 Nov 29 '17 at 03:51
  • @Derek朕會功夫 Great recommendation. I've actually just added this script to Tampermonkey. Never actually knew you could drag scripts to the extensions before. Thanks for the tips! – WebMW Nov 29 '17 at 07:45
  • Thanks for mentioning the idea of higher privileges. I could not use user scripts in chrome, seems like it is not working anymore in recent versions. However, I have managed to configure the same idea using tampermonkey extension for chrome. Cheers! – Farhad Mammadli Mar 23 '22 at 14:01
6

One way to edit cross-origin domains in an iframe is to load them via the server (PHP) and modify the html by adding a base tag: <base href='http://www.espn.com'/> It's no guarantee that they will let you load all the elements as html and still render the page properly but can work in some cases and is worth the try.

A very simple iframe-loader.php would look like this:

<?php
error_reporting(0);

$url = $_REQUEST['url'];
$html = file_get_contents($url);
$dom = new domDocument;
$dom->strictErrorChecking = false;
$dom->recover = true;
$dom->loadHTML($html);


//Add base tag
$head = $dom->getElementsByTagName('head')->item(0);
$base = $dom->createElement('base');
$base->setAttribute('href',$url);

if ($head->hasChildNodes()) {
    $head->insertBefore($base,$head->firstChild);
} else {
    $head->appendChild($base);
}

//Print result
echo $dom->saveHTML();

DEMO

Then you load a url by going to /iframe-loader.php?url=http://www.espn.com/core/video/iframe?id=21588864...

Good Luck!

Miro
  • 8,402
  • 3
  • 34
  • 72