I escaped the text but a script still loaded from a CDN. A Content Security Policy says which sources the browser may run, so escaping is not the whole gate.
About 1 min of reading
Send a CSP and confirm a remote script is blocked.
A page with script-src 'self' refuses a script from another origin.
Before you run it, say out loud what it will print. Then open the answer.
The inline style you wrote carries the nonce, so it passes; a forged one does not.
Before you run it, say out loud what it will print. Then open the answer.
A CSP is a list of allowed sources per type (scripts, styles, frames, images). The browser refuses anything outside it, so even an injected tag cannot pull in a remote script. It is the enforcement layer above escaping.
Reaching for 'unsafe-inline' or * to make CSP 'work' undoes it, that is the same as no policy. Use a per-response nonce for the inline blocks you actually need. A policy that needs unsafe-inline is a policy not yet written.
Content-Security-Policy:
script-src 'self';
style-src 'self' 'nonce-abc123';This says: run scripts only from our own origin, and inline styles only if they carry the nonce. Anything else is blocked.
<style nonce="abc123">A per-response random nonce lets the one inline block you wrote pass, while a forged inline block without the nonce is refused. Random per page, so it cannot be copied.
X-Frame-Options: DENYRefuse to be framed, so another site cannot put your page in an iframe to trick a user into clicking. This closes clickjacking.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.