为什么设置script-src后页面脚本无法运行？

敏涵 Dev 提问于 2026-02-01 17:26:30 阅读 30

安全

我在页面里写了个简单的按钮点击弹窗功能，配置CSP后突然失效了。设置了script-src只允许’self’和一个nonce，但控制台报错说阻止了内联脚本执行。代码明明加了nonce属性啊，哪里出问题了？


// HTML里的script标签

  function showAlert() {
    alert('按钮被点击了！');
  }

服务器响应头确实设置了Content-Security-Policy: “script-src ‘self’ ‘nonce-a1b2c3d4′”，但点击按钮还是报错。试过把脚本移到外部文件就正常了，但需要保留内联处理逻辑，该怎么解决？

我来解答赞 3 收藏

反馈

2 条解答

UX莉娟 Lv1

你这个问题挺常见的，CSP配置确实容易踩坑。简单说下原因：虽然你设置了nonce，但内联脚本要想生效，必须满足两个条件——不仅要有nonce属性，而且这个属性的值要和响应头里的nonce完全一致。

你现在的写法是直接把脚本放在HTML里，这种方式没法动态添加nonce属性。解决方法是用WordPress钩子函数来生成带nonce的脚本标签。

试试这个代码：

function add_nonce_to_scripts($tag, $handle) {

    if (strpos($tag, '
        $nonce = wp_create_nonce('csp_nonce');

        $tag = str_replace('
    }

    return $tag;

}

add_filter('script_loader_tag', 'add_nonce_to_scripts', 10, 2);



// 同时确保CSP头部正确设置

function set_csp_header() {

    $nonce = wp_create_nonce('csp_nonce');

    header("Content-Security-Policy: script-src 'self' 'nonce-$nonce';");

}

add_action('send_headers', 'set_csp_header');

这样WordPress会自动给每个