A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore safe url schemes in href and src attributes using a short example that you can inspect and change.
The Idea in Plain English
URLs from users must be parsed and checked for allowed schemes before they are used in href or src. For an ordinary web link, allowing http: and https: is usually safer than accepting arbitrary schemes.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<a href="https://example.com/science">Read the science page</a>
<a href="mailto:[email protected]">Contact our club</a>What Each Part Does
- The anchor is a link when its href points to a destination.
- href is the URL or fragment destination of a link.
The rendered link points to an expected destination without running an unexpected javascript: URL.
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 Safe URL Schemes in Href and Src Attributes, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Accepting a user-supplied href unchanged merely because it looks like a string.
- 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
- URLs from users must be parsed and checked for allowed schemes before they are used in href or src. For an ordinary web link, allowing http: and https: is usually safer than accepting arbitrary schemes.
- The rendered link points to an expected destination without running an unexpected javascript: URL.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.