Search code examples
google-chromeiframegoogle-chrome-extensionfirefox-addon-webextensionsweb-ext

Disable cross-origin frame in Chrome or Firefox

I want to have a webextension with an iframe http://localhost:8080. So I can test my option page. I want to get access to extension API. So I don't care about security for developing.

So made a page

chrome-extension://abcdefghijklmnopqrstuvw/page/index.html

<html>
<body>
<iframe id="myFrame" src="http://localhost:8080" crossorigin="anonymous">
</iframe>
<script src="script.js"></script>
</body>
</html>

localhost:8080

<html>
<head>
</head>
<body>
<h1>I can't get this working :{</h1>
<script>
    console.log(parent);
</script>
</body>
</html>

I also send a header: "Access-Control-Allow-Origin": "*"

Of course I got this error:

DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

I tried to disable web security

google-chrome-stable --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"

But the error is still there. I also tried web-ext to disable web security.

Solution

  • I made a simple setup to test if I could access the parent object from another origin. So I have http://localhost:1111 with an iframe http://localhost:2222. Now :2222 is calling parent.testAlert(), in a normal browser this will be blocked because of security enabled. But I am able to access parent.testAlert() when I have disabled the security.

    <html>
<body>
One <br>
<script>
    function testAlert() {
        alert("Yes");
    }
    setTimeout(() => {
        console.log("window ", window.name);
    }, 1000)
</script>
<iframe src="http://localhost:2222"></iframe>
</body>
</html>

    <html>
<body>
Two
<script>
    console.log("two: ");
    console.log("parent ", parent);
    parent.testAlert()
</script>
</body>
</html>

    This only works when I disable the security, like:

    google-chrome-stable --disable-web-security --user-data-dir=~/tmp --disable-site-isolation-trails

    Nice.

    Now lets try it with the chrome-extension:// url...

    <html>
<body>
page.html
<iframe src="http://localhost:2222"></iframe>
</body>
</html>

    I still get the same Error:

    (index):7 Uncaught DOMException: Blocked a frame with origin "http://localhost:2222" from accessing a cross-origin frame.
at console.log (<anonymous>)
at http://localhost:2222/:7:13

    It seems that a chrome-extension CORS / SOP is not disabled.

    I made a simple example https://github.com/zoutepopcorn/iframe-blocked