What are the integrity and crossorigin attributes?

Question

Bootstrapcdn recently changed their links. It now looks like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 

rel="stylesheet" 

integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 

crossorigin="anonymous">

What do the integrity and crossorigin attributes mean? How do they affect the loading of the stylesheet?

Answer 1

Both attributes have been added to Bootstrap CDN to implement Subresource Integrity.

For more details on Subresource Integrity refer to this:

https://www.w3.org/TR/SRI/

Subresource Integrity is used to define a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation 

Refer to this https://bugs.chromium.org/p/chromium/issues/detail?id=355467

An integrity attribute is used to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

Crossorigin attribute is present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'.

For more info on cross-origin refer to this:

https://www.npmjs.com/package/ember-cli-sri#crossorigin-attribute

For more detail on Bootstrap CDNs implementation refer to this:

https://github.com/MaxCDN/bootstrapcdn/issues/555