Content Security Policy
The Content Security Policy (CSP) is a W3C recommendation that provides a framework which assists with the following:
- Preventing injection of malicious code into web pages.
- Where injection occurs, CSP helps to prevent it running.
- Where it runs, CSP helps to report it.
CSP is supported by most current browsers.
Layout manager
From version 5.9, PageSeeder sends Content-Security-Policy
HTTP response headers to prevent malicious content from being executed on the page.
Sent by the layout manager for every HTML page or dialog, it can be configured in the layout manager config.xml
. Unless modified, the content security policy is automatically inherited by all layouts.
Default configuration
By default, PageSeeder only allows content, inline or otherwise, to be served by itself:
<content-security-policy> <directive name="default-src" value="'self'"/> <directive name="script-src" value="'self' 'unsafe-inline'"/> <directive name="style-src" value="'self' 'unsafe-inline'"/> <directive name="object-src" value="'none'"/> <directive name="img-src" value="'self' data:"/> </content-security-policy>
Although strict, this policy prevents the execution of malicious content from external sources.
Custom configuration
There are cases where relaxing the content security policy is warranted. These cases are included:
- Retrieving fonts from an external source of typefaces.
- Loading scripts from a secure cache to improve performance.
- Including media objects from a trusted source.
First, ensure that the layout configuration is version 1.4:
<?xml version="1.0"?> <!DOCTYPE layout-config PUBLIC "-//PageSeeder//DTD::Layout Config 1.4//EN" "../../default/Layout/layout-config-1.4.dtd" > <layout-config version="1.4"> ... </layout-config>
Then, define a <content-security-policy>
element to override the default configuration and define each policy directive as a separate <directive>
element.
allow fonts
To allow from an external site (for example, Google fonts), use the following policy:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline'" /> <directive name="style-src" value="'self' 'unsafe-inline' fonts.googleapis.com" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self' data:" /> </content-security-policy>
disable CSP
Although not recommended, it can be useful when testing or developing to disable the content security policy:
<content-security-policy/>
Common trusted content
Following are examples of enabling trusted content.
YouTube
To embed YouTube videos, include www.youtube.com in the frame-src
directive:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline' 'unsafe-eval'" /> <directive name="style-src" value="'self' 'unsafe-inline'" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self' data: " /> <directive name="frame-src" value="'self' www.youtube.com" /> </content-security-policy>
Vimeo
To allow the Vimeo player, include player.vimeo.com in the frame-src
directive:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline' 'unsafe-eval'" /> <directive name="style-src" value="'self' 'unsafe-inline'" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self' data:" /> <directive name="frame-src" value="'self' player.vimeo.com" /> </content-security-policy>
To allow Instagram photos, include platform.instagram.com in the script-src
directive and www.instagram.com in the frame-src
directive:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline' 'unsafe-eval' platform.instagram.com" /> <directive name="style-src" value="'self' 'unsafe-inline'" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self'" /> <directive name="frame-src" value="'self' www.instagram.com" /> </content-security-policy>
Google maps
To embed a Google Map, include www.google.com to the frame-src
directive:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline' 'unsafe-eval'" /> <directive name="style-src" value="'self' 'unsafe-inline'" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self' data:" /> <directive name="frame-src" value="'self' www.google.com" /> </content-security-policy>
DrawIO
To allow drawings from DrawIO to be embedded, include www.drawio.com to the script-src
directive:
<content-security-policy> <directive name="default-src" value="'self'" /> <directive name="script-src" value="'self' 'unsafe-inline' 'unsafe-eval' www.drawio.com" /> <directive name="style-src" value="'self' 'unsafe-inline'" /> <directive name="object-src" value="'none'" /> <directive name="img-src" value="'self'" /> <directive name="frame-src" value="'self'" /> </content-security-policy>
Troubleshooting
Policy violations are reported on the developer tools of your browser, so if your content does not load correctly, check the security section of your developer tools.