Testing and Validation
Testing and Validation
Thorough testing ensures your CSP implementation works correctly across different browsers and scenarios:
// CSP Testing Framework
class CSPTester {
constructor(url) {
this.url = url;
this.results = {
headerPresent: false,
reportOnlyMode: false,
violations: [],
coverage: {},
suggestions: []
};
}
async runTests() {
await this.testHeaderPresence();
await this.testPolicyEffectiveness();
await this.testBrowserCompatibility();
await this.testThirdPartyIntegrations();
return this.generateReport();
}
async testHeaderPresence() {
const response = await fetch(this.url);
const cspHeader = response.headers.get('Content-Security-Policy');
const cspReportOnly = response.headers.get('Content-Security-Policy-Report-Only');
this.results.headerPresent = !!(cspHeader || cspReportOnly);
this.results.reportOnlyMode = !cspHeader && !!cspReportOnly;
this.results.policy = cspHeader || cspReportOnly;
}
async testPolicyEffectiveness() {
if (!this.results.policy) return;
const parser = new CSPParser(this.results.policy);
const analysis = parser.analyze();
// Check for weak configurations
if (analysis.allows('script-src', "'unsafe-inline'")) {
this.results.suggestions.push({
severity: 'high',
message: "Remove 'unsafe-inline' from script-src and use nonces or hashes"
});
}
if (analysis.allows('script-src', "'unsafe-eval'")) {
this.results.suggestions.push({
severity: 'high',
message: "Remove 'unsafe-eval' from script-src"
});
}
// Check for missing directives
const importantDirectives = ['default-src', 'script-src', 'style-src', 'img-src'];
importantDirectives.forEach(directive => {
if (!analysis.hasDirective(directive)) {
this.results.suggestions.push({
severity: 'medium',
message: `Consider adding ${directive} directive`
});
}
});
}
generateReport() {
return {
url: this.url,
timestamp: new Date().toISOString(),
results: this.results,
score: this.calculateSecurityScore()
};
}
calculateSecurityScore() {
let score = 100;
if (!this.results.headerPresent) return 0;
if (this.results.reportOnlyMode) score -= 10;
this.results.suggestions.forEach(suggestion => {
if (suggestion.severity === 'high') score -= 20;
if (suggestion.severity === 'medium') score -= 10;
if (suggestion.severity === 'low') score -= 5;
});
return Math.max(0, score);
}
}
Implementing CSP headers successfully requires a methodical approach that begins with thorough planning and progresses through careful testing to production deployment. By following this step-by-step tutorial, you can create robust CSP policies that significantly enhance your application's security posture while maintaining functionality. Remember that CSP implementation is an iterative process – start with report-only mode, analyze violations, refine your policy, and gradually tighten restrictions as you gain confidence in your configuration.## CSP for WordPress Sites - Complete Implementation Guide
WordPress powers over 40% of the web, making it a prime target for attackers. Implementing Content Security Policy on WordPress sites presents unique challenges due to the platform's plugin ecosystem, theme flexibility, and inline script usage. This comprehensive guide addresses WordPress-specific CSP implementation, providing practical solutions for common issues while maintaining the functionality that makes WordPress popular.