首页
前端开发
Webpack
csp-html-webpack-plugin与HtmlWebpackPlugin集成的CSP插件

csp-html-webpack-plugin与HtmlWebpackPlugin集成的CSP插件

0 次浏览 0 条评论
zip
zip

Webpack 项目的 CSP 策略配置，csp-html-webpack-plugin真是个省心的小工具。配合html-webpack-plugin用，可以自动给你的 HTML 加上Content-Security-Policy标签。它会把内联的 JS、CSS 都自动加上散列值，策略配置写起来省事多了。

直接用npm i --save-dev csp-html-webpack-plugin装好之后，在你的 webpack 配置里加几行代码就搞定，基本不折腾。像下面这样：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');


plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new CspHtmlWebpackPlugin({
    'default-src': "'self'",
    'script-src': ["'self'"]
  }, {
    enabled: true,
    hashingMethod: 'sha256'
  })
]

你只要把 CSP 规则写好，插件就会自动给内联脚本生成sha256散列，不用你手动算。挺适合那些对安全有要求、又不想太折腾的场景。

小建议：配合Webpack 模板或者vue-webpack-starter用，体验更顺滑。如果你有用内联 CSS 或者 JS，记得开启 hash 生成，不然策略会拦。

如果你在做企业级前端、涉及权限或者数据安全的需求，这插件可以省不少事，配置一次，安心不少。

zip
csp-html-webpack-plugin-master.zip 预估大小：26个文件
folder
csp-html-webpack-plugin-master 文件夹
file
.gitignore 29B
file
package.json 2KB
file
package-lock.json 303KB
file
plugin.jest.js 37KB
file
.travis.yml 121B
file
plugin.js 12KB
file
jest.config.js 192B
folder
test-utils 文件夹
file
webpack-helpers.js 3KB
folder
fixtures 文件夹
file
with-no-content-attr.html 223B
file
async.js 26B
file
common.js 27B
file
with-script-and-style.html 508B
file
index.js 160B
file
with-escaped-html.html 270B
file
with-noscript-tags.html 345B
file
with-xhtml.html 363B
file
with-no-meta-tag.html 175B
file
with-nothing.html 234B
file
LICENSE 1KB
folder
.github 文件夹
file
PULL_REQUEST_TEMPLATE.md 634B
file
ISSUE_TEMPLATE.md 1KB
file
CONTRIBUTING.md 3KB
file
.eslintrc.js 680B
file
README.md 8KB
file
.eslintignore 22B
file
.prettierrc 26B
zip 文件大小：98.53KB