Content-Security-Policy issue - inline styles

[mrjackwills]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

I am trying to deploy shiki onto a Vue site that uses resilient CSP headers. I am encountering errors with regard to inline styles, specifically
Refused to apply inline style because it violates the following Content Security

I have created a simple reproduction, and actually put it online at shiki.mrjackwills.com, the source code and the nginx conf can be found at the shiki_example repo.

I am using client side Vue + vite, and have set a CSP nonce in the vite.config.ts file, the nonce is unique and created for each visit via nginx, and then inserted into the document that is served to the client. The 'wasm-unsafe-eval' header also needs to be set in order to load the wasm file.

I think, although I am no means an expert, that in order for shiki to run with this CSP setting, the css file would need to be imported in the .vue file, and each span that shiki creates would need to set classes rather than add a style tag, however I could be completely incorrect in my understanding.

Using unsafe-inline is not a workable solution for my situation. Actually I think it should mostly be fine

Reproduction

https://github.com/mrjackwills/shiki_example

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[dkhoperiya]

Same issue

[antfu]

Inline is by design how Shiki works, and I don't think there is a way to fix it, other than generating a set of atomic CSS rules to represent those colors one by one.

I have zero knowledge about CSP and I don't understand how would inline styles violates CSP or how would inline styles to be considered security issue.

About wasm restrictions - I don't think there is a workaround either. Just for the record that Shiki is supposed to runs on server side/build time, which should ship zero JS and wasm to the runtime. Import Shiki to the client only when you absolutely needs highlight dynamic content.

[mrjackwills]

Reading more into it, I think 'unsafe-inline' in the style-src section of a CSP is mostly fine, in which case shiki works as expected.

In order to use the nonce approach, one would have to use classes on each pre/span element, and then create a style tag , which contain all the classes, and appended that to the page with a nonce attached to it. It sounds straight forward, although I don't know the inner workings of shiki - so I'd guess it's a completely different implementation to what it currently does.

As for running build time - I have clearly mis-read the docs, as my example is creating all of this on the client side, even though all the code is static. Is there a vanilla vue example of the build-time code generation that you could point me to?

[dkhoperiya]

@mrjackwills And what about security? Is it really safe to use wasm-unsafe-eval and unsafe-inline?