使用Puppeteer的addScriptTag注入jQuery报TrustedScript错误如何解决

你遇到的This document requires 'TrustedScript' assignment报错，是目标站点开启了*可信类型（Trusted Types）*的内容安全防护机制，该机制会禁止所有未经过可信策略校验的动态脚本插入操作，因此Puppeteer原生的page.addScriptTag方法会被拦截。以下是两种可行的解决方案：

方案1：全局绕过CSP校验 #

启动Puppeteer时添加对应配置禁用安全校验，直接绕过可信类型拦截，适合不需要保留站点原有CSP的场景：

const browser = await puppeteer.launch({
  headless: "new",
  args: [
    "--disable-web-security",
    "--disable-features=IsolateOrigins,site-per-process,TrustedTypes"
  ]
});
const page = await browser.newPage();
// 开启CSP绕过配置
await page.setBypassCSP(true);

// 之后就可以正常使用addScriptTag注入jQuery
await page.addScriptTag({ url: "https://code.jquery.com/jquery-3.2.1.min.js" });

方案2：上下文内构造可信策略注入 #

如果需要保留站点原有CSP规则，可以在页面执行上下文内自定义可信策略完成注入，不会影响站点原有安全配置：

注入远程jQuery代码示例： #

await page.evaluate(async () => {
  // 创建自定义可信策略
  const injectPolicy = window.trustedTypes?.createPolicy("injectPolicy", {
    createScriptURL: (url) => url
  });
  // 构造脚本标签
  const script = document.createElement("script");
  script.src = injectPolicy?.createScriptURL("https://code.jquery.com/jquery-3.2.1.min.js") || "https://code.jquery.com/jquery-3.2.1.min.js";
  // 等待脚本加载完成
  await new Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
});

注入本地jQuery内容示例： #

// jquery变量为你本地提前读取的jQuery文件内容
await page.evaluate(async (jqueryContent) => {
  const injectPolicy = window.trustedTypes?.createPolicy("injectPolicy", {
    createScript: (content) => content
  });
  const script = document.createElement("script");
  script.textContent = injectPolicy?.createScript(jqueryContent) || jqueryContent;
  document.head.appendChild(script);
}, jquery);

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