Disable the use of inline scripts in the vitepress build

[tsposato]

Is there a way to stop vitepress build docs from using inline scripts?
I've tried pretty much everything to no avail.

Here is my config:

import { defineConfig } from 'vitepress'
import { fileURLToPath, URL } from 'node:url'
import { SidebarItems } from "./custom-config/sidebar";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: 'My Documentation',
  description: 'My Documentation',
  cleanUrls: true,
  head: [['link', { rel: 'icon', href: './My-icon.ico' }]],
  vite: {
    resolve: {
      alias: [
        {
          find: /^.*\/VPNavBar\.vue$/,
          replacement: fileURLToPath(
            new URL('../components/CustomHeader.vue', import.meta.url)
          )
        },
        {
          find: /^.*\/VPFooter\.vue$/,
          replacement: fileURLToPath(
            new URL('../components/FmFooter.vue', import.meta.url)
          )
        }
      ]
    }
  },
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config,
    siteTitle: false,
    sidebar: SidebarItems
  }
})

[brc-dd]

Can you specify which "inline scripts" are you exactly referring to?

[tsposato]

There are these scripts in a number of the files built:

✔ ~/IdeaProjects/harbour/ui/docs [new_ui_development|✚ 1] 23:40 
$ grep -r "<script" .vitepress/dist | grep -v "src=" | wc -l
75

Here is an example that looks like it is in every html file that is built:

.vitepress/dist/index.html:    <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>
.vitepress/dist/index.html:    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
.vitepress/dist/index.html:    <script>window.__VP_HASH_MAP__=JSON.parse("{\"account-settings.md\":\"C4LDqaLQ\",\"bulk-address-import.md\":\"Bet1jMMs\",\"bulk-consignment-import.md\":\"AsCSIS1h\",\"carrier-accounts.md\":\"BsVITgHt\",\"carrier-zones.md\":\"UfBhMgNE\",\"carriers.md\":\"DMk3Yw7F\",\"client-carrier-accounts.md\":\"BR0FlxrO\",\"client-reporting.md\":\"DXi1k-DF\",\"clients.md\":\"CPQ35263\",\"consignments-list.md\":\"BNSbmpEJ\",\"consignments.md\":\"CwC1YAv0\",\"create-manifests.md\":\"Cxjprdpx\",\"customer-settings.md\":\"ONPP2Ty8\",\"index.md\":\"t5DVCgBr\",\"manifests-list.md\":\"CJDIUv3v\",\"privacy-policy.md\":\"BLVZeSWf\",\"quick-quote.md\":\"CEit1KvS\",\"report-settings.md\":\"Cos7wf9T\",\"settings.md\":\"DForNUIE\",\"sugar-crm.md\":\"8mLV6JtE\",\"terms-and-conditions.md\":\"D_XkrSAT\",\"track-trace.md\":\"Bzkbx24Z\",\"transit-times.md\":\"DOHd52_y\",\"user-list.md\":\"DOLzJDdU\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"My Documentation\",\"description\":\"My Documentation\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":false,\"sidebar\":[{\"text\":\"Consignments\",\"collapsed\":false,\"items\":[{\"text\":\"How to create consignments?\",\"link\":\"/consignments\"},{\"text\":\"Bulk Address Import\",\"link\":\"/bulk-address-import\"},{\"text\":\"Bulk Consignment Import\",\"link\":\"/bulk-consignment-import\"},{\"text\":\"Consignments List\",\"link\":\"/consignments-list\"},{\"text\":\"Quick Quote\",\"link\":\"/quick-quote\"}]},{\"text\":\"Manifests\",\"collapsed\":false,\"items\":[{\"text\":\"How to manifest consignments?\",\"link\":\"/create-manifests\"},{\"text\":\"Manifests List\",\"link\":\"/manifests-list\"}]},{\"text\":\"Tracking\",\"collapsed\":false,\"items\":[{\"text\":\"Track & Trace\",\"link\":\"/track-trace\"}]},{\"text\":\"Transit Times\",\"collapsed\":false,\"items\":[{\"text\":\"Transit Times\",\"link\":\"/transit-times\"}]},{\"text\":\"Reporting\",\"collapsed\":false,\"items\":[{\"text\":\"Client Reporting\",\"link\":\"/client-reporting\"},{\"text\":\"Report Settings\",\"link\":\"/report-settings\"}]},{\"text\":\"Client & Customer Administration\",\"collapsed\":false,\"items\":[{\"text\":\"Clients\",\"link\":\"/clients\"},{\"text\":\"Users List\",\"link\":\"/user-list\"},{\"text\":\"Settings\",\"link\":\"/settings\"}]},{\"text\":\"Customer Administration\",\"collapsed\":false,\"items\":[{\"text\":\"Carriers\",\"link\":\"/carriers\"},{\"text\":\"Client Carrier Accounts\",\"link\":\"/client-carrier-accounts\"},{\"text\":\"Customer Carrier Accounts\",\"link\":\"/carrier-accounts\"},{\"text\":\"Carrier Zones\",\"link\":\"/carrier-zones\"},{\"text\":\"Sugar CRM\",\"link\":\"/sugar-crm\"},{\"text\":\"Settings\",\"link\":\"/customer-settings\"}]},{\"text\":\"Account Settings\",\"collapsed\":false,\"items\":[{\"text\":\"Preferences, Password & Logout\",\"link\":\"/account-settings\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>

[brc-dd]

First two are needed to prevent flashes on initial load. The third one can be moved to separate chunk by setting metaChunk: true in .vitepress/config.

[tsposato]

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.
Is there something else I need to check?

import { defineConfig } from 'vitepress'
import { fileURLToPath, URL } from 'node:url'
import { SidebarItems } from "./custom-config/sidebar";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  build: {
    metaChunk: true
  },
  title: 'My Documentation',
  description: 'My Documentation',
  cleanUrls: true,
  head: [['link', { rel: 'icon', href: './My-icon.ico' }]],
  vite: {
    resolve: {
      alias: [
        {
          find: /^.*\/VPNavBar\.vue$/,
          replacement: fileURLToPath(
            new URL('../components/CustomHeader.vue', import.meta.url)
          )
        },
        {
          find: /^.*\/VPFooter\.vue$/,
          replacement: fileURLToPath(
            new URL('../components/FmFooter.vue', import.meta.url)
          )
        }
      ]
    }
  },
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config,
    siteTitle: false,
    sidebar: SidebarItems
  }
})

[brc-dd]

It should be outside build. There is no build config in vitepress.

[tsposato]

That worked, thanks! Is there a certain CSP you recommend to use with vitepress?
We externalise our CSP headers in a CloudFront function and I originally found the issue due to this error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src"

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?

[brc-dd]

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.