10

I have to embed three different websites into my www.myapp.com app by using iframes. Let's suppose the URLs of these websites are:

  • website1.com
  • website2.com
  • website3.com

These websites cannot be directly embeded by iframe because their servers set the X-Frame-Options response header to SAMEORIGIN, so I used nginx as a proxy to remove these X-Frame-Options headers:

# parent application: myapp.com:
server {

    listen 8080;
    server_name myapp.com www.myapp.com;

    location /stand {
        root /srv/www;
        try_files $uri $uri/ /stand/index.html;
    }
}

# website1.com proxy:
server {

    listen 8080;
    server_name proxywebsite1.com www.proxywebsite1.com;

    location / {
        proxy_pass https://www.website1.com/;
        proxy_set_header www.website1.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_hide_header 'x-frame-options';
    }
}

# website2.com proxy:
server {

    listen 8080;
    server_name proxywebsite2.com www.proxywebsite2.com;

    location / {
        proxy_pass https://www.website2.com/;
        proxy_set_header www.website2.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_hide_header 'x-frame-options';
    }
}

# website3.com proxy:
server {

    listen 8080;
    server_name proxywebsite3.com www.proxywebsite3.com;

    location / {
        proxy_pass https://www.website3.com/;
        proxy_set_header www.website3.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_hide_header 'x-frame-options';
    }
}

With the configuration above, I can now embed the three sites into iframes even the domain are different (www.myapp.com, proxywebsite1.com, proxywebsite2.com, proxywebsite3.com).

BUT NOW, I want to hide some elements (footer, header, ...) of the embedded websites by using JavaScript, and it's blocked because the domains are different. I've got the below error in browser's console:

"ERROR DOMException: Blocked a frame with origin xxx from accessing a cross-origin frame"

enter image description here

So my question: is there a way to configure nginx so myapp.com and proxywebsite1.com are not seen as different domain by the browser ?

Faly
  • 12,529
  • 1
  • 16
  • 34
  • Possible duplicate of [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – Argus Duong Jul 19 '19 at 04:17
  • @Faly Did you find any solution or alternative, I've just difference of port number. How to solve it with nginx – Gunjan Patel Sep 16 '20 at 10:24

0 Answers0