vue3支援csp方法只需要設定vite.config.js :
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
// eslint-disable-next-line no-undef
const env = loadEnv(mode, process.cwd());
// this might be needed in Dev mode
const nonce = mode === "development" ? "nonce" : "{SERVER-GENERATED-NONCE}";
return {
plugins: [
vue(),
],
html: {
cspNonce: `${nonce.toString()}`
},
// eslint-disable-next-line no-undef
base: env.VITE_WORKDIR
,
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
headers: {
'Content-Security-Policy': `default-src 'self'; script-src 'self' 'nonce-${nonce.toString()}'; style-src 'nonce-${nonce.toString()}'; font-src 'self' data:; img-src 'self'; frame-src 'self';form-action none `,
},
}
}
}
})