fix(gatsby-plugin-mdx): Do not leak frontmatter into page (#35859) (#…

…35913)

Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>

e2e-tests/mdx-less-babel/cypress/integration/frontmatter.js

@@ -0,0 +1,91 @@
+const page = {
+  js: `/frontmatter-js`,
+  javascript: `/frontmatter-javascript`,
+  yaml: `/frontmatter-yaml`,
+  json: `/frontmatter-json`,
+  graphqlQuery: `/frontmatter-graphql-query`,
+}
+
+// Attribute selector for element we assert against in pages
+const selector = `[data-cy="frontmatter"]`
+
+// Strings used for frontmatter titles
+const titles = {
+  notParsed: `I should not be parsed`,
+  parsed: `I am parsed`,
+}
+
+// Frontmatter that should not be rendered
+const otherKey = `Some other key`
+
+describe(`webpack loader`, () => {
+  describe(`---yaml frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.yaml).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, titles.parsed)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---json frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.json).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, titles.parsed)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---js frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.js).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, `disabled`)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---javascript frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.javascript).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, `disabled`)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+})
+
+describe(`data layer`, () => {
+  it(`---js or ---javascript frontmatter should not parse by default`, () => {
+    cy.visit(page.graphqlQuery).waitForRouteChange()
+    cy.contains(titles.notParsed).should(`not.exist`)
+  })
+})
+
+it(`---js and ---javascript frontmatter should not allow remote code execution`, () => {
+  cy.readFile(`cypress/fixtures/file-to-attempt-rce-on.txt`).should(
+    `eq`,
+    `Nothing here, do not remove`
+  )
+})

e2e-tests/mdx/src/pages/javascript-frontmatter.mdx → e2e-tests/mdx-less-babel/src/pages/frontmatter-javascript.mdx

@@ -3,14 +3,15 @@
 require(`fs`).writeFileSync(`${process.cwd()}/cypress/fixtures/file-to-attempt-rce-on.txt`, (new Error('Helpful stack trace if this does execute. It should not execute.')).stack)
 console.trace()
 return {
-title: `I should not be parsed`
+title: `I should not be parsed`,
+otherKey: `Some other key`
 }
 })()
 
 ---
 
 <h1>JS frontmatter engine is disabled by default</h1>
 
-<span data-cy="js-frontmatter">
+<span data-cy="frontmatter">
   {props.pageContext.frontmatter?.title || `disabled`}
 </span>

e2e-tests/mdx-less-babel/src/pages/js-frontmatter.mdx → e2e-tests/mdx-less-babel/src/pages/frontmatter-js.mdx

@@ -3,14 +3,15 @@
 require(`fs`).writeFileSync(`${process.cwd()}/cypress/fixtures/file-to-attempt-rce-on.txt`, (new Error('Helpful stack trace if this does execute. It should not execute.')).stack)
 console.trace()
 return {
-title: `I should not be parsed`
+title: `I should not be parsed`,
+otherKey: `Some other key`
 }
 })()
 
 ---
 
 <h1>JS frontmatter engine is disabled by default</h1>
 
-<span data-cy="js-frontmatter">
+<span data-cy="frontmatter">
   {props.pageContext.frontmatter?.title || `disabled`}
 </span>

e2e-tests/mdx-less-babel/src/pages/frontmatter-json.mdx

@@ -0,0 +1,8 @@
+---json
+{ "title": "I am parsed", "otherKey": "Some other key" }
+
+---
+
+<h1>A page with JSON frontmatter</h1>
+
+<span data-cy="frontmatter">{props.pageContext.frontmatter?.title}</span>

e2e-tests/mdx-less-babel/src/pages/frontmatter-yaml.mdx

@@ -0,0 +1,9 @@
+---yaml
+title: I am parsed
+otherKey: Some other key
+
+---
+
+<h1>A page with YAML frontmatter</h1>
+
+<span data-cy="frontmatter">{props.pageContext.frontmatter?.title}</span>

e2e-tests/mdx/cypress/integration/frontmatter.js

@@ -0,0 +1,91 @@
+const page = {
+  js: `/frontmatter-js`,
+  javascript: `/frontmatter-javascript`,
+  yaml: `/frontmatter-yaml`,
+  json: `/frontmatter-json`,
+  graphqlQuery: `/frontmatter-graphql-query`,
+}
+
+// Attribute selector for element we assert against in pages
+const selector = `[data-cy="frontmatter"]`
+
+// Strings used for frontmatter titles
+const titles = {
+  notParsed: `I should not be parsed`,
+  parsed: `I am parsed`,
+}
+
+// Frontmatter that should not be rendered
+const otherKey = `Some other key`
+
+describe(`webpack loader`, () => {
+  describe(`---yaml frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.yaml).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, titles.parsed)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---json frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.json).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, titles.parsed)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---js frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.js).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, `disabled`)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+
+  describe(`---javascript frontmatter`, () => {
+    beforeEach(() => {
+      cy.visit(page.javascript).waitForRouteChange()
+    })
+
+    it(`should parse`, () => {
+      cy.get(selector).invoke(`text`).should(`eq`, `disabled`)
+    })
+
+    it(`should not leak into the page`, () => {
+      cy.contains(otherKey).should(`not.exist`)
+    })
+  })
+})
+
+describe(`data layer`, () => {
+  it(`---js or ---javascript frontmatter should not parse by default`, () => {
+    cy.visit(page.graphqlQuery).waitForRouteChange()
+    cy.contains(titles.notParsed).should(`not.exist`)
+  })
+})
+
+it(`---js and ---javascript frontmatter should not allow remote code execution`, () => {
+  cy.readFile(`cypress/fixtures/file-to-attempt-rce-on.txt`).should(
+    `eq`,
+    `Nothing here, do not remove`
+  )
+})

e2e-tests/mdx/src/pages/frontmatter-graphql-query.js

@@ -0,0 +1,30 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function PageRunningGraphqlResolversOnJSFrontmatterTestInputs({
+  data,
+}) {
+  return <pre>{JSON.stringify(data.allMdx.nodes, null, 2)}</pre>
+}
+
+export const query = graphql`
+  {
+    allMdx(filter: { slug: { glob: "frontmatter-engine/*" } }) {
+      nodes {
+        frontmatter {
+          title
+        }
+        body
+        excerpt
+        tableOfContents
+        timeToRead
+        wordCount {
+          paragraphs
+          sentences
+          words
+        }
+        mdxAST
+      }
+    }
+  }
+`

e2e-tests/mdx-less-babel/src/pages/javascript-frontmatter.mdx → e2e-tests/mdx/src/pages/frontmatter-javascript.mdx

@@ -3,14 +3,15 @@
 require(`fs`).writeFileSync(`${process.cwd()}/cypress/fixtures/file-to-attempt-rce-on.txt`, (new Error('Helpful stack trace if this does execute. It should not execute.')).stack)
 console.trace()
 return {
-title: `I should not be parsed`
+title: `I should not be parsed`,
+otherKey: `Some other key`
 }
 })()
 
 ---
 
 <h1>JS frontmatter engine is disabled by default</h1>
 
-<span data-cy="js-frontmatter">
+<span data-cy="frontmatter">
   {props.pageContext.frontmatter?.title || `disabled`}
 </span>

e2e-tests/mdx/src/pages/js-frontmatter.mdx → e2e-tests/mdx/src/pages/frontmatter-js.mdx

@@ -3,14 +3,15 @@
 require(`fs`).writeFileSync(`${process.cwd()}/cypress/fixtures/file-to-attempt-rce-on.txt`, (new Error('Helpful stack trace if this does execute. It should not execute.')).stack)
 console.trace()
 return {
-title: `I should not be parsed`
+title: `I should not be parsed`,
+otherKey: `Some other key`
 }
 })()
 
 ---
 
 <h1>JS frontmatter engine is disabled by default</h1>
 
-<span data-cy="js-frontmatter">
+<span data-cy="frontmatter">
   {props.pageContext.frontmatter?.title || `disabled`}
 </span>

e2e-tests/mdx/src/pages/frontmatter-json.mdx

@@ -0,0 +1,8 @@
+---json
+{ "title": "I am parsed", "otherKey": "Some other key" }
+
+---
+
+<h1>A page with JSON frontmatter</h1>
+
+<span data-cy="frontmatter">{props.pageContext.frontmatter?.title}</span>

e2e-tests/mdx/src/pages/frontmatter-yaml.mdx

@@ -0,0 +1,9 @@
+---yaml
+title: I am parsed
+otherKey: Some other key
+
+---
+
+<h1>A page with YAML frontmatter</h1>
+
+<span data-cy="frontmatter">{props.pageContext.frontmatter?.title}</span>

packages/gatsby-plugin-mdx/loaders/mdx-loader.js

@@ -183,12 +183,9 @@ export const _frontmatter = ${JSON.stringify(data)};`
   // check needs to happen first.
   if (!hasDefaultExport(content, options) && !!defaultLayout) {
     debug(`inserting default layout`, defaultLayout)
-    const { content: contentWithoutFrontmatter, matter } = grayMatter(
-      content,
-      options
-    )
+    const { content: contentWithoutFrontmatter } = grayMatter(content, options)
 
-    code = `${matter ? matter : ``}
+    code = `
 
 import DefaultLayout from "${slash(defaultLayout)}"