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"
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 ?