Chrome Web Extension Nonce生成与传递问题技术求助

核心思路 #

Manifest.json的内容安全策略（CSP）是静态配置，无法直接使用动态生成的nonce，必须通过后台生成nonce + 动态注入页面CSP与脚本标签的方式实现。以下是具体可行方案：

方案1：动态生成带Nonce的弹窗HTML #

直接在Service Worker中生成包含nonce的弹窗HTML，避免静态HTML的限制：

// serviceworker.js
chrome.action.onClicked.addListener(async () => {
  // 生成随机nonce（使用浏览器原生加密API）
  const nonce = crypto.randomUUID();
  
  // 构造带nonce的弹窗HTML
  const popupHtml = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-${nonce}';">
      </head>
      <body>
        <h1>弹窗内容</h1>
        <!-- 内联脚本必须携带nonce属性 -->
        <script nonce="${nonce}">
          console.log("弹窗脚本正常运行");
          // 这里写你的弹窗交互逻辑
        </script>
      </body>
    </html>
  `;

  // 创建弹窗窗口
  await chrome.windows.create({
    url: `data:text/html,${encodeURIComponent(popupHtml)}`,
    type: 'popup',
    width: 350,
    height: 450
  });
});

方案2：静态弹窗HTML + 消息传递获取Nonce #

如果必须使用静态popup.html，可通过后台消息传递获取nonce，再动态配置CSP与脚本：

1. 静态popup.html #

<!DOCTYPE html>
<html>
<head>
  <!-- 基础CSP，仅允许加载初始化脚本 -->
  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none';">
</head>
<body>
  <script src="popup-init.js"></script>
</body>
</html>

2. 初始化脚本popup-init.js #

// 向后台请求nonce
chrome.runtime.sendMessage({ action: 'getNonce' }, (response) => {
  const nonce = response.nonce;
  
  // 动态更新页面CSP，添加nonce规则
  const cspMeta = document.createElement('meta');
  cspMeta.httpEquiv = 'Content-Security-Policy';
  cspMeta.content = `script-src 'nonce-${nonce}' 'self';`;
  document.head.appendChild(cspMeta);

  // 动态创建带nonce的业务脚本标签
  const businessScript = document.createElement('script');
  businessScript.nonce = nonce;
  businessScript.src = 'popup-main.js'; // 你的核心业务脚本
  document.body.appendChild(businessScript);
});

3. Service Worker处理消息 #

// serviceworker.js
let currentNonce;

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'getNonce') {
    // 每次会话生成唯一nonce，避免重复使用
    currentNonce = currentNonce || crypto.randomUUID();
    sendResponse({ nonce: currentNonce });
  }
});

Manifest.json配置注意事项 #

不要在manifest中写死nonce，只需设置基础CSP即可：

{
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "serviceworker.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none';"
  }
}

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