CSP error when adding Tabi to existing site

[alexandremjacques]

Hi. I have installed Tabi theme on a already existing site. I'm getting the following error when loading the page:

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-CsW8jjla+T2+YKlXNpUv/dfDmtrFPo+1I6u6OjIEc+Q='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

I can see that the CSP style-src is being applied only on <meta property="og:url"...> tag.

Any advice on how to handle this?

TIA

[welpo]

Hi!

The default CSP directive is pretty restrictive, and it won't allow inline CSS styling like:

<p style="color: red; background-color: blue;">This is a paragraph with inline CSS.</p>

You can either load custom CSS or set a more liberal CSP directive. If we only allowed inline style from the default directive:

allowed_domains = [
    { "directive": "font-src", "domains": ["'self'", "data:"] },
    { "directive": "img-src", "domains": ["'self'", "https://*", "data:"] },
    { "directive": "script-src", "domains": ["'self'"] },
    { "directive": "style-src", "domains": ["'self'", "'unsafe-inline'"] },  # Allow inline styles.
    { "directive": "frame-src", "domains": ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]

[alexandremjacques]

Yeah. That's what I figured. I added the "'unsafe-inline'" to the relevant directive.

Since I have code blocks on the article pages, those are the culprit for the inline CSS.

Thanks anyway.

[welpo]

Codeblocks shouldn't be a problem, as long as they are declared with Markdown.

Are you adding them with HTML?

[alexandremjacques]

Nope. E.g.

[welpo]

That's odd. On the tabi demo (and my own site) I use codeblocks with the default CSP.

Example: code, live, config.toml.

Have you set any values in config.toml that might cause this? I'm thinking maybe a custom highlight_theme, for example?

[alexandremjacques]

Unless I did something wrong when adding tabi to my blog, I guess I have nothing out of the defaults. That's my config.toml right now:

base_url = "https://alexandremjacques.com"
default_language = "en"
build_search_index = true

title = "Alexandre M Jacques"

compile_sass = false

theme = "tabi"
render_emoji = true

taxonomies = [
    { name = 'categories', feed = true },
    { name = 'tags', feed = true }
]

[markdown]
highlight_code = true

[welpo]

Thanks for sharing your config. Unfortunately, I can't reproduce the issue.

How did you install tabi? As a submodule, or…?

[alexandremjacques]

Follwing the installation instructions I just cd into my blog project and:

git clone https://github.com/welpo/tabi.git themes/tabi

Edited the config.toml file to configure tabi as the theme and started Zola. Since the styles were not loading, I checked the console and saw the error messages.

No big deal. Maybe I have to check whatever I must have done differently to cause the issue.

[welpo]

Thank you!

I managed to reproduce the issue with a completely new setup.

I'll look into this and try to fix it! Thanks for taking the time to ask and provide further info.

[welpo]

Got it!

config.toml needs to have this section:

[markdown]
highlight_code = true
highlight_theme = "css"

This makes it so the rendered HTML of codeblocks uses CSS variables instead of style:….

I will update the install docs (done). Thanks again!