Edit Cross-domain Iframe Content Locally Only

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 t

Solution 1:

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.

Solution 2:

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!