How to add custom http headers for Hugo site

Question

I am deploying a Hugo site through Github pages, but I want to add custom HTTP headers like X-Frame-Options, X-XSS-protections. However, I tried to add the below code to my config.yaml file as per their site's instruction. But it isn't working. The site still has header vulnerabilities. Can someone help me in this regard.

  headers:
  - for: /**.html
    values:
      Content-Security-Policy: connect-src api.github.com; font-src cdnjs.cloudflare.com fonts.googleapis.com; img-src 'self' www.countryflags.io; script-src-elem 'unsafe-inline' cdnjs.cloudflare.com 'self'; style-src-attr 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' cdnjs.cloudflare.com fonts.googleapis.com
      Referrer-Policy: strict-origin-when-cross-origin
      X-Content-Type-Options: nosniff
      X-Frame-Options: DENY
      Strict-Transport-Security = max-age=2592000
      X-XSS-Protection: 1; mode=block

Daniel Terhorst-North · Answer 1 · 2022-12-06T18:06:02.553

Late to the party, but if anyone else comes here looking for "Hugo custom HTTP headers", this is not something you can do in Hugo itself. HTTP headers are provided by the web server, not the static content.

The Hugo documentation about custom HTTP headers is for configuring your local development Hugo server—the thing you get when you run hugo serve—to return custom HTTP headers, so you can test your security setup.

It will have no impact on your production server because you need to set custom HTTP headers up on that separately. For instance, you can configure HTTP headers in nginx based on the URL.

In your case, you want to return custom headers from GitHub Pages, which is not currently possible, so other answers to that question suggest paid alternatives like Netlify, or trying <meta http-equiv> tags and see what happens.

Yes. I have later did it with netlify. – Nirzak Mar 19 '23 at 06:54 — Nirzak, Mar 19 '23 at 06:54

score 1 · Answer 2 · answered Jun 21 '21 at 08:52

I ran into a similar issue -- I wanted to load some specific files in the header, depending on a variable in the front matter.

For me, the issued was solved by adjusting the header and the front matter of the page as follows.

HTML LAYOUT HEADER

In the layout file for the header (e.g. hugo > themes > your_very_unique_theme > layouts > header.html), I added this line of code:

<!-- Additional Header -->
{{ with .Params.header }} 
  <link rel="stylesheet" href="{{ .some_extra_file }}">
  <script src="{{ .another_extra_file }}"></script>
{{ end }}

FRONT MATTER OF THE PAGE

Then, in the front matter of the page, I wrote this:

---
title: test page
[...]
header: 
  some_extra_file: "some.css"
  another_extra_file: "extra.js"
---

RESULT

If you set these parameters (some_extra_file and another_extra_file), your rendered html will look like this:

  [...]
  <link href="some.css">
  <link href="extra.js">

If you do not set those two parameters, the html will just be empty.

I took the golang templating code from this help thread of the hugo discours: https://discourse.gohugo.io/t/empty-tags-on-param-isset-and-not-empty/4187 .

The original question is about [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers), not "headers" the visual design element of a website. Good answer! But to a different question. — scubbo, Aug 04 '22 at 04:24

score 1 · Answer 3 · answered Dec 09 '22 at 05:43

1

GitHub pages add the default HTTP headers for accessing content as if you are accessing your files from the repo.

In your /static directory of the Hugo, add headers.toml file:

# custom header fields
["*"]
    cache-control = "max-age=3600"
    referrer-policy = "no-referrer"
    strict-transport-security = "max-age=31536000; includeSubDomains"

answered Dec 09 '22 at 05:43

Jishan Shaikh

1,572
2
13
31

Thanks for the answer. I will surely try it. However, I have already did it with the netlify's custom HTTP header configuration. – Nirzak Mar 19 '23 at 06:53

How to add custom http headers for Hugo site

3 Answers3