Skip to content

Conversation

@EECOLOR
Copy link
Member

@EECOLOR EECOLOR commented Nov 5, 2024

This pull request adds Content Security Policy header support.

Blocking unsafe-inline is one of the most important directives to avoid. But this will make all inline script tags unusable. Two approaches to solve 'trusted' inline scripts:

  1. Provide a hash in the CSP header of the code in the script
  2. Use a nonce, a value that is unique for each request and is both present in the header and in the script tag

Option 2. is the easiest to implement. The problem with this approach is that each request will get a unique header, making caching layers outside of the application unusable.

So we are stuck with option 1. For script tags created with this library a hash could be determined without using code. In real applications we however also use the script tags to provide information the dataLayer. While not the only use case, it's one of the more well known ones.

What we do in this pull request:

  • Switch all <script> tags to our <SafeScript> tag
  • When rendering set a global variable to collect hashes
  • When the SafeScript tag renders, it creates a hash of the content and adds it to the collection
  • The collected hashes are stored in the response
  • The helmet CSP middleware uses the hashes in the creation of the CSP header

Note: the code should still be tested in a real environment

@EECOLOR EECOLOR requested review from HJSielcken and jduijm November 5, 2024 12:28
Copy link

@HJSielcken HJSielcken left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's talk tomorrow about this stuff

}


async function sendHtml(req, res, template, location, { status, headers, data }) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not have to be async right?

app.use(helmet(Object.assign(
{
hsts: false, // hsts-headers are sent by our loadbalancer
contentSecurityPolicy: false,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels a bit strange that we have

const { contentSecurityPolicy, ...helmetOptionsToUse } = helmetOptions || {}

and

 Object.assign( {
    hsts: false, // hsts-headers are sent by our loadbalancer
    contentSecurityPolicy: false,
    referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
  },helmetOptionsToUse)

Does that mean that the resulting object has always contentSecurityPolicy: false?

}

function addCspHeaders(req, res) {
return new Promise((resolve, reject) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the reason we need to wrap this in a Promise? And make 'sendHtmlWithCspHeaders' async?
For me it seems that the template rendering is just a bit more involved (namely collecting the extra script SHA's), but no extra async work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants