Content security policy

The Content Security Policy (CSP) is a W3C recommendation designed to prevent cross-site scripting, clickjacking and code injection attacks by making Web servers declare what content can be trusted. It is supported by most current browsers.

Layout manager

From version 5.9, PageSeeder will send a Content-Security-Policy HTTP response header to prevent malicious content from being executed in the Web page context.

It is sent by the layout manager for every HTML page or dialog and can be configured in the layout manager configuration file config.xml. Unless it is redefined, the content security policy is automatically inherited by all layouts.

Default configuration

The default configuration only allows inline content and content to be served by PageSeeder 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 this policy is strict, it ensures that no malicious content can be executed from external sources.

Custom configuration

In some cases, the content security policy needs to be relaxed in order to allow content from trusted external sources. This can occur when:

Fonts need to be loaded from custom styles
Scripts need to be loaded from a CDN for custom pages
HTML or images in media fragments refer to external content.

First ensure that your layout configuration is using 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. Each policy directive is defined as a separate <directive> element.

allow fonts

To allow from an external site (e.g. Google fonts), you can 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 a few examples of trusted content, that can be useful to enable.

Note

These may change, check with the service provider directly to ensure that you've enabled all requested content.

YouTube

To allow YouTube videos to be embedded, 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>

Instagram

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.

Security policy violation example on Firefox

Glossary