Menu
Let's say I am hosting site2.com and have site2.com/frame.html file that is simple as this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site2.com frame</title>
<style>
body { background-color: yellowgreen; }
</style>
</head>
<body id="site2-frame-body">
<h1>This is site2.com frame for 3rd party use</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Now say 3rd party website called site1.com wants to embed this content via iframe element like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site1</title>
</head>
<body>
<style>
#site2frame { border: 2px solid red; }
#site2frame-body { background-color: blue !important; }
</style>
<iframe id="site2frame"
title="Inline Frame Example"
width="300"
height="200"
src="https://site2.com:3002/frame.html">
</iframe>
</body>
</html>
So I get this result in the Chrome browser when I open site1.com (ie. site1.com is playing the role of the 3rd party site here, while site2.com is site that hosts content to be embedded in inside iframe of other websites):
So the background of body element inside the frame is yellowgreen as set by the style in the site2.com/frame.html. When I try to override that with blue color as specified in the parent's website site1.com:3002 this is not applied. I even used id selector with !important attribute but that is not propagated to inside of the frame content. Note that I am able to style the iframe element itself (with red border) but that is not my issue here.
So how can I enable this? Is there some standard way like enabling some http policy or setting some server headers site2.com that tells browsers "please allow CSS styling on embedded frames from this origin"? Note that frame content is cross-origin.
Note: this dev environment is set by me for practicing by using hosts file to point both site1.com and site2.com to 127.0.0.1 and I am running two node express instances to simulate different servers.
910
Short answer: it is no longer possible. You can't modify iframe contents even if you are only working with local files.
You cannot change the style of a page displayed in an iframe unless you have direct access and therefore ownership of the source html and/or css files.
Third-party embeds are typically loaded in <iframe> elements on the page. Third-party providers offer HTML snippets often consisting of an <iframe> that pulls in a page composed of markup, scripts, and stylesheets. Some providers also use a script snippet that dynamically injects an <iframe> to pull other content in.
You can not change the styles of the page that resides within the iframe.
If a request comes from within an Iframe, the referrer matches the host of the Iframe content, not the site that the Iframe is embedded on.
Especially as concern grows about the amount of invasive tracking and its negative effect on page performance, iframes continue to be an excellent way to force third-party code into sandboxes, where they can’t interact with the host page (unless explicit data passing has been setup).
The resulting Iframe can be set to just show the “result” of the fiddle, which is desirable if you are trying to show off a demo to users, rather than to other developers. However, JSFiddle injects a top menu bar into all Iframes with a tab selector and “Edit in JSFiddle” text, regardless of how many tabs are set to display:
I would be remiss if I didn’t mention the default way to host up an iframe that others can embed; simply throw your code into a static HTML file (or generate with server-side code, more on that later), and shove the file onto your publicly accessible host (shared host, VPS, AWS bucket, etc).
You can't style 3rd party iframes because they are protected by the 'Same-origin Policy'.
That being said you could try sending the URL of a stylesheet as a GET parameter, and have site2.com/frame.html read this parameter and dynamically add it to its <head>.
For example, site1.com could create the iframe like so:
<iframe id="site2frame"
title="Inline Frame Example"
width="300"
height="200"
src="https://site2.com:3002/frame.html?css=externalstylesheet.css">
</iframe>
And site2.com/frame.html could read the GET parameter, create a link element with the href set to the value of the parameter and append it to document.head:
var css = new URLSearchParams(location.search).get('css');
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href= css;
document.head.append(stylesheet);
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
