How to preload script using integrity and crossorigin

Question

I wish to use preload for my Jquery libs and use the following code.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script" integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
  integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous"></script>

However this always generates the following warnings within chrome.

1. A preload for 'https://code.jquery.com/jquery-3.4.0.slim.min.js' is found, but is not used due to an integrity mismatch.

2. The resource https://code.jquery.com/jquery-3.4.0.slim.min.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The code below will work fine if I use the standard implementation.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script">

<script>
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
</script>

So my question is can I preload external libs and use the crossorigin and integrity (Subresource Integrity) as well?

Thanks

Answer 1

Digging this subject up to add some current behaviour that were not mentioned before.

Currently, as of the end of 2020, to preload a resource that requires integrity and crossorigin attributes, both attributes MUST be specified in both tags, <link> and <script>, and MUST be matching, to be effectively preloaded.

---

example

<link rel='preload' href='http://...' as='style' integrity='sha...' crossorigin='anonymous' />
<link rel='stylesheet' id='bootstrap_css-css'  href='http://...' type='text/css' integrity='sha...' crossorigin='anonymous' type='text/css' media='all' />

If this not followed, a warning will be issued in the console:

The resource http://... was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate "as" value and it is preloaded intentionally.

Answer 2

This is now supported by several browsers. Chromium issue mentioned in other answer is currently closed. Firefox and Safari also seems to support this feature.