ReferenceStandard

Fetching attributes: crossorigin, referrerpolicy, integrity, and loading

Resource-loading attributes influence how a browser fetches or prioritizes a resource.

Intermediate3 min readLearn · Practice · Review

Published by HTML Code Runner · AI-assisted material · Independent editorial review pending · Editorial policy

On this page

Purpose and content model

Resource-loading attributes influence how a browser fetches or prioritizes a resource. Crossorigin requests the appropriate CORS mode for supported elements. Referrerpolicy controls referrer information. Integrity verifies resource bytes against an expected digest. Loading, decoding, and fetchpriority offer scheduling or presentation hints where supported.

These attributes are not universal permissions switches. The server's headers, resource type, cache state, browser policy, and element-specific rules still determine the outcome. Use them to express a measured requirement rather than adding every performance-looking attribute to every resource.

Syntax and working example

<img src="/images/workshop.jpg" width="800" height="500" alt="Participants arranging seedlings." loading="lazy" decoding="async">

Supported attributes and behavior

Crossorigin commonly uses anonymous or use-credentials on supported elements. Referrerpolicy accepts defined policies such as no-referrer and strict-origin-when-cross-origin. Integrity contains supported cryptographic hash metadata for applicable resources such as scripts and stylesheet links. Loading uses lazy or eager where implemented. Img decoding can use async, sync, or auto; fetchpriority can use high, low, or auto on supported resource elements. Applicability differs by element and version.

Another practical pattern

<script src="https://cdn.example.org/app.js" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<!-- Add a verified integrity hash only when it matches the exact deployed bytes. -->

Accessibility and browser notes

Performance affects accessibility when delayed controls or shifting content disrupt a task. Reserve image dimensions and avoid lazy-loading an essential first-screen image. Do not sacrifice privacy merely to gain a cache hit or third-party convenience. A failed integrity check must not leave the core page unusable.

Common mistakes

Crossorigin does not make another server grant access. Integrity is not a URL trust score and becomes invalid when bytes change. Fetchpriority is a hint, not a guarantee. An async decoding hint does not mean an image is downloaded asynchronously in a new security context.

Verify your implementation

Inspect real network requests and response headers. Test cache-empty and slow-connection conditions and measure the critical rendering path. Deliberately mismatch an integrity value in staging to verify failure handling, then restore a verified digest before publication.

Standard status and sources

Standard; browser availability must be checked independently of specification status.

HTML specification · MDN reference and compatibility data