If you use CSP headers to add security to your website and you use Hugo with Syntax highlighting you may run into a problem in that by default Hugo generates inline styles.
That is html like
1
2
3
4
5
6
7
|
<span style="color:#a6e22e">headers</span>[<span style="color:#e6db74"
>'referrer-policy'</span
>] <span style="color:#f92672">=</span> [{<span style="color:#a6e22e">key</span
><span style="color:#f92672">:</span>
<span style="color:#e6db74">'Referrer-Policy'</span>,
<span style="color:#a6e22e">value</span><span style="color:#f92672">:</span>
<span style="color:#e6db74">'same-origin'</span>}];
|
A good Content Security Policy will not allow this - and while you can workaround it by allowing ‘unsafe-inline’ this (the clue is in the name) is unsafe.
To avoid this configure Hugo to use classes for syntax highlighting and generate a CSS file for it
https://gohugo.io/getting-started/configuration-markup#highlight
1
2
3
4
|
[markup]
[markup.highlight]
noClasses = false
style = "monokai"
|
1
|
hugo gen chromastyles --style=monokai > syntax.css
|
include this css file in your theme and you have highlighting without inline styles,
It should look like this
1
2
3
4
5
6
7
8
|
<span class="p">];</span> <span class="nx">headers</span><span class="p">[</span
><span class="s2">"referrer-policy"</span><span class="p">]</span>
<span class="o">=</span> <span class="p">[</span> <span class="p">{</span>
<span class="nx">key</span><span class="o">:</span>
<span class="s2">"Referrer-Policy"</span><span class="p">,</span>
<span class="nx">value</span><span class="o">:</span>
<span class="s2">"same-origin"</span> <span class="p">},</span>
<span class="p">];</span>
|
Now it should work with your strong CSP