RFC Content Security Policy Changes

[blittle]

We find a lot of developers struggle with content security policies (CSP) and often disable it altogether rather than working through the challenges. We propose the following changes to make using Content Security Policies easier:

1. Move custom directives into a property in the first argument:

createContentSecurityPolicy({
  directives: {
    	styleSrc: [
        "'self'",
        "https://cdn.shopify.com",
        "https://some-custom-css.cdn",
      ],
  }
});

2. Add an option for presets, which will automatically add CSP directives necessary for specific vendors. For example, at the moment we automatically extend any custom directives with Shopify directives. This would change to only apply Shopify directives if the shopify preset is passed:

import {shopifyCSP} from '@shopify/hydrogen';

createContentSecurityPolicy({
  presets: [shopifyCSP()]
});

Third party vendors can easily provide their own preset. We probably can even provide presets for major vendors like Google tag manager:

createContentSecurityPolicy({
  presets: [GTM({previewMode: true})]
});

function GTM({previewMode = false}) {
  return function (nonce: string) {
    const directives = {
      scriptSrc: [`'nonce-${nonce}'`, 'img-src', 'www.googletagmanager.com'],
    };

    if (previewMode) {
      directives.scriptSrc.concat(['https://tagmanager.google.com']);
      directives.styleSrc = [
        'https://googletagmanager.com',
        'https://tagmanager.google.com',
        'https://fonts.googleapis.com',
      ];
      directives.imgSrc = [
        'https://googletagmanager.com',
        'https://ssl.gstatic.com',
        'https://www.gstatic.com',
      ];

      directives.fontSrc = ['https://fonts.gstatic.com', 'data:'];
    }

    return directives;
  };
}

Our CSP abstraction will combine all presets together, deduping entries.

Questions

1. Which built-in presets would be most beneficial for us to provide out of the box?
2. Should the nonce always be appended to the policy? If so, maybe we don’t need to pass it to the preset.
3. Are there other arguments helpful to pass to the preset?

[wizardlyhel]

I assume this will dedupe any repeated directives and the configs it passes but this does gets more complicated than we think. Take Google's products as an example https://developers.google.com/tag-platform/security/guides/csp . Say we have the following CSP setup:

createContentSecurityPolicy({
  presets: [
    shopifyCSP(),
    googleGA4(),
    googleAdsConversion(),
    googleFloodlight('<FLOODLIGHT-CONFIG-ID>'),
  ],
});

In this case, googleGA4 and googleAdsConversion would have repeated config for script-src for the entry https://www.googletagmanager.com .. but then it gets even more complicated for the case when there is declaration for both https://www.googletagmanager.com(Ads Conversion) and https://*.googletagmanager.com (GA4). Ideally, we should dedupe this and just use https://*.googletagmanager.com. However, this means that we would need to parse all urls in the config, organize and dedupe.

Don't forget that for some endpoints, if we are running localhost, we may need to swap or add the CSP config to a http protocol as well.

There is a need to limit CSP declaration as it does impact on the maximum header size which is a limitation set by the servers themselves

[wizardlyhel]

Also tried to add a GTM onto skeleton template, here is what I end up having to do:

  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    scriptSrc: [
      "'self'",
      'https://cdn.shopify.com',
      'https://*.googletagmanager.com'
    ],
    imgSrc: [
      "'self'",
      'https://cdn.shopify.com',
      'https://*.google-analytics.com',
      'https://*.googletagmanager.com'
    ],
    connectSrc: [
      "'self'",
      'https://*.google-analytics.com',
      'https://*.analytics.google.com',
      'https://*.googletagmanager.com',
    ],
    shop: {
      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
    }
  });

I had to replicate 'self' and 'https://cdn.shopify.com' for scriptSrc and imgSrc because scriptSrc and imageSrc was not part of Shopify's initial csp directive list .. instead it was part of defaultSrc.

The moment that a more specific directive is introduce into CSP header, it takes precedence over default-src.