safe-mdx 0.0.4 → 0.0.6

package/README.md

@@ -10,13 +10,15 @@
 
 ## Features
 
--   Render MDX without `eval`, so you can render MDX in Cloudflare Workers and Vercel Edge
+-   Render MDX without `eval` on the server, so you can render MDX in Cloudflare Workers and Vercel Edge
 -   Works with React Server Components
 -   Supports custom MDX components
 
 ## Why
 
-The default MDX renderer uses `eval` (or `new Function(code)`) to render MDX components. This is a security risk if the MdX code comes from untrusted sources and it's not allowed in some environments like Cloudflare Workers.
+The default MDX renderer uses `eval` (or `new Function(code)`) to render MDX components in the server. This is a security risk if the MdX code comes from untrusted sources and it's not allowed in some environments like Cloudflare Workers.
+
+For example in an hypothetical platform similar to Notion, where users can write Markdown and publish it as a website, an user could be able to write MDX code that extracts secrets from the server in the SSR pass, using this library that is not possible. This is what happened with Mintlify platform in 2024.
 
 Some use cases for this package are:
 
@@ -47,7 +49,7 @@ This is a paragraph
 
 export function Page() {
     return (
-        <MdxRenderer
+        <SafeMdxRenderer
             code={code}
             components={{
                 // You can pass your own components here
@@ -97,7 +99,43 @@ const parser = remark().use(remarkMdx)
 const mdast = parser.parse(code)
 
 export function Page() {
-    return <MdxRenderer code={code} mdast={mdast} />
+    return <SafeMdxRenderer code={code} mdast={mdast} />
+}
+```
+
+## Reading the frontmatter
+
+safe-mdx renderer ignores the frontmatter, to get its values you wil have to parse the MDX to mdast and read it there.
+
+```tsx
+import { SafeMdxRenderer } from 'safe-mdx'
+import { remark } from 'remark'
+import remarkFrontmatter from 'remark-frontmatter'
+import { Yaml } from 'mdast'
+import yaml from 'js-yaml'
+import remarkMdx from 'remark-mdx'
+
+const code = `
+---
+hello: 5
+---
+
+# Hello world
+`
+
+export function Page() {
+    const parser = remark().use(remarkFrontmatter, ['yaml']).use(remarkMdx)
+
+    const mdast = parser.parse(code)
+
+    const yamlFrontmatter = mdast.children.find(
+        (node) => node.type === 'yaml',
+    ) as Yaml
+
+    const parsedFrontmatter = yaml.load(yamlFrontmatter.value || '')
+
+    console.log(parsedFrontmatter)
+    return <SafeMdxRenderer code={code} mdast={mdast} />
 }
 ```
 
@@ -120,6 +158,14 @@ export function Page() {
 }
 ```
 
+## Security
+
+safe-mdx is designed to avoid server-side evaluation of untrusted MDX input.
+
+However, it's important to note that safe-mdx does not provide protection against client-side vulnerabilities, such as Cross-Site Scripting (XSS) or script injection attacks. While safe-mdx itself does not perform any evaluation or rendering of user-provided content, the rendering library or components used in conjunction with safe-mdx may introduce security risks if not properly configured or sanitized.
+
+This is ok if you render your MDX in isolation from each tenant, for example on different subdomains, this way an XSS attack cannot affect all tenants. If instead you render the MDX from different tenants on the same domain, one tenant could steal cookies set from other customers.
+
 ## Limitations
 
 These features are not supported yet:

package/dist/plugins.d.ts

@@ -0,0 +1,12 @@
+import { Root } from 'mdast';
+/**
+ * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of "HTML").
+ *
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ */
+export declare function remarkMarkAndUnravel(): (tree: Root) => void;
+//# sourceMappingURL=plugins.d.ts.map

package/dist/plugins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.d.ts","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,OAAO,CAAA;AAKzC;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,WACT,IAAI,UAuE9B"}

package/dist/plugins.js

@@ -0,0 +1,68 @@
+import { collapseWhiteSpace } from 'collapse-white-space';
+import { visit } from 'unist-util-visit';
+/**
+ * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of "HTML").
+ *
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ */
+export function remarkMarkAndUnravel() {
+    return function (tree) {
+        visit(tree, function (node, index, parent) {
+            let offset = -1;
+            let all = true;
+            let oneOrMore = false;
+            if (parent &&
+                typeof index === 'number' &&
+                node.type === 'paragraph') {
+                const children = node.children;
+                while (++offset < children.length) {
+                    const child = children[offset];
+                    if (child.type === 'mdxJsxTextElement' ||
+                        child.type === 'mdxTextExpression') {
+                        oneOrMore = true;
+                    }
+                    else if (child.type === 'text' &&
+                        collapseWhiteSpace(child.value, {
+                            style: 'html',
+                            trim: true,
+                        }) === '') {
+                        // Empty.
+                    }
+                    else {
+                        all = false;
+                        break;
+                    }
+                }
+                if (all && oneOrMore) {
+                    offset = -1;
+                    const newChildren = [];
+                    while (++offset < children.length) {
+                        const child = children[offset];
+                        if (child.type === 'mdxJsxTextElement') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxJsxFlowElement';
+                        }
+                        if (child.type === 'mdxTextExpression') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxFlowExpression';
+                        }
+                        if (child.type === 'text' &&
+                            /^[\t\r\n ]+$/.test(String(child.value))) {
+                            // Empty.
+                        }
+                        else {
+                            newChildren.push(child);
+                        }
+                    }
+                    parent.children.splice(index, 1, ...newChildren);
+                    return index;
+                }
+            }
+        });
+    };
+}
+//# sourceMappingURL=plugins.js.map

package/dist/plugins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.js","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAGxC;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,UAAU,IAAU;QAEvB,KAAK,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,KAAK,EAAE,MAAM;YACrC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAA;YACf,IAAI,GAAG,GAAG,IAAI,CAAA;YACd,IAAI,SAAS,GAAG,KAAK,CAAA;YAGrB,IACI,MAAM;gBACN,OAAO,KAAK,KAAK,QAAQ;gBACzB,IAAI,CAAC,IAAI,KAAK,WAAW,EAC3B;gBACE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;gBAE9B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;oBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;oBAE9B,IACI,KAAK,CAAC,IAAI,KAAK,mBAAmB;wBAClC,KAAK,CAAC,IAAI,KAAK,mBAAmB,EACpC;wBACE,SAAS,GAAG,IAAI,CAAA;qBACnB;yBAAM,IACH,KAAK,CAAC,IAAI,KAAK,MAAM;wBACrB,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE;4BAC5B,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,IAAI;yBACb,CAAC,KAAK,EAAE,EACX;wBACE,SAAS;qBACZ;yBAAM;wBACH,GAAG,GAAG,KAAK,CAAA;wBACX,MAAK;qBACR;iBACJ;gBAED,IAAI,GAAG,IAAI,SAAS,EAAE;oBAClB,MAAM,GAAG,CAAC,CAAC,CAAA;oBAEX,MAAM,WAAW,GAAkB,EAAE,CAAA;oBAErC,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;wBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;wBAE9B,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IACI,KAAK,CAAC,IAAI,KAAK,MAAM;4BACrB,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC1C;4BACE,SAAS;yBACZ;6BAAM;4BACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;yBAC1B;qBACJ;oBAED,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,CAAA;oBAChD,OAAO,KAAK,CAAA;iBACf;aACJ;QACL,CAAC,CAAC,CAAA;IACN,CAAC,CAAA;AACL,CAAC"}

package/dist/safe-mdx.d.ts

@@ -1,17 +1,14 @@
-import { Node, Parent } from 'mdast';
-import { Root, RootContent } from 'mdast';
+import { Node, Parent, RootContent } from 'mdast';
+import { Root } from 'mdast';
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import { ReactNode } from 'react';
 type MyRootContent = RootContent | Root;
+export declare function mdxParse(code: string): Root;
 export declare function SafeMdxRenderer({ components, code, mdast, }: {
     components: any;
-    code?: string | undefined;
+    code?: string;
     mdast?: any;
 }): any;
-declare const nativeTags: readonly ["blockquote", "strong", "em", "del", "hr", "a", "b", "br", "button", "div", "form", "h1", "h2", "h3", "h4", "head", "iframe", "img", "input", "label", "li", "link", "ol", "p", "path", "picture", "script", "section", "source", "span", "sub", "sup", "svg", "table", "tbody", "td", "th", "thead", "tr", "ul", "video", "code", "pre"];
-type ComponentsMap = {
-    [k in (typeof nativeTags)[number]]?: any;
-};
 export declare class MdastToJsx {
     mdast: MyRootContent;
     str: string;
@@ -21,9 +18,9 @@ export declare class MdastToJsx {
         message: string;
     }[];
     constructor({ code, mdast, components, }: {
-        code?: string | undefined;
+        code?: string;
         mdast?: any;
-        components?: ComponentsMap | undefined;
+        components?: ComponentsMap;
     });
     mapMdastChildren(node: any): any;
     mapJsxChildren(node: any): any;
@@ -35,5 +32,9 @@ export declare function getJsxAttrs(node: MdxJsxFlowElement | MdxJsxTextElement,
     message: string;
 }) => void): [string, any][];
 export declare function mdastBfs(node: Parent | Node, cb?: (node: Node | Parent) => any): any[];
+declare const nativeTags: readonly ["blockquote", "strong", "em", "del", "hr", "a", "b", "br", "button", "div", "form", "h1", "h2", "h3", "h4", "head", "iframe", "img", "input", "label", "li", "link", "ol", "p", "path", "picture", "script", "section", "source", "span", "sub", "sup", "svg", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "ul", "video", "code", "pre"];
+type ComponentsMap = {
+    [k in (typeof nativeTags)[number]]?: any;
+};
 export {};
 //# sourceMappingURL=safe-mdx.d.ts.map

package/dist/safe-mdx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safe-mdx.d.ts","sourceRoot":"","sources":["../src/safe-mdx.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGpC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAKzE,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,KAAK,aAAa,GAAG,WAAW,GAAG,IAAI,CAAA;AASvC,wBAAgB,eAAe,CAAC,EAC5B,UAAU,EACV,IAAS,EACT,KAAmB,GACtB;;;;CAAA,OAIA;AAED,QAAA,MAAM,UAAU,qVA4CN,CAAA;AAEV,KAAK,aAAa,GAAG;KAAG,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG;CAAE,CAAA;AAEjE,qBAAa,UAAU;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAK;IACnB,CAAC,EAAE,aAAa,CAAA;IAChB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;gBACtB,EACR,IAAS,EACT,KAAwB,EACxB,UAAgC,GACnC;;;;KAAA;IAYD,gBAAgB,CAAC,IAAI,EAAE,GAAG;IAiB1B,cAAc,CAAC,IAAI,EAAE,GAAG;IAiBxB,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS;IAsC9C,GAAG;IAQH,gBAAgB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS;CAwOnD;AAED,wBAAgB,WAAW,CACvB,IAAI,EAAE,iBAAiB,GAAG,iBAAiB,EAC3C,OAAO,GAAE,CAAC,GAAG,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,KAAK,IAAoB,mBAoE9D;AAcD,wBAAgB,QAAQ,CACpB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,GAAG,SAiBpC"}
+{"version":3,"file":"safe-mdx.d.ts","sourceRoot":"","sources":["../src/safe-mdx.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGjD,OAAO,EAAE,IAAI,EAAQ,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAKzE,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3C,KAAK,aAAa,GAAG,WAAW,GAAG,IAAI,CAAA;AAavC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAGpC;AAID,wBAAgB,eAAe,CAAC,EAC5B,UAAU,EACV,IAAS,EACT,KAAmB,GACtB;;;;CAAA,OAIA;AAED,qBAAa,UAAU;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAK;IACnB,CAAC,EAAE,aAAa,CAAA;IAChB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;gBACtB,EACR,IAAS,EACT,KAAwB,EACxB,UAAgC,GACnC;;;;KAAA;IAaD,gBAAgB,CAAC,IAAI,EAAE,GAAG;IAiB1B,cAAc,CAAC,IAAI,EAAE,GAAG;IAiBxB,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS;IAsC9C,GAAG;IAQH,gBAAgB,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS;CAwPnD;AAED,wBAAgB,WAAW,CACvB,IAAI,EAAE,iBAAiB,GAAG,iBAAiB,EAC3C,OAAO,GAAE,CAAC,GAAG,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,KAAK,IAAoB,mBAoE9D;AAcD,wBAAgB,QAAQ,CACpB,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,GAAG,SAiBpC;AAUD,QAAA,MAAM,UAAU,8VA6CN,CAAA;AA2RV,KAAK,aAAa,GAAG;KAAG,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG;CAAE,CAAA"}