Back to Learn
explainer

Content Security Policy: Blocking Injected Scripts on School Sites

A Content Security Policy (CSP) header tells browsers which scripts, styles, and resources your site is allowed to load. It's one of the most effective defenses against cross-site scripting (XSS) attacks.

What Is a Content Security Policy?

A Content Security Policy (CSP) is an HTTP response header that tells the browser exactly which sources of content — scripts, styles, images, fonts, frames — are allowed to load on a page. Anything not on the approved list is blocked.

It is one of the most powerful defenses against Cross-Site Scripting (XSS) attacks, where attackers inject malicious scripts into your pages to steal session cookies, redirect users to phishing sites, or silently harvest form data.

Why School Websites Are Targets

School websites often:

  • Run old WordPress installations with outdated plugins (common XSS vulnerability sources)
  • Embed third-party content: YouTube videos, Google Maps, payment forms
  • Use contact forms and enrollment forms — high-value targets for data harvesting
  • Are maintained by staff without dedicated security training

If an attacker finds an XSS vulnerability in a plugin, they can inject a script that steals every form submission from your enrollment or contact page — including student names, addresses, and ID numbers.

What CSP Looks Like

```

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src 'self' data:

```

This tells the browser:

  • Load everything from the same origin by default (default-src 'self')
  • Scripts may only come from the same origin or trusted-cdn.com
  • Images may come from the same origin or inline data URIs

Key CSP Directives

| Directive | Controls |

|-----------|---------|

| default-src | Fallback for all resource types |

| script-src | JavaScript sources |

| style-src | CSS sources |

| img-src | Image sources |

| font-src | Web font sources |

| frame-src | Iframe sources (YouTube, Maps) |

| connect-src | Fetch/XHR/WebSocket destinations |

| form-action | Where forms may submit |

A Practical Starting Point for School Sites

A WordPress school site embedding YouTube and Google Fonts might use:

```

Content-Security-Policy:

default-src 'self';

script-src 'self' 'unsafe-inline' https://www.googletagmanager.com;

style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;

font-src 'self' https://fonts.gstatic.com;

img-src 'self' data: https:;

frame-src https://www.youtube.com;

```

Note: 'unsafe-inline' weakens CSP but is often required for WordPress. Use a nonce-based policy for stronger protection.

Report-Only Mode: Test Before Enforcing

CSP has a safe testing mode. Use Content-Security-Policy-Report-Only instead of Content-Security-Policy and add a report-uri to log violations without blocking anything:

```

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

```

Run this for a week to identify what your site legitimately loads, then build your enforced policy from the report data.

How to Add CSP

Apache (.htaccess)

```apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'"

```

Nginx

```nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'" always;

```

WordPress (plugin)

Use Headers & Security or WP Headers plugins to set CSP without editing server config.

Check Your Site

The Site Scanner checks whether your school site sends a Content-Security-Policy header and flags if it's missing.

Related Resources