Chrome devtools - can I load a CDN file from console Chrome开发工具 - 我可以从控制台加载CDN文件吗

9 浏览
0 Comments

Chrome devtools - can I load a CDN file from console Chrome开发工具 - 我可以从控制台加载CDN文件吗

我可以从Chrome开发者工具控制台加载CDN文件吗？

背景：

  • 我在使用控制台实验web3 javascript时遇到了这个问题。
  • 这个问题与控制台的使用有关。

我有一个如下的web3 java脚本。

您不需要阅读整个脚本，因为我的问题只涉及第一个CDN脚本。


    
    
    
    
        使用MetaMask的web3 API

HTML和内部脚本在浏览器中工作良好。

现在我想逐行从Chrome开发者工具控制台进行实验。

我在第一个任务上遇到了困难，如何从控制台加载CDN脚本？

首先，我尝试了以下方法（建议来自在Chrome控制台中包含JavaScript文件或库的方法？）

> document.head.innerHTML += ''

错误：

VM70:1 此文档需要“TrustedHTML”分配。

然后我尝试了上面链接中的解决方案，在控制台中，

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

错误：

VM216:3 此文档需要“TrustedScriptURL”分配。

提到的帖子是11年前的，可能是由于安全功能的更改导致了错误。

最后，我在控制台中尝试了以下方法（建议来自在Chrome中出现错误`This document requires 'TrustedHTML' assignment`）。现在我使用trustedTypes希望消除安全/策略错误。

> escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", {
            createHTML: (to_escape) => to_escape
        })
var script = escapeHTMLPolicy.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js';
escapeHTMLPolicy.head.appendChild(script);

错误：

拒绝创建名为“forceInner”的TrustedTypePolicy，因为它违反了以下内容安全策略指令：“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”。

提到的帖子是最近的，但不是从控制台执行的。这可能是为什么它对我没有帮助的原因。

是否可以从开发者工具控制台加载CDN？

  • 我试图了解开发者工具如何工作，与正常的浏览器导航进行比较。
  • HTML页面没有任何特殊的安全或策略设置，但是可以正常工作。
  • 为什么我不能从控制台中做到这一点？
  • 我已经在StackOverflow和其他地方搜索过，但搜索结果中没有一个是针对控制台的。

环境：

  • windows 10，最新补丁
  • 最新版本的Chrome，版本110.0.5481.178（官方版本）（64位）
0

1 答案

0 Comments

问题的原因是在使用New Tab的控制台时，在打开的帖子中会出现错误。但是如果我打开google.com，然后打开开发者工具的控制台，一切都正常。

解决方法是测试了两种方法，都可以解决这个问题。第一种方法是将CDN文件的script标签直接添加到document.head中。代码如下：

> document.head.innerHTML += '<script src="https://cdn.jsdelivr.net/npm/web3.8.2/dist/web3.min.js"></script>'

第二种方法是使用document.createElement()方法创建一个script标签，然后将其添加到document.head中。代码如下：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/web3.8.2/dist/web3.min.js';
document.head.appendChild(script);

0