CSP policy that uses nonce with unsafe inlines with Netlify

support
1

Is there a way to to have CSP policy that uses nonce with unsafe inlines with Netlify? I know with cloudflare you can use workers.

2

No, but I know how to transform a unsafe inline into a safe external file (using e.g. resources.FromString | js.Build | fingerprint).

3

I hate asking you questions because i know you are dealing with more important things. Can you share how to achieve this please.

4 
{{ $script := `

console.log("Insert your JS here");

` 
}}

{{ $js := $script | resources.FromString "myscript.js" | js.Build (dict "minify" hugo.IsProduction) }}
{{ if hugo.IsProduction }}
{{ $js = $js | fingerprint }}
{{ end }}
<script src="{{ $js.RelPermalink}}"></script>

Or something …

5

Transform a CSS source in assets in inline CSS. Here, a partial called css.css.

{{ $style := resources.Get "css/style.css"  | minify | fingerprint }}

<style nonce="{{ $style.Data.Integrity }}">
    {{ $style.Content | safeCSS }}
</style>

Then in the baseof.html:

{{ partialCached "css.css" . }}
6

Why would you not want to do this on the edge server in a worker or lambda function? I guess less things involved. More efficient from the source

1 Like
7

It is a Hugo forum. Not a Netlify one…

8

Agreed my bad. We should be able to add CSP headers into the config toml that are not used by a meta tag. But that would require hosting at the edge.

9
  1. Added complexity
  2. Adding some security nonce from a cloud server you don’t trust/control is in my head defeating the purpose of that security “thing”. Then it’s much better to add a integrity attribute on the script src, which would be something that you could verify.
1 Like
10

Doesn’t Hugo already do this with the fingerprinting?

11

Have a look at @nfriedli 's example above. I thought nonce was a “per request thing”, but I’m no expert on that.

But you could add the integrity in my example:

<script src="{{ $js.RelPermalink}}" {{ if hugo.IsProduction }}integrity="{{$js.Data.Integrity"}}{{ end }}></script>
13

This is what i posted

{{ $js := resources.Get “js/gallerydeluxe/cdn/index.js” }}
{{ $js = $js | js.Build (dict “params” site.Params.gallerydeluxe “minify” hugo.IsProduction) }}
{{ $styles := resources.Get “css/gallerydeluxe/styles.css” }}
{{ if hugo.IsProduction}}
{{ $js = $js | fingerprint “sha512” }}
{{ $styles = $styles | minify | fingerprint “sha512”}}
{{ end }}
—<script src=“{{ $js.RelPermalink }}” {{ if hugo.IsProduction}} integrity = “{{$js.Data.Integrity}}”{{ end }} defer>—
—<link rel=“stylesheet” href=“{{ $styles.RelPermalink }}” {{ if hugo.IsProduction}} integrity = “{{$styles.Data.Integrity}}”{{ end }}>—

minus the — does this work

14

It should be CSP Nonce ⟶ Script & Style Attribute.

2 Likes
15

Hi @bep

Nonce is dynamic and since hugo focus on static it is better to use hash.

I currently use hash in CSP the only feature i would have apericiate is an easy way to automatically copy the generated hashes to CSP instead of doing manually as i am doing now.

Hugo have the csp for local server but no option for building csp when publishing the site.

2 Likes