Security policy for static site on cloudflare pages?

[kepona2732]

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

[KianNH]

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

[kepona2732]

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?

[KianNH]

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.

[kepona2732]

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

[KianNH]

What URL did you test?

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

[kepona2732]

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

[KianNH]

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: *

[kepona2732]

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

[KianNH]

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

[kepona2732]

thank you 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

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

[KianNH]

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

[kepona2732]

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

[KianNH]

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