Subresource Integrity and Preload

explaination

This demo page is help you understand behavior of preload and integrity resources.

You should be able to use querystring to control whether SRI is provided in resources.

• integrity=none to set integrity for neither script nor stylesheet
• integrity=script to set integrity for only script
• intergity=style to set integrity for only stylesheet

You should be able to see warning in Chrome's console when preload resources are not used. This will happen when integrity is provided as attribute in resource.

According to this issue, Chrome is having difficulty dealing with preload resources loaded with SRI. To summerize, Chrome compiled preload resource and discard the raw bytes, hence it's not possible to calculate the hash to validating subresource integrity later when resource is actually required.

Please notice that cache might play a role here. Though Chrome puts warning in console, it will not re-fetch the content unless cache is disabled in DevTool. The second time, when content is actually required, browser will simply read it from disk cache.

For other browsers, Safari does not have the same issue as Chrome does, Firefox does not support Preload feature by default. Meanwhile, if enable Preload feature in Firefox by toggling network.preload in about:config, it will have same behavior as Chrome.

Status of resources loading

• Style failed to load
• Style loaded successfully
• Script failed to load

Crossorigin

As mentioned in previous demo page, SRI comes usually with cross-domain request and requires to add crossorigin="anonymous", so that browser can read the content and calculate hash. When using resource with crossorigin given, it's also required to provide same crossorigin in preload, otherwise preloaded resource will be ignored.