hooks.js CSP example

hooks.js

// https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
// https://scotthelme.co.uk/content-security-policy-an-introduction/
// scanner: https://securityheaders.com/

const rootDomain = `your-domain.com`; // or your server IP for dev

const directives = {
  'img-src': [
    "*",
    "'self'",
    "data:",
  ],
  'font-src': [
    "*",
    "'self'",
    "data:",
  ],
  'style-src': [
    "'self'",
    "'unsafe-inline'"
  ],
  'default-src': [
    "'self'",
    rootDomain,
    "ws://" + rootDomain,
    "https://*.google.com",
    "https://*.googleapis.com",
    "https://*.firebase.com",
    "https://*.gstatic.com",
    "https://*.cloudfunctions.net",
    "https://*.algolia.net",
    "https://*.facebook.com",
    "https://*.facebook.net",
    "https://*.stripe.com",
    "https://*.sentry.io",
  ],
  'script-src': [
    "'self'",
    "'unsafe-eval'",
    "'unsafe-inline'",
    rootDomain,
    "https://*.stripe.com",
    "https://*.facebook.com",
    "https://*.facebook.net",
    "https://*.sentry.io",
    "https://polyfill.io",
    // (req, res) => `'nonce-${res.locals.nonce}'`,
  ],
  'frame-src': [
    "https://*.stripe.com",
    "https://*.facebook.com",
    "https://*.facebook.net",
  ]
};

let CSP = Object.entries(directives).map(([key, arr]) => key + ' ' + arr.join(' ')).join('; ');

export async function handle(request, render) {
  const response = await render(request);
  console.log('handle', { ...response.headers });

  return {
    ...response,
    headers: {
      ...response.headers,
      'X-Frame-Options': 'SAMEORIGIN',
      'Referrer-Policy': 'no-referrer',
      'Feature-Policy': `microphone 'none'; geolocation 'none'`,
      'Permissions-Policy': `geolocation=(self "${rootDomain}"), camera=(), fullscreen=*`,
      'X-Content-Type-Options': `nosniff`,
      'Content-Security-Policy': CSP
    }
  };
}