CSP Playground is here to help!
First and foremost if you are unfamiliar with what CSP is, please check out our What Is CSP? overview to get a better understanding of why CSP is fantastic.
Once you have a firm understanding of CSP you can work with the Violation Examples and Compliant Examples to learn what CSP may break and how to fix it!
Violation and Compliant Examples
Violation Examples
The Violation Examples page steps through code and development practices that are likely to break when applying a CSP Policy. As you have already learned, things like Inline Scripts as an example will break depending on your CSP Policy.
Compliant Examples
The Compliant Examples page shows some sample approaches for getting the same effects as the code on the CSP Violations page, but in a way that will play nicely with CSP. Basically, if you are seeing violations in your own code, you can refer to the Compliant Example page to get some ideas on how to fix those violations.
Controlling CSP Settings for Violation and Compliant Examples
This portion of the playground can be controlled by a few different settings which can be triggered using different CSP toggles:
The Disable toggle simply removes any CSP Policy from the playground, disabled CSP altogether (the server won’t send any CSP header).
The Enable toggle sets a default policy to depending on which Example page you’re on.
For the Violation page, it sends default-src 'self';; a reasonable policy to start from when trying to adopt CSP.
For the Compliant page, it sends a much larger directive which will allow each of the compliant examples to work:
default-src 'self' ; img-src 'self' https://*.google.com data: ; script-src 'self' nonce-nRfqpuKWNuYyUAFPTr6WVNZk9 http://www.google-analytics.com ; style-src 'self' https://fonts.googleapis.com ; font-src 'self' https://themes.googleusercontent.com ; frame-src 'self' http://example.iana.org ; object-src 'self' https://helpx.adobe.com ; connect-src 'self' https://api.github.com ;
The Report Only toggle uses the same policy as Enable but send the Content-Security-Policy-Report-Only version of the CSP header instead of the normal one. Whenever a CSP header is being sent, you can open the browser console to see any violations:
The Custom toggle allows you to specify your own test policy to use on the playground. The following is displayed when the toggle is clicked:
One (extreme) example policy to try might be default-src 'none'; it’s guaranteed to break more or less everything.
Not sure what a policy should look like? You can find some example policies here:
The validator has three states: valid, warning, invalid
A valid state is when the policy has no errors. The screenshot below shows a valid policy:
A warning state simply means that the policy is indeed valid according to the CSP 1.1 specification, but may not be interpreted correctly in a browser. An example may be a domain name that is only 1 character long would be valid according to the CSP 1.1 specification, but most likely not a valid hostname. The screenshot below shows a 1 character hostname:
An invalid state means that the policy is invalid according to the CSP 1.1 specification. The screenshot below show’s a 1 character hostname:
Once you have a valid policy, you can click the Submit Policy button to refresh the page with your new CSP policy.
CSP Validator
The CSP Validator allows you to validate your CSP policy. Here is an example of an invalid policy:
Once you have a valid policy, feel free to click the Copy to Clipboard button and use the policy on your own site!
Onward!
To give CSP a test drive, start with the Violation Examples or go directly to the CSP-friendly Compliant Examples.