What is CSP (Content Security Policy)?

What is CSP?

CSP (Content Security Policy) is a browser security policy that defines which sources a web application may load scripts, styles, images, fonts, iframes, and network requests from. The goal is to narrow what injected or unexpected code can do if it reaches the page.

How Does It Work?

The server usually sends a Content-Security-Policy header. The browser enforces directives from that header: script-src controls script sources, style-src controls styles, img-src controls images, connect-src controls API connections, and frame-ancestors controls where the page may be embedded.

For example, allowing scripts only from your own domain can block many injected third-party scripts. If inline scripts are required, nonces or hashes are safer than enabling unsafe-inline, which weakens the policy substantially.

Role Against XSS

CSP does not remove the root cause of XSS; input validation, output encoding, and safe templating are still required. CSP works as a second layer of defense by reducing impact and reporting unexpected sources through violation reports.

Implementation Steps

Teams often start with Content-Security-Policy-Report-Only to test a policy without breaking production. Reports reveal which third-party sources are actually needed. After adjustment, the enforcing policy can be enabled. Directives such as upgrade-insecure-requests may also help with HTTPS enforcement.

Business Use

CSP is important for payment flows, member areas, admin panels, and applications that handle user data. A policy that is too loose offers little protection; one that is too strict can break analytics, chat, or payment widgets. Gradual rollout with reporting is the safer approach.