How to Change Style of Iframe Content Cross-Domain

How to change style of iframe content cross-domain?

The only possibility would be to load the iframe content through a proxy of yours and modify the HTML content. You can not access iframes from another domain via JavaScript.

Edit the css of a cross domain iframe that is inside an internal iframe

There is no way to edit a Cross Domain IFrame, because it would open all kinds of security loopholes.

Imagine for a second I open a hidden Cross Domain IFrame to your bank and can run rogue JS manipulations on it?

You can however, manipulate domains within the same level, or lower in your domain chain, but thats because of "the internal trust" into the domain level, e.g: example.com can edit bar.example.com

If there is a way, it's a CVE, and should be reported to be fixed.

overwrite css in iframe/ cross domain with access to other domain

Even if YOU have access to the other domain, that does not mean you can overcome the same-origin policy setup in the browser. You won't be able to change the styling in the iframe if the contents of that iframe originates in another domain.

More info from Mozilla

Edit cross-domain Iframe content Locally Only

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.

---

Related Topics