How do I allow only 1 URL in my web app to be accessed via iframe?

Question

I'm running a NodeJS App on NGINX Web Server. I'm able to access all the URLs in my app via iframe on other websites.

Here is my NGINX conf:

proxy_hide_header X-Frame-Options;

How do I restrict the iframe to allow only 1 URL instead of all the URLs?

Also, how do I allow only a few domains to access via iframe?

Can it be done via NGINX or should it be handled via NodeJS code?

Answer 1

It can be done via both NGINX conf and nodejs. For NGINX conf, please use both X-Frame-Options and Content Security Policy (frame-ancestors) add_header Content-Security-Policy "frame-ancestors domain1 domain2 domain3"; -> it's for modern browsers add_header X-Frame-Options "ALLOW-FROM domain1 domain2 domain3"; -> it's for older browsers

To get more details: X-Frame-Options Content-Security-Policy

Answer 2

It can be done by both nginx or nodejs. If you'd prefer nginx, you should use it within a location block like:

server {
    location / {
        add_header Content-Security-Policy "frame-ancestors 'none'";
        add_header X-Frame-Options "DENY";
    }

    location /iframing_is_allowed {
        add_header Content-Security-Policy "frame-ancestors http: https:";
        proxy_hide_header X-Frame-Options;
    }
}

Otherwise, if you'd prefer nodejs, you should set these headers from your JS code in the corresponding endpoints.

If you looking for what options you have, please consult to X-Frame-Options and Content-Security-Policy docs, as Thang Duc pointed.