添加随机Nonce的CSP阻止jQuery运行，请求排查解决

环境与配置 #

已为响应添加带随机Nonce的内容安全策略：

Content-Security-Policy: script-src 'nonce-PWLxo3xnlnYSljtj87674pq9dK3CkDz/2n/Vzw4N1c0=' 'self'

报错信息 #

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'nonce-PWLxo3xnlnYSljtj87674pq9dK3CkDz/2n/Vzw4N1c0=' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

排查过程 #

• 开发者工具指向jQuery中target.appendChild( elem );代码，该代码属于append函数：

append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
},

• Safari断点先后停在以下代码行：

  a.querySelectorAll("\\\f");
  el.querySelectorAll( "*,:x" );
  

  随后停在matches.call()处：

  if ( ( support.matchesSelector = rnative.test( ( matches = docElem.matches ||
                  docElem.webkitMatchesSelector ||
                  docElem.mozMatchesSelector ||
                  docElem.oMatchesSelector ||
                  docElem.msMatchesSelector ) ) ) ) {
  
                  assert( function( el ) {
  
                      // Check to see if it's possible to do matchesSelector
                      // on a disconnected node (IE 9)
                      support.disconnectedMatch = matches.call( el, "*" );
  
                      // This should fail with an exception
                      // Gecko does not error, returns false instead
                      matches.call( el, "[s!='']:x" );
                      rbuggyMatches.push( "!=", pseudos );
                  } );
              }
  

  最后停在fullReload函数：

  function fullReload() {
    window.location = window.location.pathname
  }
  

• 困惑点：jQuery是外部脚本，无法理解为何会被CSP阻止。

原因分析 #

1. 报错核心是JavaScript URL执行：错误信息明确指向"JavaScript URL"，不是外部jQuery文件本身违规，而是页面中存在javascript:伪协议的代码执行（比如内联事件属性、window.location = 'javascript:...'这类操作）。
2. jQuery代码的误导性指向：开发者工具定位到append函数，是因为执行到此处时插入了包含JavaScript URL的DOM元素，触发CSP检测，而非jQuery自身代码违反策略。
3. Safari断点的干扰项：jQuery的matches.call是内部兼容性检测代码，fullReload中的跳转本身合规，都和当前CSP报错无关。

解决方法 #

• 定位并移除JavaScript URL：搜索项目中所有javascript:开头的代码，比如：
  • 内联事件属性：<button onclick="javascript:doSomething()">
  • 脚本中的跳转逻辑：window.location = 'javascript:xxx'
    这类代码属于CSP定义的inline执行范畴，无法通过nonce或hash允许（除非添加unsafe-hashes，不推荐），建议替换为标准事件绑定方式。
• 确认jQuery脚本的nonce配置：虽然报错根源不在jQuery，但要确保引入jQuery的<script>标签正确添加了对应nonce属性：

  <script nonce="PWLxo3xnlnYSljtj87674pq9dK3CkDz/2n/Vzw4N1c0=" src="jquery.js"></script>
  

• 临时调试验证：如果暂时找不到JavaScript URL，可以临时在CSP的script-src中添加'unsafe-inline'，验证是否解决问题，确认根源后再移除该配置。

内容的提问来源于stack exchange，提问作者nasch