如何将 __webpack_nonce___ 的值与我的内容安全策略相结合? [英] How do I integrate the value of __webpack_nonce___ with my Content Security Policy?

问题描述

根据我对内容安全政策的理解，nonce必须根据每个请求进行更改.这意味着(我认为)它必须在客户端运行时生成，而不是在 Webpack 配置中的构建时生成.我已经在我的应用中测试了 webpack_nonce 功能，并且效果很好.

From my understanding of Content Security Policy, the nonce has to change on every request. That means (I think) it must be generated at run-time on the client, not at build-time in the Webpack config. I've tested the webpack_nonce functionality in my app and it works great.

不幸的是，我不确定如何将在客户端运行时生成的值获取到实际的 CSP 策略中，该策略在 index.html 文件中设置为元标记(或某些等效的) 或在服务器本身上.

Unfortunately, I'm not sure how to get that value, generated at run-time on the client, to the actual CSP policy, which is either set as a meta-tag in the index.html file (or some equivalent) or on the server itself.

我想您可以在客户端上动态设置 CSP 元标记，但这似乎存在安全风险.我已经尝试过 csp-webpack-plugin，它计算文件的哈希值在构建时，然后将它们添加到 index.html.这个过程对我来说很有意义，它只是不支持我们的用例.

I suppose you could set the CSP meta-tag dynamically on the client, but that seems like a security risk. I've experimented with the csp-webpack-plugin, which calculates hashes of files at build-time and then adds them to the index.html. This process makes sense to me, it just didn't support our use case.

我只是觉得我在使用 webpack_nonce 时遗漏了一些东西.

I just feel like I'm missing something with using webpack_nonce.

推荐答案

我们能够通过让 webpack 构建我们的索引页面(例如通过 HtmlWebpackPlugin)作为模板然后动态提供它来获得动态随机数.通过这种方式，您可以将 __webpack_nonce__ 设置为像 <%=nonce%> 这样的插值表达式，并且服务器视图引擎可以在页面加载时将您的动态随机数放入.例如，如果您使用的是 express:

We were able to get a dynamic nonce by having webpack build our index page (e.g via HtmlWebpackPlugin) as a template then serving it dynamically. This way, you can set __webpack_nonce__ to an interpolation expression like <%=nonce%> and the server view engine can sub in your dynamic nonce at page-load time. For example, if you're using express:

Webpack 配置:

Webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: __dirname + '/dist/index.ejs',
    })
  ]
}

Webpack 入口点(index.js):

Webpack entry point (index.js):

__webpack_nonce__ = '<%=nonce%>';

快递应用:

// Generate dynamic nonce on each request cycle
const uuid = require('node-uuid');
app.use((req, res, next) => {
  res.locals.nonce = uuid.v4();
  next();
});

app.set('view engine', 'ejs');
app.route('/').get((req, res, next) => {
  res.render('path/to/index.ejs', { nonce: res.locals.nonce });
});

注入的 <script> 标签将附加文字属性 nonce=<%=nonce%>，然后服务器将在为您提供服务时对其进行插值页面.

The injected <script> tags will have the literal attribute nonce=<%=nonce%> appended, which the server will then interpolate when serving your page.

请注意，如果您将自定义模板与 HtmlWebpackPlugin 一起使用，您可能需要为 ejs 设置不同的插值分隔符，否则 Webpack 将在构建时而不是运行时插入 nonce 表达式.

Note that if you use a custom template with HtmlWebpackPlugin, you might want to set a different interpolation delimiter for ejs otherwise Webpack will interpolate the nonce expression at build time instead of runtime.

快递应用:

const ejs = require('ejs);
ejs.delimiter = '?'; // Means instead use __webpack_nonce__ = '<?=nonce?>'

这篇关于如何将 __webpack_nonce___ 的值与我的内容安全策略相结合?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！