在NextJS、nginx和材料界面(SSR)中使用CSP

0dxa2lsx 于 2022-12-17 发布在 Nginx

关注(0)|答案(5)|浏览(182)

TLDR：我在使用Material-UI（服务器端渲染）和Nginx（使用反向代理）为NextJS设置CSP时遇到了麻烦。
目前，我在加载材质-UI样式表和加载自己的样式时遇到问题
使用来自@material-ui/core/styles的makeStyles
注意事项：

我访问https://material-ui.com/styles/advanced/#next-js以启用SSR
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
我查看了https://material-ui.com/styles/advanced/#how-does-one-implement-csp，但我不确定如何让nginx遵循nonce值，因为nonce是作为不可预测的字符串生成的。

默认.conf（nginx）

# https://www.acunetix.com/blog/web-security-zone/hardening-nginx/

upstream nextjs_upstream {
  server localhost:3000;

  # We could add additional servers here for load-balancing
}

server {
  listen $PORT default_server;

  # redirect http to https. use only in production
  # if ($http_x_forwarded_proto != 'https') {
  #   rewrite ^(.*) https://$host$request_uri redirect;
  # }

  server_name _;

  server_tokens off;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;

  # hide how is app powered. In this case hide NextJS is running behind the scenes.
  proxy_hide_header X-Powered-By;

  # set client request body buffer size to 1k. Usually 8k
  client_body_buffer_size 1k;
  client_header_buffer_size 1k;
  client_max_body_size 1k;
  large_client_header_buffers 2 1k;

  # ONLY respond to requests from HTTPS
  add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";

  # to prevent click-jacking
  add_header X-Frame-Options "DENY";

  # don't load scripts or CSS if their MIME type as indicated by the server is incorrect
  add_header X-Content-Type-Options nosniff;

  add_header 'Referrer-Policy' 'no-referrer';

  # Content Security Policy (CSP) and X-XSS-Protection (XSS)
  add_header Content-Security-Policy "default-src 'none'; script-src 'self'; object-src 'none'; style-src 'self' https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap ; form-action 'none'; frame-ancestors 'none'; base-uri 'none';" always;
  add_header X-XSS-Protection "1; mode=block";

  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_prefer_server_ciphers on;

  location / {
    # limit request types to HTTP GET
    # ignore everything else
    limit_except GET { deny all; }

    proxy_pass http://nextjs_upstream;
  }
}

nginx

来源：https://stackoverflow.com/questions/65551212/using-csp-in-nextjs-nginx-and-material-uissr

5条答案

按热度按时间

vfwfrxfs1#

我找到的解决方案是在_document.tsx中向内联js和css添加nonce值

_文件.tsx

使用uuid v4生成nonce，并使用crypto nodejs模块将其转换为base64。然后创建内容安全策略并添加生成的nonce值。创建函数以完成创建nonce和生成CSP，并返回CSP字符串沿着nonce
在HTML Head中添加生成的CSP并添加 meta标记。

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import crypto from 'crypto';
import { v4 } from 'uuid';

// import theme from '@utils/theme';

/**
 * Generate Content Security Policy for the app.
 * Uses randomly generated nonce (base64)
 *
 * @returns [csp: string, nonce: string] - CSP string in first array element, nonce in the second array element.
 */
const generateCsp = (): [csp: string, nonce: string] => {
  const production = process.env.NODE_ENV === 'production';

  // generate random nonce converted to base64. Must be different on every HTTP page load
  const hash = crypto.createHash('sha256');
  hash.update(v4());
  const nonce = hash.digest('base64');

  let csp = ``;
  csp += `default-src 'none';`;
  csp += `base-uri 'self';`;
  csp += `style-src https://fonts.googleapis.com 'unsafe-inline';`; // NextJS requires 'unsafe-inline'
  csp += `script-src 'nonce-${nonce}' 'self' ${production ? '' : "'unsafe-eval'"};`; // NextJS requires 'self' and 'unsafe-eval' in dev (faster source maps)
  csp += `font-src https://fonts.gstatic.com;`;
  if (!production) csp += `connect-src 'self';`;

  return [csp, nonce];
};

export default class MyDocument extends Document {
  render(): JSX.Element {
    const [csp, nonce] = generateCsp();

    return (
      <Html lang='en'>
        <Head nonce={nonce}>
          {/* PWA primary color */}
          {/* <meta name='theme-color' content={theme.palette.primary.main} /> */}
          <meta property='csp-nonce' content={nonce} />
          <meta httpEquiv='Content-Security-Policy' content={csp} />
          <link
            rel='stylesheet'
            href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
          />
        </Head>
        <body>
          <Main />
          <NextScript nonce={nonce} />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

来源：https://github.com/vercel/next.js/blob/master/examples/with-strict-csp/pages/_document.js

nginx配置

请确保删除有关内容安全策略的添加标头。2它可能会覆盖CSP in _document.jsx文件。
替代解决方案
创建一个自定义服务器，并注入nonce和内容安全策略，这些可以在_document.tsx中访问

赞(0）回复(0）举报 2022-12-17

xkftehaa2#

建议在标题中设置内容安全策略，而不是在 meta标记中设置。在NextJS中，您可以通过修改next.config.js在标题中设置CSP。
下面是一个添加CSP标头的示例。

// next.config.js

const { nanoid } = require('nanoid');
const crypto = require('crypto');

const generateCsp = () => {
  const hash = crypto.createHash('sha256');
  hash.update(nanoid());
  const production = process.env.NODE_ENV === 'production';

  return `default-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; script-src 'sha256-${hash.digest(
    'base64'
  )}' 'self' 'unsafe-inline' ${
    production ? '' : "'unsafe-eval'"
  }; font-src https://fonts.gstatic.com 'self' data:; img-src https://lh3.googleusercontent.com https://res.cloudinary.com https://s.gravatar.com 'self' data:;`;
};

module.exports = {
  ...
  headers: () => [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: generateCsp()
        }
      ]
    }
  ]
};

下一个文档：https://nextjs.org/docs/advanced-features/security-headers

赞(0）回复(0）举报 2022-12-17

2guxujil3#

是的，为了将CSP与Material-UI（和JSS）一起使用，您需要使用nonce。
由于您有SSR，我看到两个选项：
1.您可以使用next-secure-headers包甚至Helmet在服务器端发布CSP头。我希望您找到一种方法，如何将nonce从Next传递到Material UI。
1.你可以在nginx配置中发布CSP头（现在你是怎么做的），并通过nginx生成'nonce'，即使它作为反向代理工作。你需要在nginx中有ngx_http_sub_module或ngx_http_substitutions_filter_module。
TL;DR;详细说明它是如何工作的，请参见https://scotthelme.co.uk/csp-nonce-support-in-nginx/（这比使用$request_id nginx var要复杂一点）

赞(0）回复(0）举报 2022-12-17

nszi6y054#

Nextjs配置支持CSP标头：
https://nextjs.org/docs/advanced-features/security-headers

赞(0）回复(0）举报 2022-12-17

nkoocmlb5#

客户端呈现应用程序的解决方案

使用中间件和getInitialProps可以实现此功能。您只需要SSR <Head>{...}</Head>就可以实现此功能。

页面/_中间件.js*

import {NextResponse} from 'next/server';
import {v4 as uuid} from 'uuid';

function csp(req, res) {
  const nonce = `nonce-${Buffer.from(uuid()).toString('base64')}`;
  const isProduction = process.env.NODE_ENV === 'production';
  const devScriptPolicy = ['unsafe-eval']; // NextJS uses react-refresh in dev
  res.headers.append('Content-Security-Policy', [
    ['default-src', 'self', nonce],
    ['script-src',  'self', nonce].concat(isProduction ? [] : devScriptPolicy),
    ['connect-src', 'self', nonce],
    ['img-src', 'self', nonce],
    ['style-src', 'self', nonce],
    ['base-uri',  'self', nonce],
    ['form-action', 'self', nonce],
  ].reduce((prev, [directive, ...policy]) => {
    return `${prev}${directive} ${policy.filter(Boolean).map(src => `'${src}'`).join(' ')};`
  }, ''));
}

export const middleware = (req) => {
  const res = NextResponse.next();
  csp(req, res);
  return res;
}

页面/_应用程序.js*

import Head from 'next/head';

const DisableSSR = ({children}) => {
  return (
    <div suppressHydrationWarning>
      {typeof window === 'undefined' ? null : children}
    </div>
  );
}

const Page = ({ Component, pageProps, nonce }) => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta property="csp-nonce" content={nonce} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <DisableSSR>
        <Component {...pageProps} />
      </DisableSSR>
    </div>
  );
}

Page.getInitialProps = async ({ctx: {req, res}}) => {
  const csp = {};
  res.getHeaders()['content-security-policy']?.split(';').filter(Boolean).forEach(part => {
    const [directive, ...source] = part.split(' ');
    csp[directive] = source.map(s => s.slice(1, s.length - 1));
  });
  return {
    nonce: csp['default-src']?.find(s => s.startsWith('nonce-')).split('-')[1],
  };
};

export default Page;

赞(0）回复(0）举报 2022-12-17

我来回答

在NextJS、nginx和材料界面(SSR)中使用CSP

5条答案

相关问题

热门标签

最新问答