Refused to frame ‘https://my.matterport.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”

Question

I’m trying to add Content Security Policy to my Gatsby x Netlify website through a _headers file. Everything works fine, except for a Matterport iFrame that doesn’t want to be displayed. The error message I see in the console is

Refused to frame 'https://my.matterport.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

In my headers file, I added the following X-Frame-Options:

X-Frame-Options: ALLOW-FROM https://*.matterport.com/

And I also have this frame-src in my Content Security Policy:

frame-src 'self' https://www.youtube.com/ https://my.matterport.com https://matterport.com;

But the iFrames still look like this: Matterport iFrames not displaying

Can someone help me figure out what I’m doing wrong here?

Thank you!

Answer 1

I recently came accross the same error message and corrected this by removing a double forward slash before the video link, my original iFrame inclusion looked like: https://my.matterport.com/show//?m=XXXXXXX replacing this with https://my.matterport.com/show/?m=XXXXXXX was enough to get the iFrame showing again.