Linking to external or untrusted URLs — especially from user-generated content — involves several distinct considerations beyond simple functionality. This lesson pulls them together into one practical, actionable checklist.
1target="_blank" Always Needs Its Companion
Any link using target="_blank" to open in a new tab — extremely common for external links, so users don't lose their place on the current page — should always be paired with rel="noopener" (commonly combined with noreferrer), a specific security requirement explored in full mechanical detail in the next lesson.
As a practical checklist item: treat target="_blank" and rel="noopener" as an inseparable pair whenever linking to any external, especially untrusted, destination — never one without the other.
2Validating User-Submitted URLs Before Rendering
Any URL originating from user input — a profile 'website' field, a comment containing a link — should be validated before being rendered as a clickable <a href>. Using the URL API from the Browser APIs module, wrap the user-submitted string in a new URL() call within a try/catch, and explicitly check that its .protocol is http: or https: before trusting it as a genuine, safe web link.
This directly prevents a specific, real attack: a malicious user submitting javascript:someCode() as their 'website' — without validation, rendering this as <a href="javascript:someCode()"> creates a link that executes arbitrary JavaScript in the viewing user's browser when clicked, connecting this concern directly back to the XSS lessons earlier in this module.
3SEO Trust Signals Beyond Security Attributes
Separately from the security-focused noopener/noreferrer, rel also carries values search engines use to understand how much ranking trust to extend through a link: nofollow (don't pass any ranking credit at all), ugc (this link came from user-generated content, like a comment or forum post), and sponsored (this is a paid, advertising, or otherwise compensated link) — all covered conceptually in the Modern SEO module's discussion of link equity.
A comment section's user-submitted links commonly combine both concerns: rel="ugc noopener noreferrer" — signaling to search engines that the link is unvetted user content while also applying the necessary security protections for the target="_blank" new-tab behavior.
4Step-by-Step Breakdown
Every Outbound Link Is A Trust Decision. Linking to an external site — especially one from user-generated content, like a link a user pasted into their profile — carries real, specific risks beyond just 'does the link work'. This lesson pulls together a practical checklist for handling external links safely.
target="_blank" Needs A Companion rel Attribute. Opening a link in a new tab via target="_blank" without also setting rel="noopener" gives the destination page a dangerous capability: partial JavaScript access back to the original tab, covered in depth in the next lesson — the two attributes should be treated as a pair.
The target="_blank" Companion Requirement. What should always accompany target="_blank" on a link to an external, untrusted site?
- →rel="noopener" (and typically noreferrer)
- →The download attribute
- →Nothing else is needed
User-Submitted URLs Need Validation Before Use. A URL field in a user profile or comment shouldn't be trusted blindly — validating that it's actually a well-formed http/https URL (using the URL API from the Browser APIs module) prevents javascript: URLs and other unexpected schemes from being rendered as clickable links.
Validating User-Submitted URLs. Why is it important to validate a user-submitted URL's scheme (protocol) before rendering it as a clickable link?
- →It's purely a cosmetic concern with no real risk
- →It prevents dangerous schemes like javascript: from being rendered as an executable clickable link
- →It only affects how fast the link loads
rel="nofollow"/"ugc"/"sponsored" For Trust Signaling. Beyond the security-focused noopener/noreferrer, rel also carries SEO trust signals — nofollow (don't pass ranking credit), ugc (user-generated content, like a comment link), and sponsored (a paid/advertising link) — telling search engines how much to trust a given outbound link.
SEO-Focused rel Values. Which rel value specifically signals to search engines that a link comes from user-generated content, like a comment?
- →rel="ugc"
- →rel="noopener"
- →rel="external"
Safe Link Checklist Complete. You now have a practical checklist for safe external links: always pairing target="_blank" with rel="noopener", validating user-submitted URL schemes before rendering them as clickable links, and applying the correct SEO trust-signaling rel values for user-generated content.
Mark An Untrusted Link As Unendorsed. rel="nofollow" combined with noopener protects both SEO signal and window security.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Links Opening In A New Tab Should Warn Users, Ideally Programmatically
Unexpectedly opening a new tab can disorient screen reader and keyboard users especially; supplementing visually-hidden text ('opens in a new tab') alongside target="_blank" links improves this experience.
SEO Implications
- 1
Correctly Applying nofollow/ugc/sponsored Values Is A Direct, Explicit SEO Signal About Link Trust
This directly extends the link equity concepts from the Modern SEO module's canonical URL and structured data lessons — search engines use these values to calibrate how much ranking credit, if any, to pass through a given outbound link.
Best Practices
Treat target="_blank" And rel="noopener noreferrer" As A Single, Inseparable Unit For External Links
This checklist-level habit prevents the specific vulnerability explored in full in the next lesson from ever being accidentally introduced.
Always Validate The Scheme Of Any User-Submitted URL Before Rendering It As A Clickable Link
It directly prevents a real, exploitable XSS vector via javascript: URLs submitted as seemingly innocuous profile or comment links.
Frequent Bugs
A user's profile 'website' link, when clicked, executes JavaScript instead of navigating to a URL.
Validate that user-submitted URLs use only http: or https: schemes before rendering them as clickable links, rejecting javascript: and other dangerous schemes.
A comment section's external links pass full SEO ranking credit to arbitrary user-submitted destinations.
Add rel="ugc nofollow" (or similar) to signal to search engines that these links are unvetted user-generated content.
Real-World Examples
A Fully Safe, Correctly-Signaled Comment Link
A comment section rendering user-submitted links with complete security and SEO trust attributes.
function renderUserLink(url) {
const parsed = new URL(url); // throws if invalid
if (!['http:', 'https:'].includes(parsed.protocol)) throw new Error('Invalid scheme');
return `<a href="${parsed.href}" target="_blank" rel="ugc noopener noreferrer">${parsed.hostname}</a>`;
}