Content Security Policy: Should a CSP contain hashes for external scripts?

What I am unsure about

I am wondering if the Content-Security-Policy header should/can contain hashes for external JavaScript files (aka, tags with a src attribute <script src="foo.js"></script>).

What I have tried

In Chromium based browsers and Mozilla Firefox, my external scripts are blocked, even when including all of those scripts’ hashes in the Content-Security-Policy header:

script-src 'sha256-Dxn+cR58x5haydQ1S/lvgMBLRahDCNxsakeubYGDJD0=' 'sha256-WiXxwK6878G5m29xzbpoI/6mHv7Otw1epCuigPupglA=' 'sha256-B5Xt87JgO41oTYQ2MabCc4UUuiVbcT/ingSs4HJHt1U=';

I have also tried

script-src 'strict-dynamic' 'sha256-Dxn+cR58x5haydQ1S/lvgMBLRahDCNxsakeubYGDJD0=' 'sha256-WiXxwK6878G5m29xzbpoI/6mHv7Otw1epCuigPupglA=' 'sha256-B5Xt87JgO41oTYQ2MabCc4UUuiVbcT/ingSs4HJHt1U=';

My HTML containing the external scripts:

...

        <!-- These are Webpack generated scripts built with the Angular CLI -->
        <script src="runtime.78e54b12002286474edb.js"></script>
        <script src="polyfills.73e66b75888e8a86f685.js"></script>
        <script src="main.4deb3029247017da53f3.js"></script>
    </body>
</html>

What I expect to happen

I am expecting the browser to hash the contents of external JavaScript files, and compare those hashes with those found in the Content-Security-Policy header’s script-src attribute (thus verifying the integrity of any delivered JavaScript files against what my server has whitelisted in the CSP header).

CSP Spec on hashing external JS

Mozilla states in their script-src documentation. Notice the last sentence

From: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

‘<hash-algorithm>-<base64-value>’

A sha256, sha384 or sha512 hash of scripts or styles. The use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. When generating the hash, don’t include the or tags and note that capitalization and whitespace matter, including leading or trailing whitespace. See unsafe inline script for an example. In CSP 2.0, this is applied only to inline scripts. CSP 3.0 allows it in the case of script-src for external scripts.

Answer

MDN documentation you referred is just popular information therefore it does not contain details.

According to CSP3 spec, <script> elements would be allowed to execute only if they contain integrity metadata that matches the hashes in the policy.

Add an integrity= attribute into script tags like that:

<!-- These are Webpack generated scripts built with the Angular CLI -->
<script src="runtime.78e54b12002286474edb.js" integrity="sha256-...."></script>
<script src="polyfills.73e66b75888e8a86f685.js" integrity="sha256-...."></script>
<script src="main.4deb3029247017da53f3.js" integrity="sha256-...."></script>

and 'hash-value' will begin to work. But, unfortunately, in Chrome only. Safari and Firefox did not implement this yet.