How to set server response headers?
Mainly security response headers such as HTTP Strict Transport Security, CSP, X-Frame, Referrer-Policy, etc., something similar as to how they're set for apache/nginx servers.
I've had a look through the docs but didn't find anything about this.
Thank you!
Solution:Jump to solution
https://github.com/brody192/create-react-app-starter
copy the nixpacks.toml and Caddyfile from this repo into yours...
31 Replies
Project ID:
dbc6a326-959b-4750-b2e7-111baf636e6aProject id: dbc6a326-959b-4750-b2e7-111baf636e6a
it is up to your app to set these headers
for node, theres a great middleware called helmet for example
if my back-end is java and is basically a crud that handles json resources and front end is react that uses it, then I set the headers in the react app?
it still is up to your app to set the headers regardless of what kind of app you have, but of course there is always a way to set some headers, so tell me, what kind of react app is this? create-react-app, vite? what we working with?
it's a create-react-app, I'm basically trying to get a good grade on a website that checks for the security headers, here's the report for railway.app for example: https://securityheaders.com/?q=https%3A%2F%2Frailway.app&followRedirects=on
on the back-end i've set the headers and all responses received have them, but that doesn't affect the grade at all, so it must be on the front-end side
how are you serving the react app? do you have two railway services? like one for the frontend and one for the backend?
yes
Awesome, good start, gonna eat dinner and I'll be back soon
so how are you currently serving your frontend react app?
with a railway service, I pointed it to the repository and railway did the rest
gotcha
are you doing anything special with your app? nginx? serve? anything?
nope, it's an out of the box create-react-app project
that means you are running it in dev mode on railway, not ideal and doing that you also cant set headers
actually
so lets get your react app running in a way that it suitable for a production environment
just today I changed the Build Command to npm run build and the Start Command to npx serve -s build
then your answer to this shouldnt have been "nope" 🤣
I read serve and since today was the first time I actually learned about it, my brain lagged 🤣
Solution
https://github.com/brody192/create-react-app-starter
copy the nixpacks.toml and Caddyfile from this repo into yours
its as simple as that
to set headers, read this page https://caddyserver.com/docs/caddyfile/directives/header
and then make your desired changes in your Caddyfile
but worry about setting the headers later, make sure the app is working with those files as is first
going to try right now
okay so the service started correctly after I removed the deploy npx serve command and the app works, now I'm gonna test with one header to see the result
sounds good
hmm if I add the directive header as the caddy link shows I get a Error during parsing: Unknown directive 'Strict-Transport-Security', and on the caddy community i've read that The header directive has to be inside a server block directive, and used a provided example. the error is gone but the headers are not added
if I add the header directive in global options I get Error: adapting config using caddyfile: Caddyfile:15: unrecognized global option: header
the headers go in the site block
please read the docs page i linked, not just skim read it
you're right, it's right there, one click away "Directives are functional keywords that appear within site blocks." pardon my ignorance Brody
no worries, i skim read too, but sometimes its worth it to actually sit down and read
indeed it is, after adding the header directive correctly, the security report improved and I can now see the headers in the browser! Thank you very much for your help and patience Brody, I truly appreciate it! ❤️
for reference https://github.com/brody192/create-react-app-starter/blob/add-headers/Caddyfile#L23-L35
no problem! 🙂
thank you again for your support and have a great evening!
you too 🙂