Skip to content

Headers

Content Security Policy

Pro and AgencyAbout Security Headers

Gives browsers a list of the places your pages may load scripts, styles, images and fonts from. Anything else, such as a script slipped in by an attacker, is refused.

What it does

A Content Security Policy, or CSP, is an allow list for your pages. For each kind of content, such as scripts or images, you list where it may come from, for example your own site and Google Fonts.

Report-only mode changes nothing for visitors: browsers only report what the policy would have blocked. Enforce mode actually blocks it.

Reports are collected in a violation log so you can see what your site really loads before you enforce anything.

Why it matters

The most common kind of website attack injects a script into a page, to steal sign-in cookies or card numbers. A good policy stops the browser running it, even if the attacker found a way to add it.

Set it up safely

  1. Make sure HTTP Security Headers in Core headers is on; the policy is only sent while it is.
  2. In section Content Security Policy, pick a Quick preset close to your site, such as WordPress Compatible or WooCommerce. A preset replaces all the directives below it.
  3. Set CSP mode to Report-only, switch on Collect violation reports, and click Save Changes.
  4. Browse your site for a few days, including forms, checkout and embedded videos. Then read the violation log and add any sources you trust to the right directive.
  5. When the log stays quiet, switch CSP mode to Enforce.

Good to know

A policy that is too strict can break parts of your site, such as maps, chat widgets or payment forms. That is why report-only comes first.

Use nonces for scripts adds a one-time code to every script WordPress loads properly. Scripts printed directly into the page by a theme or plugin without it will be blocked.

Test Policy scores the saved policy, not unsaved changes. The policy builder works while the mode is Disabled, so you can prepare a policy first.

Which plan includes it

Content Security Policy is part of Pro.

How it works, for developers
  • Report-only sends Content-Security-Policy-Report-Only; enforce sends Content-Security-Policy, on send_headers with the core headers.
  • Directives are separate settings (smg_csp_default_src, smg_csp_script_src, smg_csp_style_src, smg_csp_img_src, smg_csp_font_src, smg_csp_connect_src, smg_csp_media_src, smg_csp_frame_src, smg_csp_frame_ancestors, smg_csp_worker_src, smg_csp_object_src, smg_csp_base_uri, smg_csp_form_action). An empty directive is left out.
  • Nonces: a new random nonce per request is added to enqueued script and link tags through script_loader_tag and style_loader_tag, and to script-src.
  • Reports go to admin-ajax.php?action=smg_csp_report (open to visitors, limited to 20 reports a minute, bodies over 16 KB refused). The last 100 are kept in the option smg_csp_violations, not autoloaded. External report address (smg_csp_report_uri) is used only while collecting is off.
  • Policy options: smg_csp_upgrade_requests, smg_csp_block_mixed, smg_csp_use_nonce, smg_csp_enable_reporting; mode smg_csp_mode.

Quick answers about content security policy

What does Content Security Policy do in Stack Guard?

A Content Security Policy, or CSP, is an allow list for your pages. For each kind of content, such as scripts or images, you list where it may come from, for example your own site and Google Fonts. Report-only mode changes nothing for visitors: browsers only report what the policy would have blocked. Enforce mode actually blocks it. Reports are collected in a violation log so you can see what your site really loads before you enforce anything.

Why use content security policy on a WordPress site?

The most common kind of website attack injects a script into a page, to steal sign-in cookies or card numbers. A good policy stops the browser running it, even if the attacker found a way to add it.

How do I set up content security policy?

1. Make sure HTTP Security Headers in Core headers is on; the policy is only sent while it is. 2. In section Content Security Policy, pick a Quick preset close to your site, such as WordPress Compatible or WooCommerce. A preset replaces all the directives below it. 3. Set CSP mode to Report-only, switch on Collect violation reports, and click Save Changes. 4. Browse your site for a few days, including forms, checkout and embedded videos. Then read the violation log and add any sources you trust to the right directive. 5. When the log stays quiet, switch CSP mode to Enforce.

Which Stack Guard plan includes content security policy?

Content Security Policy is part of Pro.

More in Headers

Not running Stack Guard yet? It is free.

Download Free