Chrome devtools - 我可以从控制台加载 CDN 文件吗

Question

我可以从 Chrome devtools 控制台加载 CDN 文件吗？

背景：

当我从控制台试验 web3 javascript 时，我得到了这个问题。
这个问题是关于控制台的使用。

我下面有一个 web3 java 脚本。您不需要阅读整个脚本，因为我的问题只是关于第一个 CDN 脚本。

<!DOCTYPE html>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <html>
    <head>
        <title>Using web3 API with MetaMask</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
        <script>
            window.addEventListener('load', function () {
                if (window.ethereum) {
                    window.web3 = new Web3(ethereum);
                    ethereum.request({ method: 'eth_requestAccounts' })
                        .then(() => {
                            console.log("Ethereum enabled");
    
                            web3.eth.getAccounts(function (err, acc) {
                                if (err != null) {
                                    self.setStatus("There was an error fetching your accounts");
                                    return;
                                }
                                if (acc.length > 0) {
                                    console.log(acc);
                                }
                            });
                        })
                        .catch(() => {
                            console.warn('User didn\'t allow access to accounts.');
                            waitLogin();
                        });
                } else {
                    console.log("Non-Ethereum browser detected. You should consider installing MetaMask.");
                }
            });
        </script>
    </head>
    </html>

HTML 和内部脚本在浏览器中运行良好。现在我想从 Chrome Devtools 控制台逐行试验它。我对第一个任务感到困惑，如何从控制台加载该 CDN 脚本？

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

首先，我尝试了以下方法（由 How to include JavaScript file or library in Chrome console? 建议）

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

错误：

VM70:1 This document requires 'TrustedHTML' assignment.

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

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

错误：

VM216:3 This document requires 'TrustedScriptURL' assignment.

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

最后，我在控制台中尝试了以下操作（由 getting error `This document requires 'TrustedHTML' assignment` in chrome 提示）。现在我使用 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/[email protected]/dist/web3.min.js';
escapeHTMLPolicy.head.appendChild(script);

错误：

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".

提到的帖子是最近的，但不是从控制台完成的。这可能就是它对我没有帮助的原因。

是否可以从 devtools 控制台加载 CDN？

我试图了解 devtools 是如何工作的，与正常的相比浏览器导航。
html 页面没有任何特殊的安全或策略设置，但有效。
为什么我不能从控制台做到这一点？
我搜索了 StackOverflow 和其他地方，但没有一个搜索结果是针对控制台的。

环境：

windows 10，最新补丁
chrome 最新版本 110.0.5481.178（正式版）（64 位）

Answer 1

我从@jsejcksn 在公开帖子中的评论中找到了一些线索。

如果我使用 New Tab 的控制台，我打开的帖子会出错。

但是如果我去 google.com，然后打开 devtools 控制台，一切都解决了。

特别是，我测试了

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

和

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

都有效。

Chrome devtools - 我可以从控制台加载 CDN 文件吗

问题描述投票：0回答：1

1个回答

最新问题

Chrome devtools - 我可以从控制台加载 CDN 文件吗

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1