What are the integrity and crossorigin attributes

Question

Bootstrapcdn recently changed their links  It now looks like this    lt 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  gt    What do the integrity and crossorigin attributes mean  How do they affect the loading of the stylesheet

User · Answer

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

Subresource Integrity defines a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation Reference

Integrity attribute is 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'. More info on crossorigin

More detail on Bootstrap CDNs implementation

User · Answer

integrity - defines the hash value of a resource  like a checksum  that has to be matched to make the browser execute it  The hash ensures that the file was unmodified and contains expected data  This way browser will not load different  e g  malicious  resources  Imagine a situation in which your JavaScript files were hacked on the CDN  and there was no way of knowing it  The integrity attribute prevents loading content that does not match   Invalid SRI will be blocked  Chrome developer-tools   regardless of cross-origin  Below NON-CORS case when integrity attribute does not match     Integrity can be calculated using  https   www srihash org  Or typing into console  link    openssl dgst -sha384 -binary FILENAME js   openssl base64 -A   crossorigin - defines options used when the resource is loaded from a server on a different origin   See CORS  Cross-Origin Resource Sharing  here  https   developer mozilla org en-US docs Web HTTP CORS   It effectively changes HTTP requests sent by the browser  If the    crossorigin    attribute is added - it will result in adding origin   lt ORIGIN gt  key-value pair into HTTP request as shown below     crossorigin can be set to either    anonymous    or    use-credentials     Both will result in adding origin  into the request  The latter however will ensure that credentials are checked  No crossorigin attribute in the tag will result in sending a request without origin  key-value pair   Here is a case when requesting    use-credentials    from CDN    lt script          src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js          integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn           crossorigin  use-credentials  gt  lt  script gt    A browser can cancel the request if crossorigin incorrectly set     Links  - https   www w3 org TR cors   - https   tools ietf org html rfc6454  - https   developer mozilla org en-US docs Web HTML Element link   Blogs  - https   frederik-braun com using-subresource-integrity html  - https   web-security guru en web-security subresource-integrity

User · Answer

Technically  the Integrity attribute helps with just that - it enables the proper verification of the data source  That is  it merely allows the browser to verify the numbers in the right source file with the amounts requested by the source file located on the CDN server   Going a bit deeper  in case of the established encrypted hash value of this source and its checked compliance with a predefined value in the browser - the code executes  and the user request is successfully processed   Crossorigin attribute helps developers optimize the rates of CDN performance  at the same time  protecting the website code from malicious scripts   In particular  Crossorigin downloads the program code of the site in anonymous mode  without downloading cookies or performing the authentication procedure  This way  it prevents the leak of user data when you first load the site on a specific CDN server  which network fraudsters can easily replace addresses   Source  https   yon fun what-is-link-integrity-and-crossorigin

[html] What are the integrity and crossorigin attributes?

Examples related to html

Examples related to cross-domain

Examples related to cors

Examples related to subresource-integrity