Can I load a CDN file from Chrome devtools console?
Background:
- I get this question when I am experimenting with web3 javascript from console.
- This question is about the console usage.
I have a web3 java script below. You don't need to read the whole script as my question is only about the first CDN script.
<!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/web3@1.8.2/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>
The HTML and inside script work well in browser. Now I want to experiment it from Chrome Devtools Console, line by line. I stumped at the first task, how to load that CDN script from the console?
<script src="https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js"></script>
First, I tried the following (suggested by How to include JavaScript file or library in Chrome console?)
> document.head.innerHTML += '<script src="https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js"></script>'
error:
VM70:1 This document requires 'TrustedHTML' assignment.
Then I tried the solution in the above link, in console,
> 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);
error:
VM216:3 This document requires 'TrustedScriptURL' assignment.
The mentioned post was 11 years ago, likely security feature changed and caused the error.
At last, I tried the following in console (suggested by getting error `This document requires 'TrustedHTML' assignment` in chrome). Now I use trustedTypes hoping to rid the security/policy error.
> 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);
error:
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".
The mentioned post was recent but was not done from console. That may be why it didn't help me.
Is it possible to load CDN from devtools console?
- I tried to understand how devtools works, comparing to the normal browser navigation.
- The html page didn't have any special security or policy settings, but worked.
- Why I cannot do it from console?
- I have searched StackOverflow and other places but none of the search result are for console.
Environment:
- windows 10, latest patch
- chrome latest, Version 110.0.5481.178 (Official Build) (64-bit)
