Content-Security-Policy

Content-Security-Policy (CSP) is an HTTP response header that holds a list of rules for a page. The browser blocks each script, frame, image, or other load that the rules do not allow.

HTTP header

Also called CSP

Updated

On this page

How it works

A policy is a list of directives, separated by semicolons. Each directive names a type of content and the sources it may come from, for example img-src 'self'. The browser blocks a load when no source in the list allows it.

Most directives that control loads fall back to default-src when you do not set them. frame-ancestors does not. A policy with only default-src 'none' still lets any site frame the page, unless X-Frame-Options blocks it.

Directives for frames

DirectiveSet onWhat it controls
frame-ancestorsThe framed pageWhich sites may show this page in a frame. It has no fallback.
frame-srcThe parent pageWhich URLs this page may load in its frames. It falls back to child-src, then default-src.
sandboxThe page itselfPuts the page in a sandbox, like the sandbox attribute of an iframe.

Example

HTTP response header
Content-Security-Policy: default-src 'self'; img-src 'self' https://cdn.example.com; frame-ancestors 'self' https://partner.example

The page loads content only from its own origin, plus images from one CDN. Only its own site and https://partner.example may frame it.

How to set it

Send the policy as an HTTP response header. Put all directives in one header and separate them with semicolons.

Content-Security-Policy: default-src 'self'; frame-ancestors 'self'

A policy in a meta tag ignores frame-ancestors, report-uri, and sandbox. If a response has two policies, the browser enforces both, so a load must pass each one.

Learn more

Sources

Know before you embed.

Free, no sign-up, nothing stored. Paste a URL and get a verdict, a live preview, and the fix.