Vue(Vite)設定Content-Security-Policy支援

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  `,
      },
     
       
      }
    }
  }
})