feat(gatsby-plugin-fastify): add customizable headers with sensible defaults for security

.all-contributorsrc

@@ -328,6 +328,18 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "tsdexter",
+      "name": "Thomas Dexter",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4126987?v=4",
+      "profile": "https://github.com/tsdexter",
+      "contributions": [
+        "maintenance",
+        "code",
+        "doc",
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7

.changeset/neat-pans-serve.md

@@ -0,0 +1,5 @@
+---
+"gatsby-plugin-fastify": minor
+---
+
+Added to `options.features.headers` for configuring `customHeaders`, `useDefaultCaching`, and `useDefaultSecurity`. Please see the [Headers section](https://github.com/gatsby-uc/plugins/blob/main/packages/gatsby-plugin-fastify/README.md#headers) in the docs for more information.

integration-tests/plugin-fastify/benchmark.js

@@ -1,11 +1,12 @@
+const StatusCodes = require("http-status-codes");
 const Benchmark = require("benchmark");
 const {
   getServerConfig,
   setConfig,
   ConfigKeyEnum,
   getConfig,
-} = require("gatsby-plugin-fastify/utils/config");
-const { serveGatsby } = require("gatsby-plugin-fastify/plugins/gatsby");
+} = require("gatsby-plugin-fastify/dist/utils/config");
+const { serveGatsby } = require("gatsby-plugin-fastify/dist/plugins/gatsby");
 const Fastify = require("fastify");
 
 Benchmark.options.minSamples = 500;
@@ -37,7 +38,7 @@ setConfig(
 const serverConfig = getServerConfig();
 setConfig(ConfigKeyEnum.SERVER, serverConfig);
 
-function expectResp(def, path, code = 200) {
+function expectResp(def, path, code = StatusCodes.OK) {
   return (res) => {
     if (res.statusCode !== code) {
       console.log(`Expected status code ${code}, got ${res.statusCode} from ${path}`);
@@ -158,7 +159,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/nonExistentRoute",
           })
-          .then(expectResp(def, "/nonExistentRoute", 404));
+          .then(expectResp(def, "/nonExistentRoute", StatusCodes.NOT_FOUND));
       },
     })
     .add("Serve 500", {
@@ -169,7 +170,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/ssrBad/",
           })
-          .then(expectResp(def, "/ssrBad/", 500));
+          .then(expectResp(def, "/ssrBad/", StatusCodes.INTERNAL_SERVER_ERROR));
       },
     })
     .add("Serve Redirect", {
@@ -180,7 +181,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/perm-redirect/",
           })
-          .then(expectResp(def, "/perm-redirect/", 301));
+          .then(expectResp(def, "/perm-redirect/", StatusCodes.PERMANENT_REDIRECT));
       },
     })
     .add("Serve Reverse Proxy", {
@@ -191,7 +192,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/example-proxy/",
           })
-          .then(expectResp(def, "/example-proxy/", 200));
+          .then(expectResp(def, "/example-proxy/", StatusCodes.OK));
       },
     })
     .add("Serve Function", {
@@ -202,7 +203,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/api/test",
           })
-          .then(expectResp(def, "/api/test", 200));
+          .then(expectResp(def, "/api/test", StatusCodes.OK));
       },
     })
     .add("Serve Splat Function", {
@@ -213,7 +214,7 @@ function expectResp(def, path, code = 200) {
             method: "GET",
             url: "/api/test1/thisShouldWork",
           })
-          .then(expectResp(def, "/api/test1/thisShouldWork", 200));
+          .then(expectResp(def, "/api/test1/thisShouldWork", StatusCodes.OK));
       },
     })
     .on("cycle", function (event) {

integration-tests/plugin-fastify/gatsby-config.js

@@ -25,7 +25,50 @@ module.exports = {
     },
     {
       resolve: `gatsby-plugin-fastify`,
-      options: {},
+      options: {
+        features: {
+          headers: {
+            customHeaders: {
+              "/posts/page-1*": {
+                "x-test-page-specific": "shows on /posts/page-1",
+              },
+              "/posts/page-2*": {
+                "X-Content-Type-Options": "nosniff by default, overwritten for this page",
+              },
+              "/**": {
+                "x-test-all-pages": "shows on every page/file",
+              },
+              "/icon.png": {
+                "cache-control": "max-age=60000",
+              },
+              "/component*.js": {
+                "x-test-js": "root js file",
+                "x-cache-control": "overwrite cache-control for all root js files",
+                "cache-control": "max-age=60000",
+              },
+              "/ssr/**": {
+                "x-test-ssr-kept": "ssr page",
+                "x-test-ssr-overwrite": "ssr page",
+              },
+              "/api/test": {
+                "x-test-function-kept": "function page",
+                "x-test-function-overwrite": "function page",
+              },
+              "/generated/page-6": {
+                "x-test-dsg-kept": "dsg page",
+              },
+              "/page-data/generated/page-6/page-data.json": {
+                "x-test-dsg-kept": "dsg page data",
+              },
+              "/posts/page-1/index.html": {
+                "x-test-page-specific": "shows on /posts/page-1 and its page-data (overwritten)",
+              },
+            },
+            useDefaultCaching: true,
+            useDefaultSecurity: true,
+          },
+        },
+      },
     },
     "gatsby-plugin-sitemap",
     {

integration-tests/plugin-fastify/package.json

@@ -11,6 +11,7 @@
     "benchmark": "node benchmark.js",
     "develop": "gatsby develop",
     "start": "gserve",
+    "start:devserver": "yarn build:deps && yarn start",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
@@ -29,6 +30,7 @@
     "gatsby-source-faker": "^5.7.0",
     "gatsby-source-filesystem": "^5.7.0",
     "gatsby-transformer-sharp": "^5.7.0",
+    "pino-pretty": "^10.0.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

integration-tests/plugin-fastify/src/api/splat/[splat].js

@@ -1,3 +1,9 @@
+import { isGatsbyHosting } from "../../utils/functions";
+
 export default function handler(req, res) {
-  res.code(200).send({ splat: req.params.splat });
+  if (isGatsbyHosting(res)) {
+    res.status(200).send({ splat: req.params.splat });
+  } else {
+    res.code(200).send({ splat: req.params.splat });
+  }
 }

integration-tests/plugin-fastify/src/api/test.js

@@ -1,3 +1,5 @@
+import { isGatsbyHosting } from "../utils/functions";
+
 const responseData = [
   {
     _id: "612d652f43f0c05240ed09b1",
@@ -268,5 +270,13 @@ const responseData = [
 ];
 
 export default function handler(req, res) {
-  res.code(200).send(responseData);
+  if (isGatsbyHosting(res)) {
+    res.setHeader("x-test-function-overwrite", "Overwritten by FUNCTION");
+    res.status(200).send(responseData);
+  } else {
+    res.headers({
+      "x-test-function-overwrite": "Overwritten by FUNCTION",
+    });
+    res.code(200).send(responseData);
+  }
 }

integration-tests/plugin-fastify/src/api/test1/[splat].js

@@ -1,3 +1,9 @@
+import { isGatsbyHosting } from "../../utils/functions";
+
 export default function handler(req, res) {
-  res.code(200).send(req.params);
+  if (isGatsbyHosting(res)) {
+    res.status(200).send(req.params);
+  } else {
+    res.code(200).send(req.params);
+  }
 }

integration-tests/plugin-fastify/src/api/wildcard/[...].js

@@ -1,3 +1,9 @@
+import { isGatsbyHosting } from "../../utils/functions";
+
 export default function handler(req, res) {
-  res.code(200).send(req.params);
+  if (isGatsbyHosting(res)) {
+    res.status(200).send(req.params);
+  } else {
+    res.code(200).send(req.params);
+  }
 }

integration-tests/plugin-fastify/src/components/LazyComponent.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export default function LazyComponent() {
+  return (
+    <div>
+      <h1 data-lazy="true">Lazy Component</h1>
+    </div>
+  );
+}

integration-tests/plugin-fastify/src/components/Post.js

@@ -1,13 +1,19 @@
 import * as React from "react";
 import { Link } from "gatsby";
 
+const LazyComponent = React.lazy(() => import(`./LazyComponent`));
+
 export default function PostPage({ title, content }) {
   return (
     <article>
       <Link to="/">Return to Home</Link>
 
       <h1>{title}</h1>
       <div dangerouslySetInnerHTML={{ __html: content }} />
+
+      <React.Suspense fallback={<div>Loading</div>}>
+        <LazyComponent />
+      </React.Suspense>
     </article>
   );
 }

integration-tests/plugin-fastify/src/pages/index.js

@@ -1,5 +1,9 @@
 import * as React from "react";
 import { Link, withPrefix } from "gatsby";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "../../src/styles/test.css";
+
 // styles
 const pageStyles = {
   color: "#232129",
@@ -153,6 +157,8 @@ const IndexPage = () => {
           <a href={withPrefix("/ssr_named_splat/test/path")}>Named Splat routed SSR page</a>
         </li>
       </ul>
+
+      <StaticImage src="../images/icon.png" alt="Icon" layout="fixed" width={165} />
     </main>
   );
 };

integration-tests/plugin-fastify/src/pages/ssr.js

@@ -18,6 +18,7 @@ export async function getServerData() {
     return {
       headers: {
         "x-test": "Custom Headers Work!",
+        "x-test-ssr-overwrite": "Overwritten by SSR",
       },
       props: await res.json(),
     };

integration-tests/plugin-fastify/src/styles/test.css

@@ -0,0 +1,3 @@
+body {
+  outline: 2px solid red;
+}

integration-tests/plugin-fastify/src/utils/functions.js

@@ -0,0 +1,3 @@
+export function isGatsbyHosting(response) {
+  return response.setHeader !== undefined;
+}

packages/gatsby-plugin-fastify/README.md

@@ -255,3 +255,61 @@ export default function handler(req: FastifyRequest, res: FastifyReply) {
 ### Gatsby Routing
 
 We have implemented a compatability layer to support the Gatsby flavor of routing for [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/routing/) and [File System Routing API](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#syntax-client-only-routes). This should be transparent and if you follow the Gatsby docs for routing we should now support all those modes. This very well might not be perfect, if you have issues with routing please file a bug with a reproduction.
+
+### Headers
+
+Sensible default security headers are added to all files/paths. These headers include:
+
+- X-Frame-Options: DENY
+- X-XSS-Protection: 1; mode=block
+- X-Content-Type-Options: nosniff
+- Referrer-Policy: same-origin
+
+Headers for user-defined path patterns can be added/overwritten via `options.features.headers.customHeaders`.
+
+We use [picomatch](https://www.npmjs.com/package/picomatch) for pattern matching. [Globbing](https://www.npmjs.com/package/picomatch#basic-globbing) can be used to match paths. For example, to add headers to all posts with a URL structure such as `/posts/category-name/post-name` you would use a pattern like `/posts/**`. `/posts/*`, with a single asterisk, would only match the second level sub-directory after `/posts/` (in this case the `category-name`), not the third level where the posts reside.
+
+```
+{
+	resolve: `gatsby-plugin-fastify`,
+	options: {
+		features: {
+			headers: {
+				useDefaultCaching: true, // default: true
+				useDefaultSecurity: true, // default: true
+				customHeaders: {
+					"/posts/**": { // all categories and posts
+						"x-test": "post",
+					},
+					"/posts/fun-stuff/trampolines": { // just the trampoline post
+						"x-test": "trampoline post",
+					},
+				},
+			},
+		},
+	},
+},
+```
+
+As in the example above, successive matching entries in `customHeaders` will overwrite previous matches. This successive overwriting includes overwriting the default caching and default security headers if you are including them via `options.features.headers.useDefaultCaching` and/or `options.features.headers.useDefaultSecurity` which are both `true` by default.
+
+For SSR pages, headers configured in `options.features.headers.customHeaders` will be added to the matching routes alongside headers returned from `getServerData`. If both places set the same header the value in `getServerData` will take precedence.
+
+You can unset a previously configured headers value, either custom or defaults, by setting its value to `"undefined"` (type `string`). For example:
+
+```
+{
+	resolve: `gatsby-plugin-fastify`,
+	options: {
+		features: {
+			headers: {
+				customHeaders: {
+					"/no-cache-header": {
+						"cache-control": "undefined",
+					},
+				},
+			},
+		},
+	},
+},
+```

packages/gatsby-plugin-fastify/package.json

@@ -33,15 +33,22 @@
     "@fastify/accepts": "^4.1.0",
     "@fastify/http-proxy": "^8.4.0",
     "@fastify/middie": "^8.1.0",
+    "@fastify/reply-from": "^9.0.1",
     "@fastify/static": "^6.9.0",
     "fastify-plugin": "^4.5.0",
     "fs-extra": "^11.1.0",
     "gatsby-core-utils": "^4.7.0",
     "gatsby-plugin-utils": "^4.7.0",
     "http-status-codes": "^2.2.0",
+    "just-compose": "^2.3.0",
+    "just-map-object": "^2.3.0",
+    "just-map-values": "^3.2.0",
+    "just-merge": "^3.2.0",
+    "just-typeof": "^3.2.0",
     "mime": "^3.0.0",
     "open": "^8.4.2",
     "picomatch": "^2.3.1",
+    "webpack-assets-manifest": "^5.1.0",
     "yargs": "^17.7.1"
   },
   "devDependencies": {
@@ -53,8 +60,9 @@
     "@types/mime": "^3.0.1",
     "@types/node": "^18.14.6",
     "@types/picomatch": "^2.3.0",
+    "@types/webpack-assets-manifest": "^5.1.0",
     "@types/yargs": "^17.0.22",
-    "babel-jest": "^29.4.3",
+    "babel-jest": "^29.5.0",
     "babel-preset-gatsby-package": "^3.7.0",
     "cross-env": "^7.0.3",
     "jest": "^29.4.3"

packages/gatsby-plugin-fastify/src/__tests__/__files__/public/app-hash.js

@@ -0,0 +1 @@
+console.log("Hello from app-hash.js");

packages/gatsby-plugin-fastify/src/__tests__/__files__/public/component-fake-hash.js

@@ -0,0 +1 @@
+console.log("Hellow from component-fake-hash.js");

packages/gatsby-plugin-fastify/src/__tests__/__files__/public/css-hash.css

@@ -0,0 +1 @@
+body { border: 1px solid red; }

packages/gatsby-plugin-fastify/src/__tests__/__files__/public/fake-chunk.js

@@ -0,0 +1 @@
+console.log("Hello from fake-chunk.js");