Refused to frame : Content Security Policy Error

Hi,
We are using the Nginx to connect Metabase(Community) through our application using iFrame.We are getting the below error Refused to frame 'http://metabase.us/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

This is the Nginx configuration file:

server {
listen 443;
listen [::]:443;

server_name example.com;

root /var/www/example.com;

index index.html;

ssl on;
ssl_certificate /etc/nginx/ssl/metabase.cert;
ssl_certificate_key /etc/nginx/ssl/metabase.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;

location / {
#proxy_pass http://10.8..:3000;
proxy_pass http://**...:3000;
add_header 'Access-Control-Allow-Origin' '
';

Om nom nom cookies

add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

Custom headers and headers various browsers should be OK with but aren't

add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

Tell client that this pre-flight info is valid for 20 days

#add_header 'Access-Control-Max-Age' 1728000;
#add_header 'Content-Type' 'text/plain charset=UTF-8';
#add_header 'X-Frame-Options' '';
add_header 'X-Frame-Options' SAMEORIGIN';
add_header Content-Security-Policy "frame-ancestors 'dev-metabase..us:8080' 'dev-metabase..us' '
..us';";

try_files $uri $uri/ =404;

}
}

Iframe code:

<iframe id='metabase'
class="responsiveIframe" frameBorder="0"
[src]="urlSafe" ></iframe>

this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.metabaseLoginURL);

Please help us with this.

Hi @sagarl
If you want to embed entire Metabase, then there's FullApp embedding:
https://www.metabase.com/docs/latest/enterprise-guide/full-app-embedding.html
Otherwise you'll need to modify the headers by first hiding what Metabase sends proxy_hide_header before adding your own add_header.