[gatsby-plugin-netlify] Overwrite headers

[NeoLegends]

Description

I was trying to override the X-Frame-Options: DENY-header the plugin sets for all pages to enable a headless CMS to embed our page in an iframe.

Steps to reproduce

Taken from https://github.com/BILDQUADRAT/website.

Set headers like this:
gatsby-config.js:

module.exports = {
  plugins: [
    // ..
    {
      resolve: 'gatsby-plugin-netlify',
      options: {
        headers: {
          '/*': [
            "Content-Security-Policy: frame-ancestors 'self' https://*.storyblok.com/",
            "X-Frame-Options: ALLOW-FROM https://app.storyblok.com/",
          ]
        },
        mergeSecurityHeaders: true,
      }
    },
    // ...
  ],
}

Expected result

I'd end up with a _headers file like this:

## Created with gatsby-plugin-netlify

/*
  Content-Security-Policy: frame-ancestors 'self' https://*.storyblok.com/
  X-Frame-Options: ALLOW-FROM https://app.storyblok.com/
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff

...

Actual result

I get a _headers file like this:

## Created with gatsby-plugin-netlify

/*
  Content-Security-Policy: frame-ancestors 'self' https://*.storyblok.com/
  X-Frame-Options: ALLOW-FROM https://app.storyblok.com/
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff

...

The transformHeaders-function allowed me to reach my desired result, but it's not a very elegant solution.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - /usr/local/opt/node@8/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/opt/node@8/bin/npm
  Browsers:
    Chrome: 69.0.3497.81
    Firefox: 61.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-rc.15 => 2.0.0-rc.15 
    gatsby-plugin-netlify: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0 
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-sass: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-typescript: ^2.0.0-rc.5 => 2.0.0-rc.5 
    gatsby-source-storyblok: ^0.1.1 => 0.1.1 

[kakadiadarpan]

Hi @NeoLegends, you can remove the default security headers by passing mergeSecurityHeaders as false and add the ones you need in headers.

[NeoLegends]

Ah, I was thinking the opposite. mergeSecurityHeaders implies that it will do the merge for me. Might wanna rename that. :)

…

Am 10.09.2018 um 13:51 schrieb Darpan Kakadia ***@***.***>: Closed #8020. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[kakadiadarpan]

@NeoLegends doesn't it implies that if it's value is true it will merge the given security headers with default headers otherwise, it just takes what you provide to it?

[NeoLegends]

I thought it would overwrite the defaults with my config values.

[grumpyoldman-io]

I know this is closed, but I spent some time on this as well. This is a not a merge but more of a "concat" of headers if you ask me. It doesn't feel intuitive as it currently stands. Are you open for changes on this?

[slorber]

would also expect to be able to override default security headers

[Jwrighty]

I have also just run into this. Felt more intuitive that setting a value and merging would override the default, not create a duplicate

[antoinerousseau]

Just ran into this too, the current behavior is indeed an append and not a merge as it should be.
I can make a PR if you think it should be modified?

[sidharthachatterjee]

@antoinerousseau That does make sense. Happy to accept a PR!

[antoinerousseau]

@sidharthachatterjee #17538 \o/

[arhoy]

@NeoLegends have you figured out a solution for this? I am getting an error
Refused to display 'https://public.tableau.com/ in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[arhoy]

I have the following in my config and trying to allow anything with the root URL public.tableau.com

   {
      resolve: 'gatsby-plugin-netlify',
      options: {
        headers: {
          '/*': ['X-Frame-Options: ALLOW-FROM https://public.tableau.com/'],
        },
        mergeSecurityHeaders: false,
      },
    }

However, I am still getting the same error and not sure if my set up is correct.

[antoinerousseau]

curl -I https://public.tableau.com/ does not show any X-Frame headers.
What do you have in _headers after running gatsby build?
You might need to tweak your CloudFront setup (I see X-Amz-Cf-* headers) as it might not be passing them from Netlify.

[joeldmyers]

I had a similar use case - wanted to use a gatsby site page in an iframe on another site.

I had a really hard time getting all the various methods listed above (config etc.) working with Netlify, even though I'm pretty sure I followed everything correctly. It may have been a version issue somewhere with one of the npm packages, but it kept overwriting the headers I'd set.

I ended up just deploying the app to vercel and it worked; thankfully (for this case at least), vercel doesn't add the x-frame-options: deny header by default. So it was a much smoother experience.

[antoinerousseau]

If you share your versions and code I can have a look. I made a PR on the Gatsby Netlify plugin a few months ago to fix these issues and it got merged, so now it works for me for the same use case.