benhodgson87/_document.tsx Secret

## _document.tsx
import {
  getCspInitialProps,
  provideComponents
} from '@next-safe/middleware/dist/document';
import Document, { Html, Main, DocumentContext } from 'next/document';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await getCspInitialProps({
      ctx,
      trustifyScripts: true,
      trustifyStyles: true
    });

    return { ...initialProps };
  }

  render() {
    const { Head, NextScript } = provideComponents(this.props);
    return (
      <Html>
        <Head>
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/favicon-16x16.png"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

## _middleware.ts
import {
  chain,
  chainMatch,
  isPageRequest,
  csp,
  strictDynamic,
  strictInlineStyles
} from '@next-safe/middleware';

const contentSecurityMiddleware = [
  csp({
    directives: {
      'default-src': ['self'],
      'connect-src': [
        'self',
        '*.google-analytics.com',
        'https://www.googletagmanager.com',
      ],
      'script-src': [
        'self',
        'https://www.googletagmanager.com',
      ],
      'style-src': ['self', 'fonts.googleapis.com'],
      'img-src': ['self', 'data:'],
      'font-src': ['self', 'https://fonts.gstatic.com']
    }
  }),
  strictDynamic(),
  strictInlineStyles()
];

// We use chain here as we have another bit of middleware for handling redirects,
// but removing this middleware doesn't alter behaviour
export default chain(
  chainMatch(isPageRequest)(...contentSecurityMiddleware)
);
	import {
	getCspInitialProps,
	provideComponents
	} from '@next-safe/middleware/dist/document';
	import Document, { Html, Main, DocumentContext } from 'next/document';

	export default class MyDocument extends Document {
	static async getInitialProps(ctx: DocumentContext) {
	const initialProps = await getCspInitialProps({
	ctx,
	trustifyScripts: true,
	trustifyStyles: true
	});

	return { ...initialProps };
	}

	render() {
	const { Head, NextScript } = provideComponents(this.props);
	return (
	<Html>
	<Head>
	<link
	rel="apple-touch-icon"
	sizes="180x180"
	href="/apple-touch-icon.png"
	/>
	<link
	rel="icon"
	type="image/png"
	sizes="32x32"
	href="/favicon-32x32.png"
	/>
	<link
	rel="icon"
	type="image/png"
	sizes="16x16"
	href="/favicon-16x16.png"
	/>
	</Head>
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}
	import {
	chain,
	chainMatch,
	isPageRequest,
	csp,
	strictDynamic,
	strictInlineStyles
	} from '@next-safe/middleware';

	const contentSecurityMiddleware = [
	csp({
	directives: {
	'default-src': ['self'],
	'connect-src': [
	'self',
	'*.google-analytics.com',
	'https://www.googletagmanager.com',
	],
	'script-src': [
	'self',
	'https://www.googletagmanager.com',
	],
	'style-src': ['self', 'fonts.googleapis.com'],
	'img-src': ['self', 'data:'],
	'font-src': ['self', 'https://fonts.gstatic.com']
	}
	}),
	strictDynamic(),
	strictInlineStyles()
	];

	// We use chain here as we have another bit of middleware for handling redirects,
	// but removing this middleware doesn't alter behaviour
	export default chain(
	chainMatch(isPageRequest)(...contentSecurityMiddleware)
	);