Disable cross-origin frame in Chrome or Firefox

Question

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.

Yes I know. But I can use parent from the iframe to connect to the API. So I have to disable cors — Johan Hoeksma, Sep 29 '21 at 17:50
So the iframe in chrome-extension://page has to connect to the parent to get access to the API. — Johan Hoeksma, Sep 29 '21 at 19:52
I can disable the CORS or SOP or whatever. google-chrome-stable --disable-web-security --user-data-dir=~/tmp --disable-site-isolation-trails. WIll be updated — Johan Hoeksma, Oct 05 '21 at 13:46

score 0 · Accepted Answer · answered Oct 06 '21 at 07:07

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

Disable cross-origin frame in Chrome or Firefox

1 Answers1