What are the integrity and crossorigin attributes?

Asked 16/8, 2015 at 20:24 Answered 27/5, 2020 at 15:36

html cross-domain cors subresource-integrity

434

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?

Mcgregor answered 16/8, 2015 at 20:24 Comment(0)

275

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

Thymelaeaceous answered 17/8, 2015 at 3:15 Comment(11)

Just used w3c html validator and got this message when using "integrity" attribute: Attribute integrity not allowed on element link at this point. – Assentation 20/8, 2015 at 5:13

@TomasGonzalez I think you can safely assume that the w3c tool hasn't been updated to include SRI support just yet – Renick 21/8, 2015 at 9:19

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. – Abutter 22/8, 2015 at 18:13

FYI: Filed a bug with the validator too: github.com/validator/validator/issues/151 – Abutter 22/8, 2015 at 18:20

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. – Legroom 25/8, 2015 at 12:45

OnlineWebCheck.com supports the integrity attribute (I'm the maintainer of that checker). – Bongbongo 15/7, 2016 at 21:47

What happens if you choose not to include those? – Rhino 29/11, 2017 at 21:1

You lack the security measurements mentioned above. – Minuscule 10/1, 2018 at 6:42

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? – Pliant 1/3, 2018 at 15:27

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. – Gothicize 30/7, 2019 at 17:58

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'. – Gothicize 30/7, 2019 at 18:2

169

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

Agram answered 2/3, 2018 at 1:13 Comment(5)

Very useful answer! – Collector 27/3, 2018 at 12:2

Thanks for your answer. I love technical details! – Blatherskite 12/5, 2018 at 3:14

How can we tell if the integrity of the file is the one that's not yet manipulated? Any advice? – Mareah 5/4, 2020 at 19:46

@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. – Atmosphere 27/5, 2020 at 16:24

Should you include SRI for resources that are on the same origin, and if yes, why? – Disqualification 17/6, 2020 at 14:7

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/

Organize answered 27/5, 2020 at 15:36 Comment(0)

Recommended topics

Hot tags