-
-
Notifications
You must be signed in to change notification settings - Fork 357
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Content-Security-Policy issue - inline styles #671
Comments
Same issue |
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. |
Reading more into it, I think 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? |
@mrjackwills And what about security? Is it really safe to use |
Validations
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, 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.UsingActually I think it should mostly be fineunsafe-inline
is not a workable solution for my situation.Reproduction
https://github.com/mrjackwills/shiki_example
Contributes
The text was updated successfully, but these errors were encountered: