CSP Directives Deep Dive

Understanding CSP directives is crucial for effective implementation:

default-src: The fallback directive for all resource types not explicitly defined.

Content-Security-Policy: default-src 'self' https://trusted-domain.com

script-src: Controls JavaScript execution sources, critical for XSS prevention.

Content-Security-Policy: script-src 'self' 'nonce-2726c7f26c' https://cdnjs.cloudflare.com

style-src: Manages CSS sources and inline styling permissions.

Content-Security-Policy: style-src 'self' 'unsafe-inline' https://fonts.googleapis.com

img-src: Defines allowed image sources.

Content-Security-Policy: img-src 'self' data: https: blob:

connect-src: Controls XMLHttpRequest, WebSocket, and EventSource connections.

Content-Security-Policy: connect-src 'self' https://api.example.com wss://realtime.example.com

font-src: Specifies allowed font sources.

Content-Security-Policy: font-src 'self' https://fonts.gstatic.com

object-src: Controls plugins like Flash (should typically be 'none').

Content-Security-Policy: object-src 'none'

media-src: Manages audio and video sources.

Content-Security-Policy: media-src 'self' https://media.example.com

frame-src: Controls iframe sources.

Content-Security-Policy: frame-src 'self' https://youtube.com

frame-ancestors: Prevents clickjacking by controlling embedding.

Content-Security-Policy: frame-ancestors 'self' https://trusted-embedder.com