RFC Discussion: Content Security Policies #1244

blittle · 2022-05-10T21:05:37Z

blittle
May 10, 2022
Maintainer

Hydrogen doesn't provide a default content security policy. Instead it needs to be manually added. This can be done multiple ways:

1. Headers within `App.server.jsx`:

function App({response}) {
  response.headers.set(
    'Content-Security-Policy',
    `default-src 'self' data: 'unsafe-inline'`,
  );

  return (
    ...
  );
}

export default renderHydrogen(App);

Pros:

CSP is immediately defined for the page
CSP via Headers provides more features including report-uri, frame-ancestors, and sandbox

Cons:

Unable to use unsafe-inline directive because streaming relies on inline scripts. This makes a hydrogen app more susceptible to XSS attacks.

2. `meta` tags within `App.server.jsx`:

import {Head} from '@shopify/hydrogen/client';

function App() {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <Head>
        <meta
          http-equiv="Content-Security-Policy"
          content="default-src 'self' data: 'unsafe-inline'"
        />
      </Head>
      ...
  )
}

Pros:

The unsafe-inline directive can be used, because by the time the meta tag is added, most likely all streamed inline scripts have executed from the server. This makes a hydrogen app more secure.

Cons:

Unable to use advanced CSP features like report-uri, frame-ancestors, and sandbox
Potentially less secure in that insecure cross domain requests could be made before the meta tag is added to the DOM.

Questions

Could we explore adding hash values for each inline script? This might be difficult because we'd need to know the contents of all the scripts up front and hash them, negating the value of streaming.
Could we build a component that can safely add a <meta> tag with an unsafe-inline CSP where we know no other content is going to stream and be broken by the CSP?
Should the starter template ship with a default CSP? At the moment, the starter template at a minimum needs default-src 'self' data: cdn.shopify.com fonts.googleapis.com fonts.gstatic.com

frehner · 2022-05-10T21:14:02Z

frehner
May 10, 2022
Collaborator

Should the starter template ship with a default CSP? At the moment, the starter template at a minimum needs default-src 'self' data: cdn.shopify.com fonts.googleapis.com fonts.gstatic.com

I'm torn on this one. I've seen from another open-source project (single-spa) that setting a CSP by default turns into a fairly large maintenance burden due to all the devs that are either just trying out the project or have never used or understood CSPs. It's nice that we can give good security by default, but we also turn into the people that have to educate what a CSP is, how to change it, and manage all the questions and issues that come from that.

0 replies

frandiox · 2022-05-11T02:44:41Z

frandiox
May 11, 2022
Maintainer

Could we explore adding hash values for each inline script? This might be difficult because we'd need to know the contents of all the scripts up front and hash them, negating the value of streaming.

Not sure if this is possible with streaming.

However, it's possible to pass a nonce to our handleRequest and it will be included in all the inline script tags generated by Hydrogen:

// App.server.jsx

// ...
const handleRequest = renderHydrogen(App);

function generateNonce (numberOfBytes) {
  const bytes = new Uint8Array(numberOfBytes);
  crypto.getRandomValues(bytes);
  return btoa(String.fromCharCode.apply(null, bytes));
}

export default async function(request, options) {
  const nonce = import.meta.env.PROD ? generateNonce(18) : undefined;

  const response = await handleRequest(request, {...options, nonce});

  if (nonce) {
    response.headers.set(
      'Content-Security-Policy',
      `default-src 'self' data: 'unsafe-inline'; script-src 'nonce-${nonce}' 'self'  https://cdn.shopify.com; img-src 'self' https://cdn.shopify.com; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src 'self'  https://fonts.gstatic.com`,
    );
  }

  return response;
}

Unable to use unsafe-inline directive because streaming relies on inline scripts. This makes a hydrogen app more susceptible to XSS attacks.

I think with the nonce we don't need unsafe-inline anymore for script tags?

2 replies

blittle May 11, 2022
Maintainer Author

I like this idea. Would there be value in trying to abstract this into a helper function / component?

frandiox May 12, 2022
Maintainer

I guess we could have a bunch of CSP utilities, just like we have cookie/session and cache utilities 🤔

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RFC Discussion: Content Security Policies #1244

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

RFC Discussion: Content Security Policies #1244

blittle May 10, 2022 Maintainer

1. Headers within App.server.jsx:

2. meta tags within App.server.jsx:

Questions

Replies: 2 comments · 2 replies

frehner May 10, 2022 Collaborator

frandiox May 11, 2022 Maintainer

blittle May 11, 2022 Maintainer Author

frandiox May 12, 2022 Maintainer

blittle
May 10, 2022
Maintainer

1. Headers within `App.server.jsx`:

2. `meta` tags within `App.server.jsx`:

Replies: 2 comments 2 replies

frehner
May 10, 2022
Collaborator

frandiox
May 11, 2022
Maintainer

blittle May 11, 2022
Maintainer Author

frandiox May 12, 2022
Maintainer