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>

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

See also

• content-security-policy.com 
• W3C - Content Security Policy 
• MDN - Content Security Policy