javascript - Let 3rd party change styles of an iframe of my site

Let's say I am hosting site2 and have site2/frame.html file that is simple as this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Site2 frame</title>
  <style>
    body { background-color: yellowgreen; }
  </style>
</head>
<body id="site2-frame-body">
  <h1>This is site2 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 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=":3002/frame.html">
  </iframe>
</body>
</html>

So I get this result in the Chrome browser when I open site1 (ie. site1 is playing the role of the 3rd party site here, while site2 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/frame.html. When I try to override that with blue color as specified in the parent's website site1: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 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 and site2 to 127.0.0.1 and I am running two node express instances to simulate different servers.

Let's say I am hosting site2. and have site2./frame.html file that is simple as this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Site2. frame</title>
  <style>
    body { background-color: yellowgreen; }
  </style>
</head>
<body id="site2-frame-body">
  <h1>This is site2. 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. 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.:3002/frame.html">
  </iframe>
</body>
</html>

So I get this result in the Chrome browser when I open site1. (ie. site1. is playing the role of the 3rd party site here, while site2. 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./frame.html. When I try to override that with blue color as specified in the parent's website site1.: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. 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. and site2. to 127.0.0.1 and I am running two node express instances to simulate different servers.

Share Improve this question edited Jun 26, 2021 at 23:29 Spectric 32.1k6 gold badges28 silver badges54 bronze badges asked May 25, 2021 at 17:16 mlst 3,48110 gold badges37 silver badges72 bronze badges

1 this might help stackoverflow./questions/6494721/… – Amir Saleem Commented Jun 19, 2021 at 17:57
1 This may be of some use, the basic premise is to change the iframe css using JS: sitepoint./munity/t/… – TerminalFlow Commented Jun 19, 2021 at 18:04

Add a ment |

3 Answers 3

Sorted by: Reset to default 8 +75

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./frame.html read this parameter and dynamically add it to its <head>.

For example, site1. could create the iframe like so:

<iframe id="site2frame"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://site2.:3002/frame.html?css=externalstylesheet.css">
</iframe>

And site2./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);

You can't overwrite iframe style in other site!

This script will do what you want

window.onload = function () {
    let myiFrame = document.getElementById("site2frame");
    let doc = myiFrame.contentDocument;
    doc.body.innerHTML =
      doc.body.innerHTML +
      "<style>body { background-color: blue;  !important} /* YOUR CSS*/</style>";
  };

This example was taken from this article: https://redstapler.co/how-to-apply-css-to-iframe/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Let 3rd party change styles of an iframe of my site - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)