HTTP Protocol and Web Fundamentals Questions

Definition: browsers enforce cross-origin restrictions (CORS) for XHR/fetch, resource integrity and font loading rules, and iframe embedding policies (X-Frame-Options/Sandbox). Designers must know these can block assets or change behavior.
Two example features and mitigations:

1. Custom webfonts hosted on third-party domain: browsers block fonts unless Access-Control-Allow-Origin permits origin. Mitigation: host fonts on same origin or ensure CDN sets Access-Control-Allow-Origin: * (or your origin) and proper CORS headers; use font-display: swap to avoid blocking text rendering.
2. Animated hero composed from cross-origin images or an iframe embedding a third-party widget that modifies layout: images used in canvas or CSS filters require CORS-enabled responses (tainted canvas otherwise). Mitigation: request images from CORS-enabled endpoints (Access-Control-Allow-Origin) or proxy images through your server; for iframes, work with provider to allow embedding (provide origin allow-list) or use postMessage API for integration rather than DOM access.
   Designer implications: prefer same-origin hosting for critical assets, define graceful fallbacks for blocked resources (system fonts, placeholder images), and coordinate with engineering/third parties to ensure CORS headers and embedding policies are correctly configured.