能否在Chrome DevTools控制台加载CDN脚本？权限报错求助

问题描述 #

在Chrome DevTools控制台实验web3 JavaScript时，遇到加载CDN脚本的问题：
有一段可正常运行的web3相关HTML代码，通过CDN引入了web3@1.8.2脚本，但在控制台逐行调试时，加载脚本的操作多次失败：

• 修改document.head.innerHTML添加script标签，报错：VM70:1 This document requires 'TrustedHTML' assignment.
• 通过createElement创建script标签并添加到head，报错：VM216:3 This document requires 'TrustedScriptURL' assignment.
• 使用trustedTypes创建策略尝试绕过限制，报错：Refused to create a TrustedTypePolicy named 'forceInner' because it violates the following Content Security Policy directive: "trusted-types parse-html-subset sanitize-inner-html static-types lottie-worker-script-loader webui-test-script webui-test-html print-preview-plugin-loader polymer-html-literal polymer-template-event-attribute-policy".

相关参考内容无法解决问题，疑问如下：

1. 是否可以从Chrome DevTools控制台加载CDN脚本？
2. 为何正常页面无需特殊配置即可运行，控制台却不行？

环境：Windows 10（最新补丁），Chrome 110.0.5481.178（官方版64位）

问题原因 #

当前页面的Content Security Policy (CSP) 配置对控制台操作施加了更严格的限制：

• 正常页面加载CDN脚本属于页面预设的资源引入流程，符合页面本身的CSP规则（比如允许该CDN域名的资源加载）；
• 控制台执行脚本属于"注入式操作"，会触发Trusted Types和CSP的严格校验，尤其是当页面配置了trusted-types指令且只允许指定策略名称时，无法自定义新的TrustedTypePolicy。

可行解决方案 #

1. 使用DevTools代码片段(Snippets) #

• 打开DevTools → 切换到Sources面板 → 左侧选择Snippets → 新建片段
• 写入加载脚本的代码并右键运行：

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js';
  document.head.appendChild(script);
  

  片段执行的权限高于控制台直接输入，可绕过当前CSP限制。

2. 临时禁用页面CSP（仅测试用） #

• 打开DevTools设置（右上角齿轮图标）→ 进入Experiments → 勾选Disable Content Security Policy
• 刷新页面后，控制台即可正常加载CDN资源。注意：仅适合本地测试，切勿在生产页面使用。

3. 使用书签小工具(Bookmarklet) #

• 新建书签，将URL设置为以下代码：

  javascript:(function(){const s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js';document.head.appendChild(s);})();
  

• 打开目标页面后点击该书签，即可注入web3脚本，执行权限高于控制台直接输入。

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