typescript - 使用 TypeScript 表达 CSP Nonce

Question

我有一个 TypeScript 快速项目，我尝试添加带有 Helmet 的 CSP Nonce。

app.use(helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
        scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`],
    }
}));

但是当我启动程序时，它会抛出以下错误:

./index.ts:820
return new TSError(diagnosticText, diagnosticCodes);
       ^
TSError: ⨯ Unable to compile TypeScript:
src/app.ts:17:59 - error TS2339: Property 'locals' does not exist on type 'ServerResponse'.

17         scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
                                                         ~~~~~~

at createTSError (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:820:12)
at reportTSError (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:824:19)
at getOutput (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:1014:36)
at Object.compile (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:1322:43)
at Module.m._compile (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:1454:30)
at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Object.require.extensions.<computed> [as .ts] (/home/frdiolin/WebstormProjects/Calender2.0/node_modules/ts-node/src/index.ts:1458:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
diagnosticCodes: [ 2339 ]
}

当我尝试在 JS 中启动相同的代码时，它工作正常。 出了什么问题？

Answer 1

简而言之:将 res 转换为 Express Response。请参阅下面的代码片段。

这是一个仅限 TypeScript 的错误。 res.locals 是一项 Express 功能，但 Helmet 设计为无需 Express 即可工作，因此 res.locals 不是 Helmet 类型的一部分。换句话说，res 不知道 .locals 属性，因为 Helmet 不认为它在那里。

您可以通过告诉 TypeScript 这是一个 Express 响应对象来解决此问题。使用res作为响应。

这是一个例子:

import express, { Response } from "express";

// ...

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      scriptSrc: [
        "'self'",
        // The `res as Response` is what you need.
        (_req, res) => `'nonce-${(res as Response).locals.cspNonce}'`,
      ],
    },
  })
);