Application Security

This guide covers how we manage state in the app.

Table of Contents

Authentication
Content Security Policies

Authentication

See Auth Services documentation for overview of how authentication and authorization works.

Content Security Policies

As of 1.4.2-GA and 1.5.0-GA, we have introduced Content Security Policy headers for the starter.

Tip	Read about Content Security Policy.

With this there are several changes introduced:

All inline scripts have been moved to separate js files
- The inline script in public/silent-callback.html is now imported from public/silent-callback.js.

CSP headers are now set in index.js. The effective default CSP header is as follows

default-src 'self';
script-src 'self';
connect-src 'self';
img-src 'self' https:;
style-src 'self' 'unsafe-inline';
font-src 'self';
base-uri 'self';
form-action 'self';
child-src 'self';
frame-src 'self';
frame-ancestors 'self'

To control the values of these either modify them directly in samples/express/index.js or use the following properties:

Directive Property Default Value Notes

Directive	Property	Default Value	Notes
`default-src`	`CONTENT_SECURITY_POLICY_DEFAULT`	`'self'`
`connect-src`	`CONTENT_SECURITY_POLICY_CONNECT`	`'self'`
`script-src`	`CONTENT_SECURITY_POLICY_SCRIPT`	`'self'`	A nonce based on UUID v4 is also generated for each request to support inline scripts related to PayPal and Google Tag Manager.
`img-src`	`CONTENT_SECURITY_POLICY_IMG`	`'self' https:`	It is recommended to restrict this further based on the actually expected image domains such as `'self' www.mycompany.com`.
`style-src`	`CONTENT_SECURITY_POLICY_STYLE`	`'self' fonts.googleapis.com`	A nonce based on UUID v4 is also generated for each request to support inline styles related to theme variables.
`font-src`	`CONTENT_SECURITY_POLICY_FONT`	`'self' fonts.gstatic.com`
`base-uri`	`CONTENT_SECURITY_POLICY_BASE_URI`	`'self'`
`form-action`	`CONTENT_SECURITY_POLICY_FORM`	`'self'`
`child-src`	`CONTENT_SECURITY_POLICY_CHILD`	`'self'`
`frame-src`	`CONTENT_SECURITY_POLICY_CHILD`	`'self'`	This is set using the same property as `child-src` for now for browser-compatibility. Previously, it was deprecated in CSP level 2, but in CSP level 3 it was undeprecated.
`frame-ancestors`	`CONTENT_SECURITY_POLICY_FRAME_ANCESTORS`	`'self'`

default-src

CONTENT_SECURITY_POLICY_DEFAULT

'self'

connect-src

CONTENT_SECURITY_POLICY_CONNECT

'self'

script-src

CONTENT_SECURITY_POLICY_SCRIPT

'self'

A nonce based on UUID v4 is also generated for each request to support inline scripts related to PayPal and Google Tag Manager.

img-src

CONTENT_SECURITY_POLICY_IMG

'self' https:

It is recommended to restrict this further based on the actually expected image domains such as 'self' www.mycompany.com.

style-src

CONTENT_SECURITY_POLICY_STYLE

'self' fonts.googleapis.com

A nonce based on UUID v4 is also generated for each request to support inline styles related to theme variables.

font-src

CONTENT_SECURITY_POLICY_FONT

'self' fonts.gstatic.com

base-uri

CONTENT_SECURITY_POLICY_BASE_URI

'self'

form-action

CONTENT_SECURITY_POLICY_FORM

'self'

child-src

CONTENT_SECURITY_POLICY_CHILD

'self'

frame-src

CONTENT_SECURITY_POLICY_CHILD

'self'

This is set using the same property as child-src for now for browser-compatibility. Previously, it was deprecated in CSP level 2, but in CSP level 3 it was undeprecated.

frame-ancestors

CONTENT_SECURITY_POLICY_FRAME_ANCESTORS

'self'

Support for generating for Stripe, PayPal, or GTM
- GTM
  - script-src 'self' 'nonce-<generated-uuidv4>'
  - img-src 'self' https: www.googletagmanager.com
  - conncet-src 'self' www.google-analytics.com
  - child-src 'self' www.googletagmanager.com (only needed if JS is disabled)
    
    frame-src will be set to the same for browser compatibility
- PayPal
  - script-src 'self' 'nonce-<generated-uuidv4>' *.paypal.com
  - img-src 'self' https: data: *.paypal.com
    
    Need to allow data (base64) images or some PayPal images will break
  - connect-src 'self' *.paypal.com
  - child-src 'self' *.paypal.com
    
    frame-src will be set to the same for browser compatibility
- Stripe (also see Stripe’s Guide on CSP.)
  - script-src 'self js.stripe.com
  - connect-src 'self' api.stripe.com
  - child-src 'self' js.stripe.com hooks.stripe.com
    
    frame-src will be set to the same for browser compatibility