[zmarkdown] Allow using custom element for iframes

packages/zmarkdown/__tests__/__snapshots__/server.test.js.snap

@@ -2,6 +2,11 @@
 
 exports[`HTML endpoint accepts POSTed markdown 1`] = `"<h1 id=\\"foo\\">foo<a aria-hidden=\\"true\\" tabindex=\\"-1\\" href=\\"#foo\\"><span class=\\"icon icon-link\\"></span></a></h1>"`;
 
+exports[`HTML endpoint can use custom iframe elements 1`] = `
+"<h3 id=\\"you-wont-get-my-data-google\\">You won’t get my data, Google!<a aria-hidden=\\"true\\" tabindex=\\"-1\\" href=\\"#you-wont-get-my-data-google\\"><span class=\\"icon icon-link\\"></span></a></h3>
+<hidden-frame src=\\"https://www.youtube.com/embed/q3zqJs7JUCQ?feature=oembed\\" width=\\"560\\" height=\\"315\\" allowfullscreen frameborder=\\"0\\"></hidden-frame>"
+`;
+
 exports[`HTML endpoint correctly renders manifest 1`] = `
 Object {
   "children": Array [

packages/zmarkdown/__tests__/server.test.js

@@ -203,6 +203,22 @@ describe('HTML endpoint', () => {
     expect(content).toMatchSnapshot()
     expect(content).toContain('h2')
   })
+
+  it('can use custom iframe elements', async () => {
+    const text = dedent(`
+    # You won't get my data, Google!
+
+    !(https://www.youtube.com/watch?v=q3zqJs7JUCQ)
+    `)
+
+    const response = await a.post(html, {md: text, opts: {hide_iframes: true}})
+    expect(response.status).toBe(200)
+
+    const [content] = response.data
+    expect(content).not.toContain('iframe')
+    expect(content).toContain('hidden-frame')
+    expect(content).toMatchSnapshot()
+  })
 })
 
 describe('LaTeX endpoint', () => {

packages/zmarkdown/config/mdast/iframes.js

@@ -42,7 +42,6 @@ module.exports = {
     oembed: 'https://soundcloud.com/oembed'
   },
   'www.ina.fr': {
-    tag: 'iframe',
     width: 620,
     height: 349,
     disabled: false,
@@ -54,7 +53,6 @@ module.exports = {
     removeFileName: true
   },
   'www.jsfiddle.net': {
-    tag: 'iframe',
     width: 560,
     height: 560,
     disabled: false,
@@ -69,7 +67,6 @@ module.exports = {
     }
   },
   'jsfiddle.net': {
-    tag: 'iframe',
     width: 560,
     height: 560,
     disabled: false,

packages/zmarkdown/config/sanitize/index.js

@@ -3,7 +3,7 @@ const katex = require('./katex')
 const merge = require('deepmerge')
 
 module.exports = merge.all([gh, katex, {
-  tagNames: ['span', 'abbr', 'figure', 'figcaption', 'iframe'],
+  tagNames: ['span', 'abbr', 'figure', 'figcaption', 'iframe', 'hidden-frame'],
   attributes: {
     a: ['ariaHidden', 'class', 'className'],
     abbr: ['title'],
@@ -14,6 +14,7 @@ module.exports = merge.all([gh, katex, {
     h2: ['ariaHidden'],
     h3: ['ariaHidden'],
     iframe: ['allowfullscreen', 'frameborder', 'height', 'src', 'width'],
+    'hidden-frame': ['allowfullscreen', 'frameborder', 'height', 'src', 'width'],
     img: ['class', 'className'],
     span: ['id', 'data-count', 'class', 'className'],
     summary: ['class', 'className'],

packages/zmarkdown/server/factories/config-factory.js

@@ -50,6 +50,13 @@ module.exports = opts => {
     }
   }
 
+  // Allow using a custom element for iframes, initially for GDPR compliance
+  if (opts.hide_iframes) {
+    for (const providerName in mdastConfig.iframes) {
+      mdastConfig.iframes[providerName].tag = 'hidden-frame'
+    }
+  }
+
   if (opts.inline === true) {
     if (!Array.isArray(mdastConfig.disableTokenizers.block)) {
       mdastConfig.disableTokenizers.block = []