Content Security Policy
The Content Security Policy (CSP) is a W3C recommendation that provides a framework designed to prevent the injection of malicious code into webpages. If injection happens, CSP helps developers prevent it from running. If it runs, CSP will help 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 Web page context.
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 will only allow 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 include:
- Retrieving fonts from an external source of typefaces,
- Loading scripts from a secure cache in order 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 (e.g. 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
Below 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 will be reported on the developer tools of your browser, so, if your content does not load correctly, check the security section of your developer tools.
