A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore subresource integrity on external scripts using a short example that you can inspect and change.
The Idea in Plain English
Subresource Integrity verifies that a fetched external script or stylesheet matches an expected cryptographic hash. If it differs, the browser blocks the resource rather than silently running modified code.
HTML supplies the structure; JavaScript supplies the behavior described here. If you remove the script, check what remains usable for visitors.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<!-- Replace HASH_WITH_REAL_SHA384 with the hash of the exact file. -->
<script src="https://cdn.example.net/widget.js"
integrity="sha384-HASH_WITH_REAL_SHA384"
crossorigin="anonymous" defer></script>
</head>What Each Part Does
- The script element can load code or hold data; the type attribute tells the browser how to treat its contents.
- The head holds page metadata, not the visible lesson content.
- integrity contains an expected cryptographic hash for resource verification.
- src points to the asset the browser should load.
- crossorigin chooses a cross-origin request mode.
The resource loads only when the actual bytes match the integrity value and applicable CORS rules are satisfied.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Subresource Integrity on External Scripts, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Copying an example hash as if it were valid for a real asset; calculate the hash from the exact bytes you deploy.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Subresource Integrity verifies that a fetched external script or stylesheet matches an expected cryptographic hash. If it differs, the browser blocks the resource rather than silently running modified code.
- The resource loads only when the actual bytes match the integrity value and applicable CORS rules are satisfied.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.