1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
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."
|
