---
slug: hugo-csp-impedance-mismatch
title: "Hugo/Content-Security-Policy Impedance Mismatch"
date: "2021-10-19T00:12:27-04:00"
draft: false
---
As part of the site upgrades, I've also been clamping down on the
response headers.  The full list is below, but I ran into a couple of
problems trying to remove `'unsafe-inline'` from the `style-src` section
of the the [`Content-Security-Policy` header][csp].

The two issues I encountered were:

1. [Chroma][] renders syntax highlighting fragments with inline `style`
   attributes, rather than [CSS][] classes.
2. [Goldmark][] renders table cell alignment with inline `style`
   attributes.

Neither of these defaults is ideal if you don't want to allow inline
styles.

After reading [this documentation][gen-chromastyles], I was able to
configure [Hugo][] and [Chroma][] to use [CSS][] classes instead of
inline `style` attributes by doing the following:

```bash
# switch to theme assets directory
cd themes/hugo-pt2021/assets

# generate static chroma stylesheet
hugo gen chromaclasses --style=monokai > chroma.css

# append chroma to style.sass
echo '@import "chroma"' >> style.sass
```

Finally, I added the following to `config.toml`:

```toml
[markup]
  # syntax highlighting
  [markup.highlight]
    # use classes instead of inline style attributes
    noClasses = false
```

That leaves me with table cell alignment issue, which does not appear to
be as easy to fix.  According to the documentation, the [Goldmark Table
extension][goldmark-table] does support modifying the table cell
alignment rendering behavior, but the options are limited:

1. `align` attribute: deprecated in [HTML5][]
2. `style='text-align: ...'`: what I am trying to avoid
3. none: requires [AST][] post-processing

Options #1 and #2 are out, and I don't see an obvious way to configure
[Hugo][] to do something useful with #3.

One nuclear option would be to:

1. define a custom `table` [shortcode][],
2. move table data to the `data` directory, then
3. [bypass the table renderer entirely][table-shortcode]

Frankly the table markup syntax is so atrocious that I'm not sure the
nuclear option would be all that bad.

In any case, here are my response headers so far:

```apache
# set security headers (2021-10-17)
Header append "Strict-Transport-Security" "max-age=31536000"
Header append "X-Frame-Options" "SAMEORIGIN"
Header append "X-Content-Type-Options" "nosniff"
Header append "Cross-Origin-Opener-Policy" "same-origin"
Header append "Cross-Origin-Resource-Policy" "same-origin"
Header append "Access-Control-Allow-Origin" "https://pablotron.org"
Header append "Access-Control-Allow-Methods" "POST, GET, HEAD, OPTIONS"

# securityheaders.com updates (2021-10-20)
Header append "Referrer-Policy" "strict-origin-when-cross-origin"
Header append "Permissions-Policy" "camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), usb=()"


# 'unsafe-inline' needed for hugo table cell alignment :/
Header append "Content-Security-Policy" "default-src 'self'; img-src 'self' https://pmdn.org; style-src 'self' 'unsafe-inline'"
```

 

**Update (2021-10-20):** Based on the [the scan results from
securityheaders.com][securityheaders-scan-results], I constrained
`Access-Control-Allow-Origin`, added `Referrer-Policy`, and added
`Permissions-Policy`.

**Update 2 (2021-10-25):** I went with [the nuclear option][nuclear-option].

[csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  "Content-Security-Policy HTTP response header"
[chroma]: https://github.com/alecthomas/chroma
  "Pure Go syntax highlighter"
[hugo]: https://gohugo.io/
  "Hugo static site generator"
[gen-chromastyles]: https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css
  "Hugo syntax highlighting documentation"
[css]: https://en.wikipedia.org/wiki/CSS
  "Cascading Style Sheets"
[goldmark]: https://github.com/yuin/goldmark/
  "Go CommonMark Markdown renderer"
[markdown]: https://en.wikipedia.org/wiki/Markdown
  "Lightweight markup language"
[goldmark-table]: https://github.com/yuin/goldmark#table-extension
  "Goldmark table extension"
[ast]: https://en.wikipedia.org/wiki/Abstract_syntax_tree
  "Abstract Syntax Tree"
[html5]: https://en.wikipedia.org/wiki/HTML5
  "HyperText Markup Language, version 5"
[shortcode]: https://gohugo.io/content-management/shortcodes/
  "Simple snippets in content files calling built-in or custom templates"
[table-shortcode]: https://discourse.gohugo.io/t/how-to-create-tables-more-simpler-without-markdown/15254/4
  "Create tables without Markdown"
[securityheaders-scan-results]: https://securityheaders.com/?q=pablotron.org&hide=on&followRedirects=on
  "Scan results for this site from securityheaders.com"
[nuclear-option]: {{< relref "posts/2021-10-25-the-nuclear-option-no-more-unsafe-inline.md" >}}
  "Table shortcode for Hugo, removal of unsafe-inline, and updated Security Headers scan result."