Content Security Policy

A Content Security Policy (CSP) is a good way to prevent cross-site scripting and code injection. By setting a CSP, your site will load only certain resources from certain endpoints.

Generating your Content Security Policy

Writing Content Security Policy manually can be hard. Fortunately there are tools, which can make it easier. In this example we will use the Report URI Content Security Policy Generator.

Minimal CSP required for Smart Slider 3

This section will describe the Content-Security-Policy options which are required for Smart Slider 3 if we use Google fonts.

Introduction

Hosts fields must be chosen according to the domains your CSP will be created for:

• If you use a domain without sub-domains, the Hosts field should be in a format like: example.com
• if you use only sub-domains, the Hosts field should be your sub-domain in a format like: subdomain.example.com or *.example.com. The * is a wildcard character, which can be anything.
• if you use both the main domain and sub-domains, then both should appear in the Hosts field in a format like: example.com *.example.com

default-src

• None

script-src

• Self
• Inline
• Eval
• Hosts: your domain in a format mentioned above eg.: *.example.com example.com

style-src

• Self
• Data
• Inline
• Hosts:
  • if you don't use Google fonts, your domain in a format mentioned above eg.: *.example.com example.com
  • if you use Google fonts, your domain in a format mentioned above and the domain for the font eg.: *.example.com example.com *.googleapis.com

img-src

• Self
• Data
• Hosts:
  • if you use images only from your domain, your domain in a format mentioned above, eg.: *.example.com example.com
  • if you use images from also other domains, then you must list those domains also eg.: *.example.com example.com thirdpartydomain.com

font-src

• If you use icon layer:
  • Self
  • Data
  • Hosts: your domain in a format mentioned above eg.: *.example.com example.com
• If you use Google fonts:
  • Self
  • Hosts: *.googleapis.com *.gstatic.com
• If you don't use Icon Layer and neither Google fonts:
  • None

connect-src

• None

media-src

• If you use video/audio layer
  • Self
  • Hosts:
    • If the video/audio is coming from your domain: *.example.com example.com
    • If the video/audio is coming from other domains, you must list them too.

object-src

• None

frame-src

• If you have a page builder with live preview or a sites with ajax loading
  • Self
  • Data
  • Hosts: your domain in a format mentioned above eg.: *.example.com example.com
• Otherwise:
  • None

Sample output

Content-Security-Policy: default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-hashes' 'unsafe-eval' *.example.com example.com; style-src 'self' data: 'unsafe-inline' *.example.com example.com *.googleapis.com; img-src 'self' data: *.example.com example.com; font-src 'self' data: *.example.com example.com *.googleapis.com *.gstatic.com; connect-src 'none'; media-src 'self' *.example.com example.com; object-src 'none'; frame-src 'none'