KaTeX hashes in netlify.toml

Support
1

In this site built with Hugo, I wanted to enable KaTeX rendering and so created a partial template layouts/partials/math.html with the content:

{{- if or (.Params.math) (.Site.Params.math) (.Params.katex) (.Site.Params.katex) -}}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css"
    integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
  {{/* The loading of KaTeX is deferred to speed up page rendering */}}
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js"
    integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js"
    integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
    onload="renderMathInElement(document.body,
      {
        delimiters: [
          {left: '$$', right: '$$', display:true},
          {left: '$', right: '$', display:false},
          {left: '\\(', right: '\\)', display: false},
          {left: '\\[', right: '\\]', display: true}
        ]
      }
    );"></script>
{{- end -}}

But the website cannot render the equation as ittheows some CSP error as shown in web dev console -

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' <URL>". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

sciputer-mock-up-site.netlify.app/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

A person the hugo formuls told that the hashes of the KaTeX script had to be provided in netlify.toml file.

That is a CSP error and to fix it you need to include the hash of the JS scripts for KaTex.
The headers in the project config are about the local Hugo server (see the doc)
You need to fix the access control headers in your build environment.
If you are deploying to Netlify then the place to include the hash is in netlify.toml .
To calculate the hash use Chrome Dev tools and you will see it displayed next to the script that is missing it.
We cannot provide further assistance for CSP errors in this forum.
Search other places like for example the MDN doc etc.

How should I include the hashes in thenetlify.toml file? (I am new to netlify and website related things, so apologies for any silly question)

2

Added “https://cdn.jsdelivr.net” in the site’s config.toml and … solved.

1 Like
3

Hey there, @Shirshendu :wave:

Thanks so much for coming back and sharing the solution! Glad you got everything working :netliconfetti:

1 Like