CSP issue: help to fix it

[MaxCCC]

I'm enabling CSP on my website. I had some issues with the fastsearch.js and this part in head.html:

{{- /* Highlight.js */}}
{{- $isHLJSdisabled := (.Site.Params.assets.disableHLJS | default .Params.disableHLJS ) }}
{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (not $isHLJSdisabled)) }}
{{- if not .Site.Params.assets.disableFingerprinting }}
{{- $highlight := slice (resources.Get "js/highlight.min.js") | resources.Concat "assets/js/highlight.js" | minify | fingerprint }}
<script defer crossorigin="anonymous" src="{{ $highlight.RelPermalink }}" integrity="{{ $highlight.Data.Integrity }}"
    onload="hljs.initHighlightingOnLoad();"></script>
{{- else }}
{{- $highlight := slice (resources.Get "js/highlight.min.js") | resources.Concat "assets/js/highlight.js" | minify }}
<script defer crossorigin="anonymous" src="{{ $highlight.RelPermalink }}" onload="hljs.initHighlightingOnLoad();"></script>
{{- end }}
{{- end }} 

Probably the onload is causing issues. The error I see is
Refused to execute inline event handler because it violates the following Content Security Policy directive..

I'm not familiar with the language here. Can someone help me to update the code so that CSP won't complain? Disabling works but then my highlighting is broken.

[pixelfabs]

I don't think the script is the issue. It's stored "locally". CSP is "Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks". This means it's a security layer to prevent "external" attacks, not internal.

Furthermore, To enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header. I don't think a script can attack itself, wouldn't make sense.

BUT! I do remember coming across the CSP issue you have, and maybe it's the same in your case. The case was:

When I did hugo server, CSP of a server I was trying to reach (API/XML) would complain. I could see the errors in google dev tools console. Same error, "refuse to execute" whatever. Images, scripts, fill-in-blanks. All refused to be executed, fetched etc.

But, when I generated the files, and host them (example.com instead of localhost), CSP errors were gone. And everything worked just fine.

So, go ahead. Check if you have CSP issues when uploading to your server. If not, great!

If yes, you need to configure your server: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

But I wouldn't bother, most hosting companies already protect themselves pretty well. Not all CSP features are widely supported: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#browser_compatibility