feat(html pipe): Allow custom elements and attributes in markdown

Let the sanitization step accept custom elements and attributes added to the markdown fix #253
adobe · May 28, 2019 · 247a6b9 · 247a6b9
1 parent bcbd1ff
commit 247a6b9
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 14 deletions.
diff --git a/src/html/sanitize.js b/src/html/sanitize.js
@@ -13,15 +13,61 @@ const createDOMPurify = require('dompurify');
 const { JSDOM } = require('jsdom');
 
 const helixSanitizationConfig = {
-  ADD_TAGS: ['esi:include', 'esi:remove'],
+  // Allowing all ESI tags, see: https://www.w3.org/TR/esi-lang
+  ADD_TAGS: [
+    'esi:try',
+    'esi:attempt',
+    'esi:except',
+
+    'esi:choose',
+    'esi:when',
+    'esi:otherwise',
+
+    'esi:include',
+    'esi:inline',
+    'esi:remove',
+
+    'esi:vars',
+    'esi:comment',
+  ],
   RETURN_DOM: true,
 };
 
+const CUSTOM_NAME_REGEX = /^\w+-\w+$/;
+
+/**
+ * Allow custom elements to be retained by the sanitization.
+ *
+ * @param {Object} DOMPurify the DOMPurify instance
+ */
+function allowCustomElements(DOMPurify) {
+  DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+    if (node.nodeName && node.nodeName.match(CUSTOM_NAME_REGEX)) {
+      data.allowedTags[data.tagName] = true; // eslint-disable-line no-param-reassign
+    }
+  });
+}
+
+/**
+ * Allow custom attributes to be retained by the sanitization.
+ *
+ * @param {Object} DOMPurify the DOMPurify instance
+ */
+function allowCustomAttributes(DOMPurify) {
+  DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+    if (data.attrName && data.attrName.match(CUSTOM_NAME_REGEX)) {
+      data.allowedAttributes[data.attrName] = true; // eslint-disable-line no-param-reassign
+    }
+  });
+}
+
 function sanitize({ content }, { logger }) {
   logger.log('debug', 'Sanitizing content body to avoid XSS injections.');
 
   const globalContext = (new JSDOM('')).window;
   const DOMPurify = createDOMPurify(globalContext);
+  allowCustomElements(DOMPurify);
+  allowCustomAttributes(DOMPurify);
   const sanitizedBody = DOMPurify.sanitize(content.document.body, helixSanitizationConfig);
   return {
     content: {

diff --git a/src/utils/heading-handler.js b/src/utils/heading-handler.js
@@ -45,7 +45,7 @@ class HeadingHandler {
       // Inject the id after transformation
       const n = Object.assign({}, node);
       const el = fallback(h, n);
-      el.properties.id = el.properties.id || `user-content-${headingIdentifier}`;
+      el.properties.id = el.properties.id || headingIdentifier;
       return el;
     };
   }

diff --git a/test/testEmbedHandler.js b/test/testEmbedHandler.js
@@ -129,7 +129,7 @@ https://www.youtube.com/watch?v=KOxbO0EI4MA
         Here comes an embed.</p>
         <esi:include src="https://example-embed-service.com/https://www.youtube.com/watch?v=KOxbO0EI4MA"></esi:include>
         <esi:remove><p><a href="https://www.youtube.com/watch?v=KOxbO0EI4MA">https://www.youtube.com/watch?v=KOxbO0EI4MA</a></p></esi:remove>
-        <p><img src="easy.png" alt="Easy!" srcset="easy.png?width=480&amp;auto=webp 480w,easy.png?width=1384&amp;auto=webp 1384w,easy.png?width=2288&amp;auto=webp 2288w,easy.png?width=3192&amp;auto=webp 3192w,easy.png?width=4096&amp;auto=webp 4096w" sizes="100vw"></p>
+        <p><img src="easy.png" alt="Easy!" srcset="easy.png?width=480&amp;auto=webp 480w, easy.png?width=1384&amp;auto=webp 1384w, easy.png?width=2288&amp;auto=webp 2288w, easy.png?width=3192&amp;auto=webp 3192w, easy.png?width=4096&amp;auto=webp 4096w" sizes="100vw"></p>
       `).window.document.body,
     );
   });
@@ -167,7 +167,7 @@ Here comes an embed.
         Here comes an embed.</p>
         <esi:include src="/test/foo.embed.html"></esi:include>
         <esi:remove><p>./foo.md</p></esi:remove>
-        <p><img src="easy.png" alt="Easy!" srcset="easy.png?width=480&amp;auto=webp 480w,easy.png?width=1384&amp;auto=webp 1384w,easy.png?width=2288&amp;auto=webp 2288w,easy.png?width=3192&amp;auto=webp 3192w,easy.png?width=4096&amp;auto=webp 4096w" sizes="100vw"></p>
+        <p><img src="easy.png" alt="Easy!" srcset="easy.png?width=480&amp;auto=webp 480w, easy.png?width=1384&amp;auto=webp 1384w, easy.png?width=2288&amp;auto=webp 2288w, easy.png?width=3192&amp;auto=webp 3192w, easy.png?width=4096&amp;auto=webp 4096w" sizes="100vw"></p>
       `).window.document.body,
     );
   });

diff --git a/test/testHTML.js b/test/testHTML.js
@@ -719,8 +719,8 @@ ${context.content.document.body.innerHTML}`,
     );
     assert.equal(200, result.response.status);
     assertEquivalentNode(
-      new JSDOM('<h1 id="user-content-foo">Foo</h1><p><a>Bar</a></p><a href="javascript:alert(\'XSS\')">Baz</a>').window.document.body,
       new JSDOM(result.response.body).window.document.body,
+      new JSDOM('<h1 id="foo">Foo</h1><p><a>Bar</a></p><a href="javascript:alert(\'XSS\')">Baz</a>').window.document.body,
     );
   });
 });
diff --git a/test/testHTMLFromMarkdown.js b/test/testHTMLFromMarkdown.js
@@ -143,7 +143,7 @@ describe('Testing Markdown conversion', () => {
 
             Hello World
       `, `
-        <h1 id="user-content-hello">Hello</h1>
+        <h1 id="hello">Hello</h1>
         <pre><code>Hello World\n</code></pre>
     `);
     await assertMd(
@@ -166,10 +166,10 @@ describe('Testing Markdown conversion', () => {
         >
         > bar
       `, `
-        <h1 id="user-content-foo">Foo</h1>
+        <h1 id="foo">Foo</h1>
         <p>bar</p>
         <blockquote>
-        <h1 id="user-content-foo-1">Foo</h1>
+        <h1 id="foo-1">Foo</h1>
         <p>bar</p>
         </blockquote>
       `);
@@ -190,7 +190,7 @@ describe('Testing Markdown conversion', () => {
 
         Hello World [link](<foobar)
       `, `
-        <h1 id="user-content-foo">Foo</h1>
+        <h1 id="foo">Foo</h1>
         <p>Hello World [link](&lt;foobar)</p>
     `);
   });
@@ -201,7 +201,7 @@ describe('Testing Markdown conversion', () => {
 
         Hello World [link](foo bar)
       `, `
-        <h1 id="user-content-foo">Foo</h1>
+        <h1 id="foo">Foo</h1>
         <p>Hello World [link](foo bar)</p>
     `);
   });
@@ -212,7 +212,7 @@ describe('Testing Markdown conversion', () => {
 
         Hello World [link](λ)
       `, `
-        <h1 id="user-content-foo">Foo</h1>
+        <h1 id="foo">Foo</h1>
         <p>Hello World <a href="%CE%BB">link</a></p>
     `);
   });
@@ -225,7 +225,7 @@ describe('Testing Markdown conversion', () => {
           <input type="text" name="fieldName"><label for="fieldName">Name</label>
         </form>
       `, `
-        <h1 id="user-content-foo">Foo</h1>
+        <h1 id="foo">Foo</h1>
         <form><input type="text" name="fieldName"><label for="fieldName">Name</label></form>
     `);
   });
@@ -236,7 +236,7 @@ describe('Testing Markdown conversion', () => {
 
         Hello World [link](λ)
       `, `
-        <h1 id="user-content-foo-bar">Foo <em>Bar</em></h1>
+        <h1 id="foo-bar">Foo <em>Bar</em></h1>
         <p>Hello World <a href="%CE%BB">link</a></p>
     `);
   });
@@ -296,8 +296,22 @@ describe('Testing Markdown conversion', () => {
         # location
         <a name="anchors">Foo</a>
       `, `
-        <h1 id="user-content-location">location</h1>
+        <h1 id="location">location</h1>
         <p><a>Foo</a></p>
     `);
   });
+
+  it('Accept custom elements and attributes', async () => {
+    await assertMd(`
+        # Foo
+        Bar
+        <baz-qux corge-grault="garply">Waldo</baz-qux>
+      `, `
+        <h1 id="foo">Foo</h1>
+        <p>Bar</p>
+        <p>
+          <baz-qux corge-grault="garply">Waldo</baz-qux>
+        </p>
+    `);
+  });
 });