-
|
Is there a way to stop Here is my config: |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 9 replies
-
|
Can you specify which "inline scripts" are you exactly referring to? |
Beta Was this translation helpful? Give feedback.
-
|
There are these scripts in a number of the files built: Here is an example that looks like it is in every html file that is built: |
Beta Was this translation helpful? Give feedback.
-
|
First two are needed to prevent flashes on initial load. The third one can be moved to separate chunk by setting |
Beta Was this translation helpful? Give feedback.
-
|
I added the following into my config.mts file and it looks like the below now, but I still get the same in all my files. |
Beta Was this translation helpful? Give feedback.
-
|
It should be outside build. There is no |
Beta Was this translation helpful? Give feedback.
-
|
That worked, thanks! Is there a certain CSP you recommend to use with vitepress?
Due to our automation it is somewhat difficult to generate a nonce with vitepress and pass it in to our build process for CloudFront but from what I am reading that seems like the only way unless I want to use unsafe-inline? |
Beta Was this translation helpful? Give feedback.
-
|
You can specify their hash, but they might change between minor versions. Not sure but unsafe-inline should also be pretty safe if your site is just a static site served over https and you aren't rendering users' inputs. |
Beta Was this translation helpful? Give feedback.
-
|
I just wanted to say thanks to Divyansh for all the work and support. In some cases the "gods" from the security team are forcing strict CSP headers, as pages generated by vitepress can be served from the same domain as the main web application. The |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the sponsorship. For the inline scripts (light-dark and mac check), depending on your flow, you can use try one of these: Add nonce with something like this (https://vitepress.dev/reference/site-config#transformhtml, from discord - https://discord.com/channels/325477692906536972/790509637598314527/1377639984412102686): transformHtml(code) {
return code
.replace(
'<script id="check-dark-mode"',
`<script id="check-dark-mode" nonce="foo"` // update this
)
.replace(
'<script id="check-mac-os"',
`<script id="check-mac-os" nonce="bar"`
)
},Mostly, those inline scripts will remain static. But some change in minifying logic or esbuild/oxc might impact the variable names. So you can do something like this to force the scripts: .replace(
/<script id="check-dark-mode">.*?<\/script>/,
'<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>'
)
// same for the other oneAnd use static hash in CSP headers: If you're deploying to something like Netlify, or your infra supports reading headers from a file while creating deploys, you can emit this dynamically too. Inside |
Beta Was this translation helpful? Give feedback.
-
|
The offending inline style is here ... line 19 vitepress/src/client/app/components/Content.ts Lines 12 to 20 in 23541b4 I can fix it with an hash...but it would be nice if we could have this in the CSS file |
Beta Was this translation helpful? Give feedback.
-
|
Ah, you were talking about styles. I didn't read carefully. Hmm, inline styles is bit tricky. We also have You can't calculate their hashes because those will update in runtime. But at least they have approximate fallbacks defined in CSS. For content thing, try: // .vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
contentProps: { class: 'MainContent' }
})/* .vitepress/theme/styles.css */
.MainContent {
position: relative;
}// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import './styles.css'
export default DefaultThemehttps://vitepress.dev/guide/extending-default-theme#customizing-css |
Beta Was this translation helpful? Give feedback.
-
|
The scripts part is solved. For now I am deploying as a test with Netlify . But I would like to push
|
Beta Was this translation helpful? Give feedback.
First two are needed to prevent flashes on initial load. The third one can be moved to separate chunk by setting
metaChunk: truein .vitepress/config.