Sherlocked Security – Web Content Security Policy (CSP) Implementation

Mitigate XSS, Clickjacking, and Data Injection with a Robust CSP Strategy

1. Statement of Work (SOW)

Service Name: Web Content Security Policy (CSP) Implementation
Client Type: Web Applications, SaaS Platforms, eCommerce, Government Portals
Service Model: Assessment, CSP Design, and Implementation Guidance
Compliance Coverage: OWASP Secure Headers, NIST 800-53, PCI-DSS, GDPR, ISO 27001

Assessment Types:

CSP Policy Review and Violation Analysis
CSP Implementation for Legacy and Modern Apps
Integration with Tag Managers and CDNs
CSP Level 3 Planning for Progressive Web Apps (PWAs)
Support for Nonce-based and Hash-based Strategies

2. Our Approach

[CSP Violation Analysis] → [Asset Inventory] → [Directive Planning] → [Nonce/Hash Injection] → [Monitoring with CSP Reports] → [Strict Mode Testing] → [Deployment Advisory] → [Ongoing Tuning]

3. Methodology

[Content Source Mapping] → [Inline Script Review] → [CSP Report Endpoint Setup] → [Hash/Nonce CSP Strategy] → [Legacy Compatibility Assessment] → [Deployment Validation] → [Violation Reduction Tuning]

4. Deliverables to the Client

Baseline CSP Assessment Report
Custom CSP Policy (Report-Only & Enforced)
Inline Script & Style Risk Breakdown
CSP Violation Report (sample logs + interpretations)
Hardened CSP Policy with Directives per Asset Type
Hash/Nonce Strategy Mapping for Inline Elements
Integration Guide for Frameworks & CDNs
Post-Deployment Validation Report
Optional: CSP Report Collection Endpoint Setup

5. What We Need from You (Client Requirements)

URLs of pages requiring CSP enforcement
Access to production and staging environments
JavaScript framework details (e.g., React, Angular, Vue)
Details of any Tag Managers or inline script requirements
Permission to collect and analyze CSP violation reports
NDA and scope sign-off before engagement

6. Tools & Technology Stack

CSP Evaluator (Google), CSP Validator
Report URI / custom reporting endpoints
Chrome DevTools / Firefox CSP Inspector
Burp Suite with CSP plugins
Puppeteer + custom headless browsers
SRI Hash Generators, Script Hash Calculators
Browser Automation for Policy Tuning
Real-world inline script profiling tools

7. Engagement Lifecycle

1. Discovery & Risk Mapping → 2. Inline Script Profiling → 3. CSP Policy Draft (Report-Only) → 4. Monitor Violations → 5. Harden Policy Iteratively → 6. Enforce Policy → 7. Post-Deployment Tuning & Report

8. Why Sherlocked Security?

Feature	Sherlocked Advantage
Report-Only Testing First	No production disruptions during policy rollout
Inline Script Strategy	Nonce/hash-based policy support for SPA/PWA compatibility
Full Violation Triage	Actionable analysis of real-world CSP reports
Deep Framework Knowledge	Angular, React, Vue-specific CSP guidance
Progressive Hardening Model	Enforce gradually to reduce dev team friction
Browser Compatibility Testing	Ensures compatibility across major browsers and devices

9. Real-World Case Studies

B2B SaaS: Gradual CSP Rollout on Multi-Tenant App

Issue: Inline event handlers and legacy JavaScript broke early CSP attempts.
Solution: Introduced nonce-based strategy with automated inline injection, reduced policy to zero violations over time.
Outcome: Zero XSS vectors and improved PCI-DSS compliance.

Government Portal: Misconfigured CSP with Wildcards

Client: State Services Website
Findings: Overly permissive script-src * and reliance on insecure third-party scripts.
Fix: Replaced wildcards with strict SRI or hash checks, implemented reporting endpoint for real-time visibility.
Outcome: Passed OWASP Secure Headers validation and enabled real-time attack surface monitoring.

10. SOP – Standard Operating Procedure

Initial Header & Inline Script Audit
Inventory All External and Inline Resources
Draft Report-Only CSP with Safe Defaults
Integrate CSP Violation Logging (via report-uri or report-to)
Map Violations to Page Functions / Frameworks
Replace/Nonce Inline Scripts and Styles
Iterate Hardened Policy to Enforce Mode
Validate Policy Across Browsers
Conduct Regression Tests
Final Report with Ongoing Maintenance Guidelines

11. CSP Implementation Checklist (Technical & Detailed)

1. CSP Discovery & Baseline Analysis

Enumerate existing headers: Content-Security-Policy, X-Content-Security-Policy, X-WebKit-CSP
Review script, style, img, frame, connect, media, and font resource inclusions
Parse all HTML templates for <script>, <style>, on* event attributes
Identify all external domains loading resources (JS, fonts, APIs, images)
List all inline styles/scripts including JSON-LD, GTM, and analytics

2. Inline Script Profiling

Identify all inline scripts and assess usage: analytics, feature flags, legacy libraries
Profile dynamically inserted DOM elements or script tags
Categorize inline JS into safe (deterministic) and unsafe (dynamic/random)
Flag use of eval(), Function(), setTimeout(string), and document.write()
Map inline usage to framework behavior (Angular templates, React hydration, etc.)

3. CSP Report-Only Drafting

Construct initial policy using directives:
- default-src 'self'
- script-src 'self' https://trusted-cdn.com 'nonce-<random>'
- style-src 'self' 'unsafe-inline' (to be removed later)
- connect-src https://api.domain.com
- img-src 'self' data:
Include report-uri or report-to for violation logging
Deploy header in Report-Only mode to start collecting CSP violations

4. Nonce & Hash Strategy Implementation

Inject dynamic nonces for each <script> and <style> block server-side
Replace inline scripts with nonce-<value> attributes
Calculate SRI-compatible SHA-256 hashes for static inline code
Remove reliance on unsafe-inline for both script-src and style-src
Ensure CSP-compatible CSP nonce injection is integrated with build pipeline

5. CSP Violation Monitoring & Tuning

Configure CSP violation endpoint (e.g., Report URI) to collect logs
Filter reports for real violations vs. harmless noise (e.g., browser extensions)
Group violations by page, function, and user-agent
Tune policy to suppress benign third-party script warnings (e.g., reCAPTCHA, Hotjar)
Maintain dashboards or logs for real-time CSP violations

6. Framework & CDN Integration

Map CSP directives to specific framework practices (e.g., Next.js scripts handling)
Ensure compatibility with Angular’s CSP compliance via DOM sanitizers
Handle dynamic imports in React/Vue with nonce propagation
Validate CSP headers with all CDN-delivered assets (e.g., Cloudflare, Akamai)
Inject SRI for all CDN assets where applicable

7. Testing & Validation

Validate CSP header syntax with online tools (CSP Evaluator, Mozilla Observatory)
Manually test across Chrome, Firefox, Safari for enforcement behavior
Test fallback scenarios for blocked scripts and user notifications
Simulate XSS vectors to confirm mitigation (e.g., <img onerror=alert(1)>)
Ensure no breakage of critical business functions (forms, modals, logins)

8. Final Hardening & Deployment

Move CSP from Report-Only to enforced mode in production
Remove unsafe-inline, unsafe-eval, and wildcard domains
Lock down each directive:
- script-src, style-src, img-src, frame-src, object-src, font-src, media-src, form-action, etc.
Add fallback mechanisms and user messaging for script failures
Schedule periodic re-audit of inline content and headers

9. Ongoing Maintenance

Integrate CSP report monitoring into SIEM or dashboard tools
Review policies quarterly or upon new deployments
Validate that new scripts/styles are automatically nonce-tagged or hashed
Train developers on secure script inclusion practices and CSP implications
Ensure changes to marketing scripts (e.g., GTM) go through security review

Web Content Security Policy (CSP) Implementation