Menu
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.
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.
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
628
Crossorigin is said to be necessary when the font files are on another server/domain yet it's necessary for preloading self-hosted font files.
The integrity attribute allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.
The crossorigin attribute sets the mode of the request to an HTTP CORS Request. Web pages often make requests to load resources on other servers. Here is where CORS comes in. A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
crossorigin attribute has only two possible values: anonymous or use-credentials . Any value other than anonymous , including empty value, will be translated to anonymous . This tag will run script without any CORS-related checking. In practice, no crossorigin attribute makes browser skip Origin HTTP header entirely.
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.
<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.
105
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
