🌐 Chapter 67: CORS & Cross-Origin Embedding

The crossorigin Attribute in HTML

**Part 14: Security & Best Practices** — Chapter 67: Cross-Origin Resource Sharing (CORS) & Embedding

LEARNING OBJECTIVES ⌵
  • Understand the HTML crossorigin attribute across <img>, <audio>, <video>, <script>, and <link>.
  • Differentiate between crossorigin="anonymous" and crossorigin="use-credentials".
  • Fix unhandled cross-origin JavaScript error masking ("Script error." on line 0).
  • Enable subresource integrity checks and canvas pixel reading on cross-origin CDN media.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The `"Script error."` Problem

When an external script loaded from a CDN (https://cdn.example.com/app.js) throws a runtime exception, browser engines redact the error message to generic "Script error." with Line 0 to prevent cross-origin information leakage.

Adding crossorigin="anonymous" instructs the browser to request the script with CORS headers, unlocking full stack traces in error trackers (Sentry, Datadog):

<!-- Full stack traces unlocked in error handlers! -->
<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>

📌 Key Takeaways

  • Use crossorigin="anonymous" on CDN scripts to capture full error stack traces and enable Subresource Integrity (SRI).
  • Use crossorigin="use-credentials" only when cookies or authorization headers are required for the asset request.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?