npm · revin · May 16, 2017 · May 16, 2017
diff --git a/lib/plugin/html-auto-escape.js b/lib/plugin/html-auto-escape.js
@@ -0,0 +1,35 @@
+// This plugin automatically escapes certain HTML tags in html_block tokens
+// because that's what GitHub does. For example, given the markdown input
+//
+//     <div>Put your rules in a `<style>` element: ...</div>
+//
+// CommonMark assumes any HTML blocks are meant to render exactly as is, which
+// in this particular case means we end up with malformed HTML having an opening
+// <style> element with no closing tag and invalid content. However, GitHub
+// assumes you actually wanted the rule to appear as escaped markup, so it will
+// automatically translate the angle brackets to `&lt;` and `&gt;`:
+//
+//     <div>Put your rules in a `&lt;style&gt;` element: ...</div>
+//
+// See https://github.com/npm/marky-markdown/issues/363 for the discussion.
+//
+
+function renderContent (tokens, idx) {
+  return tokens[idx].content
+}
+
+module.exports = function (md, opts) {
+  // if opts.sanitize is falsy, we skip this transformation since we're trusting
+  // the input to be correct, and this rule is allowing
+  if (opts && typeof opts.sanitize !== 'undefined' && !opts.sanitize) return
+
+  var originalRule = md.renderer.rules.html_block || renderContent
+  md.renderer.rules.html_block = function (tokens, idx, options, env, self) {
+    var html = tokens[idx].content
+    var regex = /<(\/?)(iframe|script|style|textarea|title)([^>]*)>/gi
+
+    tokens[idx].content = html.replace(regex, '&lt;$1$2$3&gt;')
+
+    return originalRule.call(this, tokens, idx, options, env, self)
+  }
+}
diff --git a/lib/render.js b/lib/render.js
@@ -16,6 +16,7 @@ var youtube = require('./plugin/youtube')
 var cdnImages = require('./plugin/cdn')
 var packagize = require('./plugin/packagize')
 var htmlHeading = require('./plugin/html-heading')
+var htmlAutoEscape = require('./plugin/html-auto-escape')
 var relaxedLinkRefs = require('./gfm/relaxed-link-reference')
 var githubHeadings = require('./gfm/indented-headings')
 var overrideLinkDestinationParser = require('./gfm/override-link-destination-parser')
@@ -84,6 +85,7 @@ render.getParser = function (options) {
     .use(youtube)
     .use(packagize, {package: options.package})
     .use(htmlHeading)
+    .use(htmlAutoEscape, {sanitize: options.sanitize})
     .use(overrideLinkDestinationParser)
     .use(looseLinkParsing)
     .use(looseImageParsing)

diff --git a/lib/sanitize.js b/lib/sanitize.js
@@ -130,6 +130,6 @@ function prefixHTMLids (tagName, attribs) {
   return {tagName, attribs}
 }
 
-function isAlreadyPrefixed(id, prefix) {
+function isAlreadyPrefixed (id, prefix) {
   return id.includes(prefix) && id.length > prefix.length
 }
diff --git a/test/fixtures/html-auto-escape.md b/test/fixtures/html-auto-escape.md
@@ -0,0 +1,247 @@
+# HTML Embedding/Escaping Test
+
+<div><a></a></div>
+
+<div><abbr></abbr></div>
+
+<div><address></address></div>
+
+<div><area></area></div>
+
+<div><article></article></div>
+
+<div><aside></aside></div>
+
+<div><audio></audio></div>
+
+<div><b></b></div>
+
+<div><base></base></div>
+
+<div><bdi></bdi></div>
+
+<div><bdo></bdo></div>
+
+<div><blockquote></blockquote></div>
+
+<div><body></body></div>
+
+<div><br></br></div>
+
+<div><button></button></div>
+
+<div><canvas></canvas></div>
+
+<div><caption></caption></div>
+
+<div><cite></cite></div>
+
+<div><code></code></div>
+
+<div><col></col></div>
+
+<div><colgroup></colgroup></div>
+
+<div><data></data></div>
+
+<div><datalist></datalist></div>
+
+<div><dd></dd></div>
+
+<div><del></del></div>
+
+<div><details></details></div>
+
+<div><dfn></dfn></div>
+
+<div><dialog></dialog></div>
+
+<div><div></div></div>
+
+<div><dl></dl></div>
+
+<div><dt></dt></div>
+
+<div><em></em></div>
+
+<div><embed></embed></div>
+
+<div><fieldset></fieldset></div>
+
+<div><figcaption></figcaption></div>
+
+<div><figure></figure></div>
+
+<div><footer></footer></div>
+
+<div><form></form></div>
+
+<div><h1></h1></div>
+
+<div><h2></h2></div>
+
+<div><h3></h3></div>
+
+<div><h4></h4></div>
+
+<div><h5></h5></div>
+
+<div><h6></h6></div>
+
+<div><head></head></div>
+
+<div><header></header></div>
+
+<div><hgroup></hgroup></div>
+
+<div><hr></hr></div>
+
+<div><html></html></div>
+
+<div><i></i></div>
+
+<div><iframe></iframe></div>
+
+<iframe></iframe>
+
+<iframe src='https://google.com/'>
+  <p>No iframe support!</p>
+</iframe>
+
+<div><img></img></div>
+
+<div><input></input></div>
+
+<div><ins></ins></div>
+
+<div><kbd></kbd></div>
+
+<div><keygen></keygen></div>
+
+<div><label></label></div>
+
+<div><legend></legend></div>
+
+<div><li></li></div>
+
+<div><link></link></div>
+
+<div><main></main></div>
+
+<div><map></map></div>
+
+<div><mark></mark></div>
+
+<div><menu></menu></div>
+
+<div><menuitem></menuitem></div>
+
+<div><meta></meta></div>
+
+<div><meter></meter></div>
+
+<div><nav></nav></div>
+
+<div><noscript></noscript></div>
+
+<div><object></object></div>
+
+<div><ol></ol></div>
+
+<div><optgroup></optgroup></div>
+
+<div><option></option></div>
+
+<div><output></output></div>
+
+<div><p></p></div>
+
+<div><param></param></div>
+
+<div><pre></pre></div>
+
+<div><progress></progress></div>
+
+<div><q></q></div>
+
+<div><rb></rb></div>
+
+<div><rp></rp></div>
+
+<div><rt></rt></div>
+
+<div><rtc></rtc></div>
+
+<div><ruby></ruby></div>
+
+<div><s></s></div>
+
+<div><samp></samp></div>
+
+<div><script></script></div>
+
+<script></script>
+
+<script src='some/path/to/script.js'></script>
+
+<div><section></section></div>
+
+<div><select></select></div>
+
+<div><small></small></div>
+
+<div><source></source></div>
+
+<div><span></span></div>
+
+<div><strong></strong></div>
+
+<div><style></style></div>
+
+<style></style>
+
+<style>
+.yep {
+  color: blue;
+}
+</style>
+
+<div><sub></sub></div>
+
+<div><summary></summary></div>
+
+<div><sup></sup></div>
+
+<div><table></table></div>
+
+<div><tbody></tbody></div>
+
+<div><td></td></div>
+
+<div><template></template></div>
+
+<div><textarea></textarea></div>
+
+<div><tfoot></tfoot></div>
+
+<div><th></th></div>
+
+<div><thead></thead></div>
+
+<div><time></time></div>
+
+<div><title></title></div>
+
+<div><tr></tr></div>
+
+<div><track></track></div>
+
+<div><u></u></div>
+
+<div><ul></ul></div>
+
+<div><var></var></div>
+
+<div><video></video></div>
+
+<div><wbr></wbr></div>
diff --git a/test/markdown.js b/test/markdown.js
@@ -2,6 +2,7 @@
 
 var assert = require('assert')
 var marky = require('..')
+var sanitize = require('../lib/sanitize')
 var fixtures = require('./fixtures')
 var cheerio = require('cheerio')
 
@@ -149,6 +150,57 @@ describe('markdown processing', function () {
         assert($('a[href="or%20is%20it"]').length)
       })
     })
+
+    describe('auto-escaping HTML', function () {
+      var $doc
+      var html
+      before(function () {
+        $doc = cheerio.load(marky(fixtures['html-auto-escape']))
+        html = $doc.html()
+      })
+
+      it('auto-escapes <iframe>', function () {
+        assert.equal($doc('iframe').length, 0)
+        assert(~html.indexOf('&lt;iframe'))
+        assert(~html.indexOf('&lt;/iframe&gt;'))
+      })
+
+      it('auto-escapes <script>', function () {
+        assert.equal($doc('script').length, 0)
+        assert(~html.indexOf('&lt;script'))
+        assert(~html.indexOf('&lt;/script&gt;'))
+      })
+
+      it('auto-escapes <style>', function () {
+        assert.equal($doc('style').length, 0)
+        assert(~html.indexOf('&lt;style&gt;'))
+        assert(~html.indexOf('&lt;/style&gt;'))
+      })
+
+      it('auto-escapes <textarea>', function () {
+        assert.equal($doc('textarea').length, 0)
+        assert(~html.indexOf('&lt;textarea&gt;'))
+        assert(~html.indexOf('&lt;/textarea&gt;'))
+      })
+
+      it('auto-escapes <title>', function () {
+        assert.equal($doc('title').length, 0)
+        assert(~html.indexOf('&lt;title&gt;'))
+        assert(~html.indexOf('&lt;/title&gt;'))
+      })
+
+      it('does not auto-escape other HTML tags', function () {
+        function isAllowed (tag) {
+          // TODO: figure out how we should handle iframes
+          return tag !== 'iframe'
+        }
+
+        sanitize.config.allowedTags.filter(isAllowed).forEach(function (tag) {
+          assert(!~html.indexOf('&lt;' + tag + '&gt;'))
+          assert(!~html.indexOf('&lt;/' + tag + '&gt;'))
+        })
+      })
+    })
   })
 
   describe('syntax highlighting', function () {