What are the integrity and crossorigin attributes?

html cross-domain cors subresource-integrity

143,964

Solution 1

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

Solution 2

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: <ORIGIN> 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:

<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
        crossorigin="use-credentials"></script>

A browser can cancel the request if crossorigin incorrectly set.

Links

Blogs

Solution 3

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/

143,964

Author by

Admin

Updated on July 08, 2022

Comments

Admin almost 2 years

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?

Tomas Gonzalez over 8 years

Just used w3c html validator and got this message when using "integrity" attribute: Attribute integrity not allowed on element link at this point.
Josh_at_Savings_Champion over 8 years

@TomasGonzalez I think you can safely assume that the w3c tool hasn't been updated to include SRI support just yet
jonathanKingston over 8 years

Yup CSP is still really new, only Chrome beta supports this protection right now with Firefox coming really soon. No browser falls over with unknown attributes that I know of; so the W3C validator should be only a guide rather than the truth.
jonathanKingston over 8 years

FYI: Filed a bug with the validator too: github.com/validator/validator/issues/151
sideshowbarker over 8 years

Maintainer of the W3C HTML Checker (aka validator) here. Yeah, sorry, the checker doesn’t yet know anything about the integrity attribute. But I’ll be adding support for it soon, as requested in github.com/validator/validator/issues/151. So you may want to subscribe to that issue to get a notification when it lands.
Albert Wiersch almost 8 years

OnlineWebCheck.com supports the integrity attribute (I'm the maintainer of that checker).
JacobLett over 6 years

What happens if you choose not to include those?
Heimi over 6 years

You lack the security measurements mentioned above.
user875234 about 6 years

Who does the checking? Bootstrap JavaScript? If I'm only using bootstraps's css file and not their JavaScript file do those attributes do anything?
Emiel Koning about 6 years

Very useful answer!
Anh Tran about 6 years

Thanks for your answer. I love technical details!
David Spector almost 5 years

Which browsers currently honor 'integrity' by doing the calculation and refusing to load invalid resources? The link above for 'integrity' states that it is not yet implemented in a browser, but that file is several years old.
David Spector almost 5 years

Answering my own question, page developer.mozilla.org/en-US/docs/Web/Security/… indicates that all modern browsers except Internet Explorer (of course) implement 'integrity'.
choz about 4 years

How can we tell if the integrity of the file is the one that's not yet manipulated? Any advice?
halfer almost 4 years

@yon.fun: please don't suggest edits to add your own links. We're pretty sensitive to possible spam here, even if your content is valuable.
Void almost 4 years

Should you include SRI for resources that are on the same origin, and if yes, why?