Dashboard iframe didn't show up on Chrome based browser

Get Help
1

Hello there, a new Metabase user here.

I tried to show dashboard on our internal web app using Iframe.
When using Chrome based browser (Edge or Opera) the dashboard is not shown up.
Its said "[URL] refused to connect." and in the browser console there is message "Refused to frame '[URL]' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *".".
Everything is fine if I'm using Firefox.
Is there any problem with our metabase config or the problem lies on Chrome based browser ?

Thanks

2

Are you trying to use Full App embedding (https://www.metabase.com/docs/latest/enterprise-guide/full-app-embedding.html) or normal embedding?

3

I'm using normal embedding

4

@bluematter Please post "Diagnostic Info" from Admin > Troubleshooting.
It's difficult to tell if it is a configuration problem or not, since there's not a lot of information to go on.
I'm guessing you're using https://www.metabase.com/docs/latest/administration-guide/13-embedding.html and you have defined Site URL in Admin > Settings > General correctly.

5

Thanks for responding.
I'm using https://www.metabase.com/docs/latest/administration-guide/12-public-links.html for embedding dashboard to our static html page for testing.

This is the "Diagnostic Info", I hope it'll help

{
"browser-info": {
"language": "en-US",
"platform": "Win32",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36 Edg/91.0.864.71",
"vendor": "Google Inc."
},
"system-info": {
"file.encoding": "UTF-8",
"java.runtime.name": "OpenJDK Runtime Environment",
"java.runtime.version": "11.0.11+9",
"java.vendor": "AdoptOpenJDK",
"java.vendor.url": "https://adoptopenjdk.net/",
"java.version": "11.0.11",
"java.vm.name": "OpenJDK 64-Bit Server VM",
"java.vm.version": "11.0.11+9",
"os.name": "Linux",
"os.version": "4.15.0-123-generic",
"user.language": "en",
"user.timezone": "Asia/Jakarta"
},
"metabase-info": {
"databases": [
"h2",
"postgres"
],
"hosting-env": "unknown",
"application-database": "h2",
"application-database-details": {
"database": {
"name": "H2",
"version": "1.4.197 (2018-03-18)"
},
"jdbc-driver": {
"name": "H2 JDBC Driver",
"version": "1.4.197 (2018-03-18)"
}
},
"run-mode": "prod",
"version": {
"date": "2021-07-14",
"tag": "v0.40.1",
"branch": "release-x.40.x",
"hash": "ed8f9c8"
},
"settings": {
"report-timezone": "Asia/Jakarta"
}
}
}

6

@bluematter Okay, so you are using Public Sharing, not Embedding.
I cannot reproduce, so I'm guessing it has something to do with your CSP headers - either where you have the iframe or if you have modified the headers that Metabase sends.

7

thanks for responding.
I think some how we solved the problem. For some unknown reason the Iframe won't show up if we opened the html file directly from chrome based browser. But if we deploy into our server then everything running well. Maybe it got something to do with how Chrome handle Iframe from local file.

Thanks

8

@bluematter Yes, browsers has quite high security now compared to just a year or two ago. Developing locally with external components requires you to lower the security. But it's best to work with real domains and https, since you then avoid such problems.

9

@flamber thanks a lot for the help

10

@bluematter
I have the same problem as you.

I tried creating localhost server and load file html that contains iframe => It's sucessfull.

Thanks so much for your suggestion!