docs: custom security headers (aws-amplify#963)

* Add custom security headers * Add dev mode headers, move csp to document * Remove Google fonts * Allow codesandbox iframe
dpilch · Dec 9, 2021 · fe5f2d8 · fe5f2d8
1 parent 70add7b
commit fe5f2d8
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 24 deletions.
diff --git a/customHttp.yml b/customHttp.yml
@@ -0,0 +1,17 @@
+# Custom headers when serving docs through Amplify Hosting
+#
+# See: https://docs.aws.amazon.com/amplify/latest/userguide/custom-headers.html#setting-custom-headers
+applications:
+  - appRoot: docs
+    customHeaders:
+      - pattern: "**/*"
+        headers:
+          - key: "Strict-Transport-Security"
+            value: "max-age=31536000; includeSubDomains"
+          - key: "X-Frame-Options"
+            value: "SAMEORIGIN"
+          - key: "X-XSS-Protection"
+            value: "1; mode=block"
+          - key: "X-Content-Type-Options"
+            value: "nosniff"
+          # CSP set in _document.page.tsx meta tag
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -19,6 +19,37 @@ module.exports = withNextPluginPreval({
     ignoreBuildErrors: true,
   },
 
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: '/(.*)',
+        headers: [
+          // IMPORTANT:
+          // These are ONLY used for the Dev server and MUST
+          // be kept in sync with customHttp.yml
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains',
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'SAMEORIGIN',
+          },
+          {
+            key: 'X-XSS-Protection',
+            value: '1; mode=block',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          // for 'Content-Security-Policy', see _document.page.tsx
+        ],
+      },
+    ];
+  },
+
   // These redirects are because of the IA change from previous docs
   redirects() {
     return [

diff --git a/docs/src/pages/_document.page.tsx b/docs/src/pages/_document.page.tsx
@@ -1,28 +1,53 @@
+import crypto from 'crypto';
+import type { HtmlProps } from 'next/dist/shared/lib/utils';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 const favicon =
   process.env.NODE_ENV === 'development'
     ? '/svg/favicon-dev.svg'
     : '/svg/favicon.svg';
 
+const cspHashOf = (text) => {
+  const hash = crypto.createHash('sha256');
+  hash.update(text);
+  return `sha256-${hash.digest('base64')}`;
+};
+
+// See: https://github.com/vercel/next.js/blob/master/examples/with-strict-csp/pages/_document.js
+const getCSPContent = (context: Readonly<HtmlProps>) => {
+  const cspInlineScriptHash = cspHashOf(
+    NextScript.getInlineScriptSource(context)
+  );
+
+  // Dev environment
+  if (process.env.NODE_ENV !== 'production') {
+    return `default-src 'self';
+      style-src 'self' 'unsafe-inline';
+      font-src 'self' data:;
+      frame-src *.codesandbox.io;
+      script-src 'unsafe-eval' 'self' '${cspInlineScriptHash}'
+    `;
+  }
+
+  // Prod environment
+  return `default-src 'self';
+    style-src 'self' 'unsafe-inline';
+    font-src 'self';
+    frame-src *.codesandbox.io;
+    script-src 'self' '${cspInlineScriptHash}'
+  `;
+};
+
 class MyDocument extends Document {
   render() {
     return (
       <Html>
         <Head>
-          <link rel="icon" type="image/svg+xml" href={favicon} />
-          {/* Adding custom variable fonts from google */}
-          {/* Including multiple to show theming capabilities */}
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link
-            rel="preconnect"
-            href="https://fonts.gstatic.com"
-            crossOrigin="true"
-          />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&family=Work+Sans:wght@100..900&display=swap"
-            rel="stylesheet"
+          <meta
+            httpEquiv="Content-Security-Policy"
+            content={getCSPContent(this.props)}
           />
+          <link rel="icon" type="image/svg+xml" href={favicon} />
         </Head>
         <body>
           <Main />

diff --git a/docs/src/theme.ts b/docs/src/theme.ts
@@ -116,12 +116,6 @@ export const theme: Theme = {
     {
       selector: '.classic [data-amplify-theme="amplify-docs"]',
       tokens: {
-        fonts: {
-          default: {
-            variable: { value: `'Open Sans'` },
-            static: { value: `'Open Sans'` },
-          },
-        },
         colors: {
           brand: {
             primary: usePalette('blue'),
@@ -143,12 +137,6 @@ export const theme: Theme = {
     {
       selector: '.terminal [data-amplify-theme="amplify-docs"]',
       tokens: {
-        fonts: {
-          default: {
-            variable: { value: "'Work Sans'" },
-            static: { value: "'Work Sans'" },
-          },
-        },
         colors: {
           green: {
             10: { value: '#C7EFCA' },