Security policy for static site on cloudflare pages?

hello there,

in normal hosting i can add .htaccess fiel how can i add security headers in Cloudflare pages. i want to add these headers for static site hosted with Cloudflare pages.

  • Content-Security-Policy
  • X-Frame-Options
  • Permissions-Policy

thanks in advance and apologies as i am unable to understand where i need to add in Cloudflare pages

thanks

Use the _headers file - the headers you’re after are included in the example in https://developers.cloudflare.com/pages/platform/headers/

4 Likes

thanks @KianNH for sharing the url i have read this url before what i am unable to understand is if this is a simple _header file like .htaccess file i add in my site files or does this go somewhere speciall in Cloudflare pages as all the files in Cloudflare pages are auto pushed via GitHub. So i suppose the _header file will be part of the files coming from repo and not something i need to add in Cloudflare correct?

This will go into your repo, correct.

In your Pages project, your build settings will have an output folder:

In this case, it’s /public - so I’d create a _headers file in /public so it ends up being /public/_headers

You can verify it’s working since in the build log, there’s a headers tab.

image

1 Like

Hi @KianNH

Something doesnt seems to be working, some hsts rules are already applied via Cloudflare dashboard do i have to select between auto rules and custom headers or i can use custom headers file to enhnace the policy header issues.

i added this file:

which still result in those policies not being applied what i did wrong here?

thanks

What URL did you test?

You’re telling Pages to only apply X-Frame-Options: DENY to /secure/page

Hello @KianNH

i am not sure as in the normal hosting environment my .htaccess starts like this

# BEGIN security

<IfModule mod_headers.c>

Header always set X-Frame-Options "SAMEORIGIN"

what i suppose to add instead of /secure/pages i thought i have to do something with Cloudflare pages?

thanks

Have a look at these docs - they go over how the _headers file matches URLs and decides which headers to apply.

https://developers.cloudflare.com/pages/platform/headers/#matching

# only apply to /secure/page
/secure/page
  X-Frame-Options: DENY

# apply to all pages
/*
  Access-Control-Allow-Origin: *
1 Like

hi @KianNH

i have read that but i am unable to understand what secure page is? is it refering to Cloudflare pages? what i need to add there to apply to my custom domain example.com for example hosted on Cloudflare pages thanks

It holds no special meaning, it’s an example.

You put in whatever path you want on your site and the associated headers.

If you want X-Foo: Bar on example.com/foo/bar/baz then it’d be like:

/foo/bar/baz
  X-Foo: Bar

If you want to apply headers to every page on your site, then use /*

/*
  X-Foo: Bar
2 Likes

thank you :pray: very much @KianNH

this really helped me understand and apply the needed headers. I believ the Cloudflare documents can be 1-2 lines longer as coming from apache nginx i cant wrap my head around how to make those things work in Cloudflare :stuck_out_tongue:

for example : ErrorDocument 404 /404/ how to format in _headers when deploying to Cloudflare pages etc. (custom 404 is not working for me i know it needs different format but not sure which one)

ErrorDocument: 404 /404/

ErrorDocument 404: /404/

i will tet both but if there is an example it really help as i do not have to stupid repo commits to test which one works

thank you for all the great support have a good day

Add a 404.html as per https://developers.cloudflare.com/pages/platform/serving-pages/#not-found-behavior

1 Like

Does it have to be 404.html can’t I use index.html in the directory /404/index.html for example?

If you have no 404.html then it’ll go to / - it’s specifically 404.html that is required for that behaviour to change.

2 Likes

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.