姜臀臀 2024-04-18 10:44 采纳率: 0%
浏览 6
已结题

求大家看看Nonce如何配置

项目的CSP安全策略一直无法通过，script-src不能使用'unsafe-inline'的话页面就无法加载JS
我现在开发的项目是使用若依的前后端分离框架，Srpingboot+vue;用nginx部署；
在网上查找的办法是使用nonce，但是我一直无法实现
请帮帮忙，教教我
我的nginx配置：

img

vue.config.js配置：

img

前端报错：

img


我可以明显看到 vue打包生成的js文件在script标签中没有nonce怎么办？

img

  • 写回答

10条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-18 10:44
    关注

    引自免费微信小程序：皆我百晓生

    在您的项目中，您正在尝试解决CSP（Content Security Policy）策略导致的问题，特别是针对script-src指令不允许使用'unsafe-inline'的情况。您希望通过引入nonce值来允许特定的内联脚本执行。您已经提供了Nginx配置、vue.config.js配置以及前端HTML示例。根据您提供的信息，我发现了以下几个问题，并提供相应的解决方案：

    1. Nginx配置错误: 在您提供的Nginx配置中，Content-Security-Policy头部设置有误，存在拼写错误和重复属性。以下是修正后的配置：

      add_header Content-Security-Policy "default-src 'none';
                                script-src 'self' 'nonce-1kj9087v2d3u9d';
                                style-src 'self' 'unsafe-inline';
                                object-src 'self';
                                img-src 'self' data:;
                                connect-src 'self';
                                font-src 'self';
                                media-src 'self'";

      注意：请确保nonce-1kj9087v2d3u9d是您实际使用的随机生成的nonce值。每次服务器响应时应动态生成一个唯一的nonce值。

    2. Vue CLI配置: 您提供的vue.config.js配置片段似乎不完整，缺少与nonce生成相关的部分。您可以使用webpack.DefinePlugin来注入环境变量作为nonce值。在vue.config.js中添加以下代码：

      const crypto = require('crypto');

module.exports = {
  // ... 其他配置项

  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        __NONCE__: JSON.stringify(crypto.randomBytes(16).toString('base64'))
      })
    ]
  },

  chainWebpack(config) {
    config.plugin('html').tap((args) => {
      args[0].nonceAttribute = '__NONCE__';
      return args;
    });
  }
};

      这样会将随机生成的nonce值注入到每个HTML页面的nonce属性中。

    3. 前端HTML模板: 您提到Vue打包生成的JS文件在<script>标签中没有添加nonce属性。由于您已使用上述vue.config.js配置，Vue CLI的html-webpack-plugin应该会自动为所有内联和外链的<script>标签添加nonce属性。确保您的public/index.html模板中包含<script>标签但不含nonce属性，例如：

      <!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <div id="app">...</div>
    <!-- Vue CLI会自动为这些script标签添加nonce属性 -->
    <script src="/static/js/chunk-elementUI.c0621ae3.js"></script>
    <script src="/static/js/chunk-libs.4a05af7b.js"></script>
    <script src="/static/js/app.f36eb63f.js"></script>
  </body>
</html>

    4. 内联脚本: 如果您需要在HTML模板中使用内联脚本，确保它们带有nonce属性，并且与Nginx配置中的nonce值相匹配。例如：

      <script nonce="__NONCE__">
  alert("test");
</script>

    按照上述步骤调整配置后，重新构建并部署项目。这应该能解决CSP策略限制内联脚本的问题，同时确保script-src不依赖于'unsafe-inline'。如果您仍有问题，请检查浏览器开发者工具的Console面板，查看与CSP相关的错误消息以进行进一步排查。

    评论 编辑记录

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月18日
  • 赞助了问题酬金15元 4月18日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分