fix(gatsby-source-wordpress): don't leak auth details (#32303)

(cherry picked from commit 4d7ec18)

Author: wardpeet

integration-tests/gatsby-source-wordpress/.env.test

@@ -11,4 +11,3 @@ WPGRAPHQL_GUTENBERG_VERSION=v0.3.8
 WPGRAPHQL_URL="http://localhost:8001/graphql"
 HTACCESS_USERNAME="admin"
 HTACCESS_PASSWORD="secret"
-WORDPRESS_BASIC_AUTH=YWRtaW46c2VjcmV0

integration-tests/gatsby-source-wordpress/__tests__/__snapshots__/index.js.snap

@@ -219,6 +219,24 @@ Object {
           },
           "name": "main menu",
         },
+        Object {
+          "count": null,
+          "databaseId": 37,
+          "id": "dGVybTozNw==",
+          "menuItems": Object {
+            "nodes": Array [],
+          },
+          "name": "Primary",
+        },
+        Object {
+          "count": null,
+          "databaseId": 38,
+          "id": "dGVybTozOA==",
+          "menuItems": Object {
+            "nodes": Array [],
+          },
+          "name": "Social Media",
+        },
       ],
     },
   },
@@ -324,6 +342,24 @@ Object {
           },
           "name": "main menu",
         },
+        Object {
+          "count": null,
+          "databaseId": 37,
+          "id": "dGVybTozNw==",
+          "menuItems": Object {
+            "nodes": Array [],
+          },
+          "name": "Primary",
+        },
+        Object {
+          "count": null,
+          "databaseId": 38,
+          "id": "dGVybTozOA==",
+          "menuItems": Object {
+            "nodes": Array [],
+          },
+          "name": "Social Media",
+        },
       ],
     },
   },

integration-tests/gatsby-source-wordpress/__tests__/index.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 require(`dotenv`).config({
   path: `.env.test`,
 })
@@ -53,14 +57,17 @@ describe(`[gatsby-source-wordpress] Build default options`, () => {
 describe(`[gatsby-source-wordpress] Run tests on develop build`, () => {
   let gatsbyDevelopProcess
 
-  beforeAll(async done => {
+  beforeAll(async () => {
     if (!isWarmCache) {
       await gatsbyCleanBeforeAll()
     }
 
-    if (isWarmCache && !process.env.WORDPRESS_BASIC_AUTH) {
+    if (
+      isWarmCache &&
+      (!process.env.HTACCESS_USERNAME || !process.env.HTACCESS_PASSWORD)
+    ) {
       console.log(
-        `Please add the env var WORDPRESS_BASIC_AUTH. It should be a string in the following pattern: base64Encode(\`\${username}:\${password}\`)`
+        `Please add the env var HTACCESS_USERNAME and HTACCESS_PASSWORD. It should be a string in the following pattern: base64Encode(\`\${username}:\${password}\`)`
       )
 
       await new Promise(resolve => setTimeout(resolve, 100))
@@ -78,7 +85,6 @@ describe(`[gatsby-source-wordpress] Run tests on develop build`, () => {
     gatsbyDevelopProcess = spawnGatsbyProcess(`develop`)
 
     await urling(`http://localhost:8000`)
-    done()
   })
 
   require(`../test-fns/index`)

integration-tests/gatsby-source-wordpress/gatsby-config.js

@@ -9,7 +9,7 @@ const requestConcurrency = 1
 const mediaItemTypeSettings = {
   localFile: {
     excludeByMimeTypes: ['video/mp4'],
-    /** 
+    /**
      * This is set to one byte smaller than the largest image in the Gatsby site so that we will have exactly one image that isn't fetched
      * during the site build
      */
@@ -99,6 +99,12 @@ module.exports = {
         develop: {
           hardCacheMediaFiles: true,
         },
+        auth: {
+          htaccess: {
+            username: process.env.HTACCESS_USERNAME,
+            password: process.env.HTACCESS_PASSWORD,
+          },
+        },
         ...wpPluginOptions,
       },
     },

integration-tests/gatsby-source-wordpress/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "A simple Gatsby WP site for running integrations tests",
   "scripts": {
-    "run-jest": "jest --runInBand && WARM_CACHE=true jest --runInBand",
+    "run-jest": "jest --runInBand && cross-env WARM_CACHE=true jest --runInBand",
     "test": "npm run docker-clean-start && npm run run-jest",
     "docker-start": "docker-compose up --build --force-recreate --always-recreate-deps --remove-orphans -d",
     "docker-clean-start": "docker-compose stop && docker-compose rm -f && docker volume rm gatsby-source-wordpress_db_data gatsby-source-wordpress_wp_data || true && docker-compose pull && docker-compose build --no-cache --force-rm --pull && docker-compose up -d"
@@ -24,6 +24,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "jest": "^26.6.3",
+    "node-fetch": "^2.6.1",
     "rimraf": "^3.0.2",
     "urling": "^1.0.7"
   }

integration-tests/gatsby-source-wordpress/test-fns/data-resolution.js

@@ -41,10 +41,10 @@ describe(`data resolution`, () => {
     expect(data[`allWpComment`].totalCount).toBe(1)
     expect(data[`allWpTaxonomy`].totalCount).toBe(3)
     expect(data[`allWpCategory`].totalCount).toBe(9)
-    expect(data[`allWpMenu`].totalCount).toBe(1)
+    expect(data[`allWpMenu`].totalCount).toBe(3)
     expect(data[`allWpMenuItem`].totalCount).toBe(4)
     expect(data[`allWpPostFormat`].totalCount).toBe(0)
-    expect(data[`allWpContentType`].totalCount).toBe(6)
+    expect(data[`allWpContentType`].totalCount).toBe(9)
   })
 
   testResolvedData({

integration-tests/gatsby-source-wordpress/test-fns/env-browser.js

@@ -0,0 +1,23 @@
+const fetch = require("node-fetch")
+
+jest.setTimeout(100000)
+
+describe(`auth in gatsby-browser`, () => {
+  test(`should not be present`, async () => {
+    const res = await fetch("http://localhost:8000/commons.js")
+    const jsFile = await res.text()
+
+    expect(jsFile.includes("/gatsby-source-wordpress/gatsby-browser.js")).toBe(
+      true
+    )
+    expect(jstFile)
+      .test(/auth\\":.*?\\"htaccess\\"/)
+      .toBe(false)
+    expect(jstFile)
+      .test(/\\"username\\": \\"admin\\"/)
+      .toBe(false)
+    expect(jstFile)
+      .test(/\\"password\\": \\"secret\\"/)
+      .toBe(false)
+  })
+})

integration-tests/gatsby-source-wordpress/test-fns/test-utils/authed-wpgql-request.js

@@ -12,7 +12,9 @@ exports.authedWPGQLRequest = async (query, { variables } = {}) => {
     variables,
     url: process.env.WPGRAPHQL_URL,
     headers: {
-      Authorization: `Basic ${process.env.WORDPRESS_BASIC_AUTH}`,
+      Authorization: `Basic ${Buffer.from(
+        `${process.env.HTACCESS_USERNAME}:${process.env.HTACCESS_PASSWORD}`
+      ).toString("base64")}`,
     },
   })
 

packages/gatsby-source-wordpress/src/steps/process-and-validate-plugin-options.ts

@@ -86,5 +86,8 @@ export const processAndValidatePluginOptions = (
     }
   })
 
+  // remove auth from pluginOptions so we don't leak into the browser
+  delete pluginOptions.auth
+
   return userPluginOptions
 }