Page loads: <script src="https://evil-cdn.example/inject.js"></script>
attacker-controlled domain, not part of your app
// console output appears here
Content-Security-Policy tells the browser which origins are allowed to supply scripts, styles, images and more. With
script-src 'self' trusted-cdn.example set, a script tag pointing at any other origin is refused before it ever runs — the block happens in the browser, the file is never executed even if it downloaded successfully.Page runs: fetch("https://api-b.example/user/data", { credentials: "include" })
JS on app-a.example calling a different origin, api-b.example
// console output appears here
CORS is enforced entirely by the browser, not the server. The server at api-b.example always processes the request and sends a 200 response — but if its reply lacks a matching
Access-Control-Allow-Origin header, the browser throws the response away before any JavaScript on app-a.example can read it.Page loads: <script src="https://cdn.example/lib/payments-1.4.0.js"
integrity="sha384-Kj93Hb2sQ..."></script>
CDN was compromised and now serves a modified file
// console output appears here
Subresource Integrity lets a page pin the exact hash of a third-party file it expects. If a CDN is compromised and starts serving different bytes, the browser recomputes the hash of whatever it downloaded and compares it to the
integrity attribute — a mismatch means the script is discarded unexecuted, even though the network request itself succeeded.