Introduction

The Content-Security-Policy header adds the layer of security that facilitates web application administrators to control resources the user agent is allowed to load for a given page. This helps guard against cross-site scripting attacks (XSS), packet sniffing and data injection attacks.

Syntax

Content-Security-Policy: {policy-directive}; {policy-directive}

Example

Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline';
object-src 'none'

Directive Terms

Fetch directive

Fetch directives control the locations from which certain resource types may be loaded. All fetch directives fall back to default-src.

script-src

Directive specifies valid sources for JavaScript.

Nonce

  • Usage for script elements Content Security Policy Level 2
  • Ideally, developers would avoid inline scripts entirely and whitelist scripts by URL.
  • However, in some cases, removing inline scripts can be difficult or impossible
  • For those cases, developers can whitelist scripts using a randomly generated nonce.
Content-Security-Policy: default-src 'self'; script-src 'self'
https://example.com 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
  alert('Still blocked because nonce is wrong.');
</script>

default-src

Directive serves as a fallback for the other CSP fetch directives.

style-src

Directive specifies valid sources for stylesheets.

frame-ancestors

Directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.

object-src

Directive specifies valid sources for the <object>, <embed>, and <applet> elements.

report-to

Directive instructs the user agent to store reporting endpoints for an origin.

Implementing in AWS Amplify

# customHTTP.yml
customHeaders:
  - pattern: '**/*'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self'; style-src 'self'; img-src 'self' data:;"

Troubleshooting

Mitigating with CSP policy directive for corresponding errors:

Directive 1: img-src ‘self’ data:

Refused to load the image 'data:image/png;base64,somerandomnumber' because it
violates the following Content Security Policy directive: "img-src 'self' data"

Directive 2: connect-src https://*.example1.com

Refused to connect to 'https://hello.example1.com/' because it violates the
following Content Security Policy directive: "default-src 'self'". Note that
'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Directive 3: connect-src wss://example.net

Refused to connect to 'wss://example.net' because it violates the following
Content Security Policy directive.

Directive 4: style-src-elem ‘self’ ‘unsafe-inline’ https://example.com

Refused to load the stylesheet 'https://example.com/custom.css' because it
violates the following Content Security Policy directive: "style-src 'self'
'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so
'style-src' is used as a fallback.

<link rel="stylesheet" type="text/css" href="https://example.com/custom.css" />

Directive 5: font-src ‘self’ data:;

Refused specific: data:font/woff;base64,"someBase64encoded font",

Validation Tools