Content Security Policy: Blocking Injected Scripts on School Sites

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)

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

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.

Try the Live Demo

Interactive XSS Demo: Type an XSS payload into a mock school comment field and watch it execute without CSP — then switch to CSP-enforced mode and see the browser block it instantly.

Launch CSP / XSS Demo →

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

• X-Frame-Options Explained — prevent your site from being embedded in iframes
• HSTS Explained — another critical security header
• School Cybersecurity Checklist — full security hardening checklist