Quarto blog-- katex not rendering + fonts wrong + search-tool not working [CSP problem?]

[angelotrivelli]

Description

quarto version: 1.4.553

Starting with the quarto blog example. I was able to get it working in preview and also deploy successfully to an apache webserver on an AWS lightsail instance (running Amazon Linux 2023). I literally spun up the default quarto blog example and then added one equation and a ggplot + R code to the "post with code" posting.

Here is what it is supposed to look like...

Feeling lucky, I wanted to see if I could deploy to an AWS s3 static site that uses cloudfront. A few days later, it almost works!

I realize that s3+cloudfront is not a deployment option that is explicitly supported, so I don't expect a canned solution. But I think my problem is fundamental enough that someone might be able to help me with a clue. I also lack the vocabulary words to describe the problem cogently using jargon that is unfamiliar to me. So, even just correctly naming what my problem is would be super helpful.

The quarto blog, when deployed to s3/cloudfront, has 4 visible problems:

• katex equation doesn't render
• the search function doesn't work
• some fonts are falling back to a default
• the github icon next to the search tool doesn't appear

This is what it looks like in s3+cloudfront deployment:

When I take a peek at the javascript console using chrome dev tools, I see more than a dozen errors relating in various ways to Content Security Policy. They're all slightly different and very confusing sounding. Here's an example of 2 of them:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Ex67fXkAfIJlRwzr94oPIe172BI082U+eMyhMbcRtXU='), or a nonce ('nonce-...') is required to enable inline execution.

post-with-code/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

My understanding is that Content Security Policy has something to do with whether or not hyperlinks to javascript (and css too?) files from other domains "are allowed" to be served when a browser opens my page. I tried reading up on it but it seems to be one giant rabbit hole. As far as I can tell, there should be a way to identify the external hyperlinks and "whitelist" them so they're allowed. I could probably grab them from the javascript console and then, I guess, it's a matter of aws word-jazz to make it happen?

Has anyone done this before? I am not a web-dev security expert, is this something I should even attempt? What would you do?

[edit... took down live examples]
[edit... fix]

FWIW, I was able to fix the CSP (content-security-policy) configuration in cloudfront by modifying the security header for CSP like this...

img-src 'self' data:; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css https://fonts.googleapis.com; object-src 'none';

It was basically a trial-and-error process of using chrome dev tools to see the violations and then modding the security headers. The above policy allows SVG (the hamburger button) as well as google fonts, katex javascript/css, and inline scripts/styles.

[mcanouil]

I'am afraid, the issue is likely with S3 / Cloudfront setup and how it works.
You should look on S3 / Cloudfront documentation and more specialised places.

Also you should try a small reproducible example such as:

---
title: "KaTeX"
format:
  html:
    theme: none
    minimal: true
    html-math-method: katex
---

$$
X = \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}
$$

[angelotrivelli]

Thanks, yes, it's definitely a CSP issue.

It's something that whoever configures the webserver needs to address. This could happen also on an apache webserver if it were set-up with CSP.

Now I just need to find how to configure CSP & CORS properly.