Home
Support Forums

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

I’m trying to add Content Security Policy to my 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'".

The page on which this error occurs is: https://3dvr.netlify.app/projets

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;

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

Thank you!

Hi @sthyma

Welcome to the Netlify community

Based on the headers from https://my.matterport.com/

x-xss-protection: 1; mode=block
content-security-policy: frame-ancestors 'self';
x-frame-options: SAMEORIGIN

I suggest the site is restricting the framing.

As per MDN X-Frame-Options Directives

SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself.

And per MDN CSP: frame-ancestors Sources

'self'
Refers to the origin from which the protected document is being served, including the same URL scheme and port number.

On another note, you have a Service Worker installed which as you might find by searching these forums can potentially lead to site updates not showing for some people.

Hi @coelmay,

Thanks for your reply! Do you mean that I just cannot add a Matterport iframe to my website because of their headers?

It’s weird, because the Matterports work when I don’t add any Content Security Policy/headers to my website…

I believe that is the case.

Strange.


A URL such as you are trying to load (e.g. https://my.matterport.com/models/eCAtEGDeJxK?cta_origin=last_modified_space&section=media) is a webpage in its entirety.

If you are trying to add the walkthrough to your website I think this guide might help:

In essence change your <iframe src="" to https://my.matterport.com/show/?m=eCAtEGDeJxK which them embeds the interactive walkthrough. It is small by default though because of the space you have given it on your page.

You may wish to load the thumbnail (e.g. https://my.matterport.com/api/v1/player/models/eCAtEGDeJxK/thumb?width=1088&dpr=2&disable=upscale) instead then either link to the website via your original link or open the walkthrough in a modal to keep people on your site using the embed link.

Note
While https://my.matterport.com/models/eCAtEGDeJxK?cta_origin=last_modified_space&section=media has the headers

content-security-policy: frame-ancestors 'self';
x-frame-options: SAMEORIGIN

https://my.matterport.com/show/?m=eCAtEGDeJxK does not have these headers as these URLs as designed for sharing.

1 Like