Style issues when using Netlify access control

Some sites have seen styling issues when we password protect the front-end. This is common practice for us on sites that are not for public consumption.

I sent this request to Netlify:

I have implemented a site-wide password on [REDACTED]. It's a single-page Gatsby site.

It works lovely in Chrome on desktop, but I run into issues on iOS browsers and Safari desktop, among others.At first I saw that I had an X-Content-Type-Options: nosniff header being set by the netlify gatsby plugin. I set that to an empty string instead of nosniff and that removed the console warnings.

But then a couple of the JSON files were throwing 401s even after I put in the password. The result is that the JS doesn't run and the page is not functional.

I've tried basic auth instead, but that led to a few other issues.Have you seen this type of behavior in the past? Any idea what I am doing wrong or something for me to try next?

Thank you!

This is what I received in response:

We have indeed seen this before. Safari seems unwilling/unable to forward the auth for certain types of XHR API calls from the browser, while everyone else does. I'm not sure tis is the problem, but it is likely and easy to detect: do the failing calls have or lack the Authorization HTTP request header? If lack, you'll want to make sure that the calls specify it in their request, which I think must be possible since I have pointed this out to a few dozen customers and all have said "ah yeah that works" - but I don't know the best mechanism for doing so, so I can't advise in more depth. Let me know if you get the 401 and the header IS there, as that would be something we could definitely keep helping debug!

I tried again to add basic auth to the site and removed the password protection.

{
  resolve: `gatsby-plugin-netlify`,
  options: {
    headers: {
      "/*": [
        "X-Frame-Options: SAMEORIGIN",
        'X-Content-Type-Options: ""',
        "Basic-Auth: test:test"
      ]
    }
  }
}

That seemed to do the trick. I would like to try this on a few projects and see if it works consistently. If it does, let's bring it back into the starter kit. If not, let's keep exploring.

⚠️IMPORTANT⚠️ When implementing this, please use an environment variable to set these headers, or set them in netlify.toml instead. I would love to avoid exposing the user/pass combo, and I would also like to be able to make it contextual to each deploy (e.g. to include in staging sites but not production).

ample / gatsby-starter-ample

Style issues when using Netlify access control #212