What are the integrity and crossorigin attributes?

html

crossorigin

integrity

cdn

byNikita Barsukov·Aug 8, 2024

Integrity is a security tool that uses SHA hash for subresource verification, confirming the fetched file has not been altered. If the hash check fails, the file is blocked. On the other hand, crossorigin is a guide enabling CORS handling, teaching the browser when to send credentials. Set it to use-credentials to include credentials or anonymous to exclude them.

Here's a quick example:

<link rel="stylesheet" href="https://example.com/styles.css"
      integrity="sha384-Base64EncodedHash"
      crossorigin="anonymous">

integrity="sha384-Base64EncodedHash": Ensures file 📁 matches encoded hash, said "No tampering on my watch! 👀"
crossorigin="anonymous": Tells the browser, "Keep the cookies 🍪 for yourself this time 😏"

In-depth: Integrity and Crossorigin attributes

The integrity attribute and the crossorigin attribute play pivotal roles in web security, particularly in managing resources fetched from CDNs. Take caution in fetching resources from foreign hosts; ensuring these resources remain as promised and secure transit is indispensable.

The 'integrity' attribute: Forging unforged data

SRI (Subresource Integrity) comes to play when you need an untouched supply of resources from third-party sources. Potential dangers of a compromised CDN delivering harmful scripts can be averted using integrity. It verifies the content is in sync with the intended form.

Fetching the hash for 'integrity'

Use tools like OpenSSL or online hash calculators to compute the hash needed for the integrity attribute. As a rule of thumb, these utilize cryptographic hash functions; SHA-256, SHA-384, or SHA-512 to yield the hash of the content.

Crossorigin – anonymous or use-credentials?

The embodiment of crossorigin is reflected in the origin header transmitted with the HTTP request. "Anonymous" requests retain cookies or HTTP basic authentication data; ideal for getting resources without exposing user data. However, using "use-credentials" includes credentials with cross-origin requests, this might be a necessary evil for some resources to respond adequately.

Beyond the basics: Handling potential complexities

While uplifting security, misappropriation of these attributes can lead to complications.

Cascading fallout from integrity mismatches

Updating the CDN resource but neglecting the corresponding integrity hash update? The browser rejects your new resource due to the mismatch. Streamline your deployment process to update integrity values synchronized with resource updates.

Navigating CORS policies intricacies

Inexplicable request failures? Amended CORS policies can trigger opaque responses. JavaScript might be blinded by CORS settings leading to unreadable content response. Ensure that CORS headers on the server-side is well-treated for resources where crossorigin is employed.

A confluence of CDN Performance & Security

Inappropriately setting crossorigin impacts performance and security negatively. An ill-configured service incites additional CORS requests, resulting in load time increments. Alongside, unnecessary credentials exposure could be a risk for user data.

Security Enhancements in Resource Fetching

Using these attributes judiciously enhances security while working with CDN resources. Always couple this with HTTPS to further better your security measures and stand up against resource substitutions.