Merge pull request #498 from hashicorp/version-6.0.0

Get ready for 6.0.0 release

Author: RubenSandwich

.prettierrc

@@ -1,4 +1,4 @@
 {
-  "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "semi": false
 }

README.md

@@ -292,7 +292,7 @@ export async function getStaticProps() {
 
 This library exposes a function and a component, `serialize` and `<MDXRemote />`. These two are purposefully isolated into their own files -- `serialize` is intended to be run **server-side**, so within `getStaticProps`, which runs on the server/at build time. `<MDXRemote />` on the other hand is intended to be run on the client side, in the browser.
 
-- **`serialize(source: string, { mdxOptions?: object, scope?: object, parseFrontmatter?: boolean })`**
+- **`serialize(source: string, { mdxOptions?: object, scope?: object, parseFrontmatter?: boolean, blockJS?: boolean, blockDangerousJS?: boolean })`**
 
   **`serialize`** consumes a string of MDX. It can also optionally be passed options which are [passed directly to MDX](https://mdxjs.com/docs/extending-mdx/), and a scope object that can be included in the MDX scope. The function returns an object that is intended to be passed into `<MDXRemote />` directly.
 
@@ -313,6 +313,13 @@ This library exposes a function and a component, `serialize` and `<MDXRemote />`
       },
       // Indicates whether or not to parse the frontmatter from the MDX source
       parseFrontmatter: false,
+      // Block JavaScript expressions in MDX (e.g., {variable}, {func()})
+      // When true, these expressions are removed. Defaults to true.
+      blockJS: true,
+      // Provides a best effort option to block dangerous JavaScript when blockJS is false (JS is allowed).
+      // Prevents access to eval, Function, process, require, and other dangerous globals.
+      // Only applies when blockJS is false. Defaults to true for security.
+      blockDangerousJS: true,
     }
   )
   ```
@@ -383,6 +390,18 @@ This library evaluates a string of JavaScript on the client side, which is how i
 
 If you have a CSP on your website that disallows code evaluation via `eval` or `new Function()`, you will need to loosen that restriction in order to utilize `next-mdx-remote`, which can be done using [`unsafe-eval`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#common_sources).
 
+### JavaScript Expressions in MDX
+
+By default, JavaScript expressions (like `{variable}` or `{func()}`) are **disabled for security** for versions 6.0.0 and above.
+
+If you need to enable JavaScript expressions:
+
+1. **Trusted content with protection (recommended)**: Set `blockJS: false` in serialize options. By default, `blockDangerousJS: true` is enabled, which will provide a best effort option to blocks dangerous operations like `eval`, `Function`, `process`, `require`, and other globals that could lead to remote code execution (RCE).
+
+2. **Completely trusted content only**: Set both `blockJS: false` and `blockDangerousJS: false` to allow all JavaScript.
+
+**Warning:** Only set `blockDangerousJS: false` if you completely trust the MDX content source. This removes critical security protections and could allow RCE attacks.
+
 ## TypeScript
 
 This project does include native types for TypeScript use. Both `serialize` and `<MDXRemote />` have types normally as you'd expect, and the library also exports a type which you can use to type the result of `getStaticProps`.

__tests__/fixtures/basic/pages/index.jsx

@@ -60,6 +60,7 @@ export async function getStaticProps() {
   const mdxSource = await serialize(source, {
     mdxOptions: { remarkPlugins: [paragraphCustomAlerts] },
     parseFrontmatter: true,
+    blockJS: false,
   })
 
   return { props: { mdxSource } }

__tests__/fixtures/rsc/app/app-dir-mdx/compile-mdx/page.js

@@ -25,6 +25,7 @@ export default async function Page() {
     options: {
       mdxOptions: { remarkPlugins: [] },
       parseFrontmatter: true,
+      blockJS: false,
     },
   })
 

__tests__/fixtures/rsc/app/app-dir-mdx/mdxremote/page.js

@@ -27,6 +27,7 @@ export default async function Page() {
         options={{
           mdxOptions: { remarkPlugins: [] },
           parseFrontmatter: true,
+          blockJS: false,
         }}
       />
     </>

__tests__/serialize.test.tsx

@@ -55,6 +55,7 @@ describe('serialize', () => {
       scope: {
         bar: 'test',
       },
+      blockJS: false,
     })
     expect(result).toMatchInlineSnapshot(`"<p>test</p>"`)
   })
@@ -151,7 +152,7 @@ export const bar = 'bar'`
 
     const result = await renderStatic(
       `<Test content={<>Rendering a fragment</>} />`,
-      { components }
+      { components, blockJS: false }
     )
     expect(result).toMatchInlineSnapshot(`"Rendering a fragment"`)
   })
@@ -195,7 +196,7 @@ hello: world
 ---
 
 # Hello {frontmatter.hello}`,
-      { parseFrontmatter: true }
+      { parseFrontmatter: true, blockJS: false }
     )
 
     expect(result).toMatchInlineSnapshot(`"<h1>Hello world</h1>"`)

__tests__/utils.tsx

@@ -30,11 +30,15 @@ export async function renderStatic(
     scope = {},
     mdxOptions,
     parseFrontmatter,
+    blockJS,
+    blockDangerousJS,
   }: Partial<SerializeOptions & Pick<MDXRemoteProps, 'components'>> = {}
 ): Promise<string> {
   const mdxSource = await serialize(mdx, {
     mdxOptions,
     parseFrontmatter,
+    blockJS,
+    blockDangerousJS,
   })
 
   return ReactDOMServer.renderToStaticMarkup(