below is my netlify.toml file :-
[build]
command = “yarn build”
publish = “site/public”
[build.environment]
NETLIFY_USE_YARN = “true”
NODE_VERSION = “18.15.0”
YARN_VERSION = “3.5.1”
[functions]
node_bundler = “esbuild”
[[plugins]]
package = “@netlify/plugin-gatsby”
[[headers]]
for = “/*”
[headers.values]
X-Frame-Options = “SAMEORIGIN”
X-XSS-Protection = “1; mode=block”
X-Robots-Tag = “index”
cache-control = “public, max-age=0, no-cache, no-store, must-revalidate”
Your website is not showing me that error. Is this resolved?
no its not resolved yet !
How do we reproduce the issue then?
Title: Error on Login Attempt with Custom Headers on Gatsby Site Hosted on Netlify
Site URL: duxiana-dev.netlify.app
Issue Summary:
We are encountering an error when trying to log in to our Gatsby site hosted on Netlify. The error appears in the browser’s console during login attempts, and despite several efforts to resolve it through different approaches, the issue persists.
Steps to Reproduce:
Approaches Attempted:
toml File:netlify.toml file to include custom headers. Unfortunately, this did not resolve the issue.__headers File:__headers file at the root level of our project, hoping to override headers at the project level. This approach also failed to resolve the issue.gatsby-config.js):gatsby-config.js file by configuring the Netlify plugin and providing a headers object specifically for this purpose. Despite this, the issue persists.Expected Behavior:
The login process should complete successfully without errors in the console, and any custom headers set should be applied correctly.
Actual Behavior:
An error is thrown in the console during login attempts, and the custom headers do not seem to be applied as expected.
Additional Information:
Request:
We need assistance in identifying and resolving the cause of this error. We suspect that the issue may be related to the handling of custom headers on Netlify when using Gatsby. Any insights or recommendations for further steps would be greatly appreciated.
Credentials:-
- Email :- smitraghani999@gmail.com
- Password :- Password@123
Attachments:-
1.Screenshot:-
2.netlify.toml :-
[build]
command = "yarn build"
publish = "site/public"
[build.environment]
NETLIFY_USE_YARN = "true"
NODE_VERSION = "18.15.0"
YARN_VERSION = "3.5.1"
[functions]
node_bundler = "esbuild"
[[plugins]]
package = "@netlify/plugin-gatsby"
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "SAMEORIGIN"
X-XSS-Protection = "1; mode=block"
X-Robots-Tag = "index"
cache-control = "public, max-age=0, no-cache, no-store, must-revalidate"
@Umang Checking your supplied screenshot the error is:
Invalid 'X-Frame-Options' header encountered when loading
'https://store.duxiana.com/': 'allow-from https://store.duxiana.com/'
is not a recognized directive. The header will be ignored.
As shown to the right of that message, it is being triggered by the request to:
https://store.duxiana.com/account.php?action=order_status
Immediately we know that isn’t hosted on Netlify, as they don’t support runtime PHP.
Checking that specific network request shows:
It references BigCommerce and Cloudflare and clearly shows the header the browser dislikes.
This seems to be an incorrect suspicion.
You’ll likely find that the headers you have set in your netlify.toml do work, but only for your own site.
You can’t use them to control the response headers of other servers.
so I can’t handle this error right ?
@Umang I’m not sure what you’re asking, who is ‘we’ in this context?
Sorry for the confusion, but I’m asking if it’s possible to remove the console error that appears whenever a user logs into the site. How can I resolve this issue?
I can’t say with any confidence, as it’s not the kind of issue I’ve ever experienced.
All I know is you cannot change the response headers of BigCommerce’s system when making the requests directly to them.
However you could try proxying requests to them by reading the documentation here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service
And here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#custom-headers-in-proxy-redirects
Although I just noticed the warning:
Custom headers apply to the request, not the response
So I imagine that’s all largely useless.
Another option would be to create your own function to act as an intermediary:
https://docs.netlify.com/functions/overview/
https://docs.netlify.com/edge-functions/overview/
@nathanmartin Thanks for your help! I’ll give these approaches a try!
Hi @nathanmartin,
We’ve resolved the initial error from BigCommerce, but now we’re encountering a new issue during login:
Error: Refused to display ‘https://www.duxiana.com/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.
Attchment:
1. netlify.toml:-
[build]
command = "yarn build"
publish = "site/public"
[build.environment]
NETLIFY_USE_YARN = "true"
NODE_VERSION = "18.15.0"
YARN_VERSION = "3.5.1"
[functions]
node_bundler = "esbuild"
[[plugins]]
package = "@netlify/plugin-gatsby"
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "SAMEORIGIN"
Content-Security-Policy = "frame-ancestors 'self' https://www.duxiana.com"
X-XSS-Protection = "1; mode=block"
X-Robots-Tag = "index"
cache-control = "public, max-age=0, no-cache, no-store, must-revalidate"
@Umang You’re really confusing yourself regarding what the headers can impact.
They adjust the headers of the Netlify site you’re deploying them to.
They do not change the response headers of other sites.
Going to https://duxiana-dev.netlify.app you will see:
^ These match what you have set
Going to https://www.duxiana.com you will see:
It’s clearly a different site.
Sure they’re both hosted on Netlify, but it’s not the same site and there are even obvious visual differences between them.
Your live site:
Your dev site:
Your site at https://www.duxiana.com explicitly says X-Frame-Options: DENY
If you need that changed, then you would change it on the site deployed at https://www.duxiana.com
Hi @nathanmartin,
Should I use the CSP (Content Security Policy) header instead of X-Frame-Options, and deploy this change to production? Could you please review my file with the updated changes?
Attachment :-
1. netlify.toml:
[build]
command = "yarn build"
publish = "site/public"
[build.environment]
NETLIFY_USE_YARN = "true"
NODE_VERSION = "18.15.0"
YARN_VERSION = "3.5.1"
[functions]
node_bundler = "esbuild"
[[plugins]]
package = "@netlify/plugin-gatsby"
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "SAMEORIGIN"
Content-Security-Policy = "frame-ancestors 'self' https://www.duxiana.com"
X-XSS-Protection = "1; mode=block"
X-Robots-Tag = "index"
cache-control = "public, max-age=0, no-cache, no-store, must-revalidate"
@Umang Sorry but I’m not going to provide project specific consultancy.
I’m just a volunteer though, while Netlify’s own staff operate to their Scope of Support.
They might be more interested in helping you determine specific values, my only interest was in pointing out that the headers system does work and helping you get initially unstuck.