通过webpack插件自动化生成CSP策略,防止XSS
npm i -S soul-js-hash
在入口的index.html文件加上
<% if(htmlWebpackPlugin.options.isProduction) { %>
<meta http-equiv="Content-Security-Policy" content="{{CSP-SCRIPT-SRC-HASH}}">
<% } %>
全index.html文件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% if(htmlWebpackPlugin.options.isProduction) { %>
<meta http-equiv="Content-Security-Policy" content="{{CSP-SCRIPT-SRC-HASH}}">
<% } %>
</head>
<body>
<div id="app"></div>
</body>
</html>
vue.config.js
const { defineConfig } = require('@vue/cli-service')
const HashPlugin = require('soul-js-hash')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack:{
plugins: [
new HashPlugin()
]
}
})
new HashPlugin(csp_option)
//如果没有传csp_option,参数默认值是
const csp_option = {
'script-src': 'self {{CSP-SCRIPT-SRC-HASH}}'
}
// {{CSP-SCRIPT-SRC-HASH}} 是js hash的占位符,目前只提供js hash的计算,当然你也可以进行其他的csp配置,具体如何配置,请自行查阅csp