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.
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.
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.
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.
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!