Question

因此，我尝试使用nounce属性填充next.js项目中的样式组件，但未成功。正在设置CSP的style-src，但是由于未在样式中设置nounce，因此会引发错误。我还需要做些什么才能使这项工作成功？

到目前为止，我的情况如下：

server.js

server.use((req, res, next) => {
  // nonce should be base64 encoded
  res.locals.styleNonce = Buffer.from(uuidv4()).toString('base64')
  next()
});

  server.use('*', (req, res, next) => {
    global.__webpack_nonce__ = res.locals.styleNonce;
    next()
  });

  server.use(helmet.contentSecurityPolicy({
      directives: {
          styleSrc: ["'self'", (req, res) => `'nonce-${res.locals.styleNonce}'`],
      }
  }));

_document.js

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }
  render() {
    return (
      <Html lang="en">
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Answer 1

在YYYY-mm-ddTHH:MM:SS中，虽然必须通过props提供现时值，但Next.js具有将现时值应用于document.js和head中所有已加载脚本/链接的功能-给定了它提供了。

我面对的唯一主要问题是在组件级别的body中有条件地加载脚本，例如，在接受cookie之后……事情变得更加复杂。

next/head

严格的CSP：如何为next.js中的样式化组件设置现时？

1 个答案: