Search code examples
javascriptgoogle-chrome-devtoolscdn

Chrome devtools - can I load a CDN file from console

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/[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>

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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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)
Solution

  • I found some clue from @jsejcksn's comment in the open post.

    If I used New Tab's console, I would got errors in my open post. enter image description here

    But If I go to google.com, then open devtools console, all worked out. enter image description here

    In particular, I tested

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

    and

    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);

    both worked.