add hugo/csp mismatch post

1 files changed, 107 insertions, 0 deletions

diff --git a/content/posts/2021-10-19-hugo-csp-impedance-mismatch.md b/content/posts/2021-10-19-hugo-csp-impedance-mismatch.md
new file mode 100644
index 0000000..203d342
--- /dev/null
+++ b/content/posts/2021-10-19-hugo-csp-impedance-mismatch.md
@@ -0,0 +1,107 @@
+---
+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" "*"
+Header append "Access-Control-Allow-Methods" "POST, GET, HEAD, OPTIONS"
+
+# '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'"
+```
+
+[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"