Add support for csp nonces being set on the reply object

Author: airhorns

packages/fastify-renderer/package.json

@@ -87,6 +87,7 @@
     "@types/sanitize-filename": "^1.6.3",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
+    "cheerio": "^1.0.0-rc.12",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",

packages/fastify-renderer/src/node/Plugin.ts

@@ -99,7 +99,7 @@ export class FastifyRendererPlugin {
 
     if (file.endsWith('.js')) {
       if (root) {
-        bus.push('tail', `<script type="module" src="${file}"></script>`)
+        bus.loadScript(file)
       } else {
         bus.preloadModule(file)
       }

packages/fastify-renderer/src/node/RenderBus.tsx

@@ -1,4 +1,5 @@
 import { Readable } from 'stream'
+import { Render, scriptTag, stylesheetLinkTag } from './renderers/Renderer'
 
 export interface Stack {
   content: string[]
@@ -12,6 +13,8 @@ export class RenderBus {
   stacks: Record<string, Stack> = {}
   included = new Set<string>()
 
+  constructor(readonly render: Render) {}
+
   private createStack(key) {
     const stack: Stack = (this.stacks[key] = {
       content: [],
@@ -57,6 +60,10 @@ export class RenderBus {
   linkStylesheet(path: string) {
     if (this.included.has(path)) return
     this.included.add(path)
-    this.push('head', `<link rel="stylesheet" href="${path}">`)
+    this.push('head', stylesheetLinkTag(this.render, path))
+  }
+
+  loadScript(src: string) {
+    this.push('tail', scriptTag(this.render, ``, { src }))
   }
 }

packages/fastify-renderer/src/node/renderers/Renderer.ts

@@ -41,3 +41,21 @@ export interface Renderer {
   buildVirtualServerEntrypointModuleID(renderable: RenderableRegistration): string
   vitePlugins(): Plugin[]
 }
+
+export function scriptTag(render: Render, content: string, attrs: Record<string, string> = {}) {
+  if ('cspNonce' in render.reply) {
+    attrs.nonce ??= (render.reply as any).cspNonce.script
+  }
+
+  const attrsString = Object.entries(attrs)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ')
+
+  return `<script type="module" ${attrsString}>${content}</script>`
+}
+
+export function stylesheetLinkTag(render: Render, href: string) {
+  const nonceString = 'cspNonce' in render.reply ? `nonce="${(render.reply as any).cspNonce.style}"` : ''
+
+  return `<link rel="stylesheet" href="${href}" ${nonceString}>`
+}

packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx

@@ -10,7 +10,7 @@ import { RenderBus } from '../../RenderBus'
 import { wrap } from '../../tracing'
 import { FastifyRendererHook } from '../../types'
 import { mapFilepathToEntrypointName, unthunk } from '../../utils'
-import { Render, RenderableRegistration, Renderer } from '../Renderer'
+import { Render, RenderableRegistration, Renderer, scriptTag } from '../Renderer'
 
 const CLIENT_ENTRYPOINT_PREFIX = '/@fstr!entrypoint:'
 const SERVER_ENTRYPOINT_PREFIX = '/@fstr!server-entrypoint:'
@@ -195,24 +195,23 @@ export class ReactRenderer implements Renderer {
   }
 
   private startRenderBus(render: Render<any>) {
-    const bus = new RenderBus()
+    const bus = new RenderBus(render)
 
     // push the script for the react-refresh runtime that vite's plugin normally would
     if (this.plugin.devMode) {
-      bus.push('tail', this.reactRefreshScriptTag())
+      bus.push('tail', this.reactRefreshScriptTag(render))
     }
 
     // push the props for the entrypoint to use when hydrating client side
-    bus.push('tail', `<script type="module">window.__FSTR_PROPS=${JSON.stringify(render.props)};</script>`)
+    bus.push('tail', scriptTag(render, `window.__FSTR_PROPS=${JSON.stringify(render.props)};`))
 
     // if we're in development, we just source the entrypoint directly from vite and let the browser do its thing importing all the referenced stuff
     if (this.plugin.devMode) {
       bus.push(
         'tail',
-        `<script type="module" src="${path.join(
-          this.plugin.assetsHost,
-          this.entrypointScriptTagSrcForClient(render)
-        )}"></script>`
+        scriptTag(render, ``, {
+          src: path.join(this.plugin.assetsHost, this.entrypointScriptTagSrcForClient(render)),
+        })
       )
     } else {
       const entrypointName = this.buildVirtualClientEntrypointModuleID(render)
@@ -500,13 +499,15 @@ export const routes = [
     }
   }
 
-  private reactRefreshScriptTag() {
-    return `<script type="module">
+  private reactRefreshScriptTag(render: Render) {
+    return scriptTag(
+      render,
+      `
       import RefreshRuntime from "${path.join(this.viteConfig.base, '@react-refresh')}"
       RefreshRuntime.injectIntoGlobalHook(window)
       window.$RefreshReg$ = () => {}
       window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true
-    </script>`
+      window.__vite_plugin_react_preamble_installed__ = true`
+    )
   }
 }

packages/fastify-renderer/test/Plugin.spec.ts

@@ -2,10 +2,9 @@ import fs from 'fs'
 import path from 'path'
 import { DefaultDocumentTemplate } from '../src/node/DocumentTemplate'
 import { FastifyRendererOptions } from '../src/node/Plugin'
-import { RenderBus } from '../src/node/RenderBus'
 import { ReactRenderer } from '../src/node/renderers/react/ReactRenderer'
 import { RenderableRegistration } from '../src/node/renderers/Renderer'
-import { newFastifyRendererPlugin } from './helpers'
+import { newFastifyRendererPlugin, newRenderBus } from './helpers'
 
 jest.mock('fs', () => ({
   ...jest.requireActual('fs'), // import and retain the original functionalities
@@ -76,7 +75,7 @@ describe('FastifyRendererPlugin', () => {
   describe('pushImportTagsFromManifest()', () => {
     test('should throw when an entry is not found in the manifest', async () => {
       const plugin = newFastifyRendererPlugin({} as FastifyRendererOptions)
-      const bus = new RenderBus()
+      const bus = newRenderBus()
       expect(() => plugin.pushImportTagsFromManifest(bus, 'entry-name')).toThrow()
     })
 

packages/fastify-renderer/test/csp.spec.ts

@@ -0,0 +1,51 @@
+import * as cheerio from 'cheerio'
+import path from 'path'
+
+import FastifyRenderer from '../src/node'
+import { newFastify } from './helpers'
+
+const testComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-style-importer.tsx'))
+const testLayoutComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-layout.tsx'))
+
+const options = {
+  vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? 'info') as any },
+  devMode: true,
+  renderer: {
+    mode: 'sync' as const,
+    type: 'react' as const,
+  },
+}
+
+describe('csp nonce handling', () => {
+  let server
+  beforeAll(async () => {
+    server = await newFastify()
+    await server.register(FastifyRenderer, options)
+    server.setRenderConfig({
+      base: '',
+      layout: testLayoutComponent,
+    })
+
+    server.decorateReply('cspNonce', {
+      style: 'style-nonce',
+      script: 'script-nonce',
+    })
+    server.get('/render-test', { render: testComponent }, async (_request, _reply) => ({ a: 1, b: 2 }))
+  })
+
+  test('should script and style tags with csp nonces if available', async () => {
+    const response = await server.inject({
+      method: 'GET',
+      url: '/render-test',
+      headers: { Accept: 'text/html' },
+    })
+
+    expect(response.statusCode).toEqual(200)
+    const $ = cheerio.load(response.body as string)
+    const scripts = $('script')
+    expect(scripts).toHaveLength(3)
+    for (const tag of scripts) {
+      expect(tag.attribs.nonce).toEqual('script-nonce')
+    }
+  })
+})

packages/fastify-renderer/test/fixtures/styles.css

@@ -0,0 +1,3 @@
+body {
+  color: red;
+}

packages/fastify-renderer/test/fixtures/test-style-importer.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './styles.css'
+
+// eslint-disable-next-line react/display-name
+export default function (props: { a: string; b: number }) {
+  if (typeof props.a == 'undefined') {
+    throw new Error('expected to be passed props from render function')
+  }
+  return (
+    <>
+      <h1>{props.a}</h1>
+      <p>{props.b}</p>
+    </>
+  )
+}

packages/fastify-renderer/test/helpers.ts

@@ -18,7 +18,7 @@ export const newFastify = async (options?: FastifyServerOptions) => {
 }
 
 export const newRenderBus = () => {
-  return new RenderBus()
+  return new RenderBus(getMockRender({}))
 }
 
 export const newFastifyRendererPlugin = (options: FastifyRendererOptions = {}) => {