Change the HEADER X-Frame-Options to one of my environments

Support
, , ,
#1

I am trying to display the front-end of my site http://qa.uno.com.au/ inside of an IFrame in my CMS (Sanity) and I am getting “Refused to display ‘Get a new home loan or refinance and earn 100,000 bonus Velocity Points’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.”

Screen Shot 2020-12-09 at 12.13.04 pm
Screen Shot 2020-12-09 at 12.13.04 pm3360×2100 702 KB

is this something that I can manage via netlify.toml file?

site name: mystifying-stonebraker-9e3541

Thanks.

#2

As per MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options, the allow value won’t work for modern browsers, except for same origin.

#3

hey @carlos.claro did you figure this out? I am trying to do exactly the same thing.

#4

@carlos.claro i got this working for my preview in sanity

Content-Security-Policy: frame-ancestors 'self' https://SANITYSITEID.sanity.studio,

#5

Hi @isaac-martin had parked this for a bit but your solution looks promising, let me give a go!
Thanks.

#6

Hey @isaac-martin was your change added to the .toml file? Thanks.

#7

Mine was added to the headers field in gatsby-plugin-netlify however it outputs on build to my _headers file. Believe adding to toml does it the same.

#8

can you elaborate how you put it into gatsby via the plugin?

#9 
   {
  resolve: "gatsby-plugin-netlify",
  options: {
  headers: {
      "/*": [
        "X-XSS-Protection: 1; mode=block",
        "X-Content-Type-Options: nosniff",
        "Referrer-Policy: same-origin",
        `Content-Security-Policy: frame-ancestors 'self' https://brex.sanity.studio`,
      ],
    },
  },
},
1 Like
#10

Just put it above for you - let me know if that is enough.

#13

You cannot display a lot of websites inside an iFrame. Reason being that they send an “X-Frame-Options: SAMEORIGIN” response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

I faced the same error when displaying YouTube links. For example: https://www.youtube.com/watch?v=8WkuChVeL0s

I replaced watch?v= with embed/ so the valid link will be: https://www.youtube.com/embed/8WkuChVeL0s

It works well.

Try to apply the same rule on your case.

SAMEORIGIN

The page can only be displayed in a frame on the same origin as the page itself. The spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin.