Glossary

A-Z glossary of PageSeeder concepts

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.

Note

These may change, check with the service provider directly to ensure that you've enabled all requested 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 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

See also

Created on , last edited on