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
|
---
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"
|
