Merge pull request #93 from curbengh/escape-html

fix(html_tag): escape html and encode url by default
hexojs · Sep 16, 2019 · 6155112 · 6155112
2 parents fb8dd0e + 9c8bfe2
commit 6155112
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -165,16 +165,29 @@ Option | Description | Default
 `tab`| Replace tabs |
 `autoDetect` | Detect language automatically | false
 
-### htmlTag(tag, attrs, text)
+### htmlTag(tag, attrs, text, escape)
 
 Creates a html tag.
 
+Option | Description | Default
+--- | --- | ---
+`tag` | Tag / element name |
+`attrs` | Attribute(s) and its value.<br>Value is always [escaped](#escapehtmlstr), URL is always [encoded](#encodeurlstr). |
+`text` | Text |
+`escape` | Whether to escape the text | true
+
 ``` js
 htmlTag('img', {src: 'example.png'})
 // <img src="example.png">
 
 htmlTag('a', {href: 'http://hexo.io/'}, 'Hexo')
 // <a href="http://hexo.io/">Hexo</a>
+
+htmlTag('link', {href: 'http://foo.com/'}, '<a>bar</a>')
+// <a href="http://foo.com/">&lt;bar&gt;</a>
+
+htmlTag('a', {href: 'http://foo.com/'}, '<b>bold</b>', false)
+// <a href="http://foo.com/"><b>bold</b></a>
 ```
 
 ### Pattern(rule)

diff --git a/lib/html_tag.js b/lib/html_tag.js
@@ -1,15 +1,25 @@
 'use strict';
 
-function htmlTag(tag, attrs, text) {
+const encodeURL = require('./encode_url');
+const escapeHTML = require('./escape_html');
+
+function htmlTag(tag, attrs, text, escape = true) {
   if (!tag) throw new TypeError('tag is required!');
 
-  let result = `<${tag}`;
+  let result = `<${escapeHTML(tag)}`;
 
   for (const i in attrs) {
-    if (attrs[i] != null) result += ` ${i}="${attrs[i]}"`;
+    if (attrs[i] === null || typeof attrs[i] === 'undefined') result += '';
+    else {
+      if (i === 'href' || i === 'src') result += ` ${i}="${encodeURL(attrs[i])}"`;
+      else result += ` ${escapeHTML(i)}="${escapeHTML(String(attrs[i]))}"`;
+    }
   }
 
-  result += text == null ? '>' : `>${text}</${tag}>`;
+  if (escape && text) text = escapeHTML(String(text));
+
+  if (text === null || typeof text === 'undefined') result += '>';
+  else result += `>${text}</${escapeHTML(tag)}>`;
 
   return result;
 }

diff --git a/test/html_tag.spec.js b/test/html_tag.spec.js
@@ -24,7 +24,7 @@ describe('htmlTag', () => {
   it('tag + attrs + text', () => {
     htmlTag('a', {
       href: 'http://zespia.tw'
-    }, 'My blog').should.eql('<a href="http://zespia.tw">My blog</a>');
+    }, 'My blog').should.eql('<a href="http://zespia.tw/">My blog</a>');
   });
 
   it('tag + empty ALT attr', () => {
@@ -38,21 +38,21 @@ describe('htmlTag', () => {
     htmlTag('a', {
       href: 'http://zespia.tw',
       tabindex: 0
-    }, 'My blog').should.eql('<a href="http://zespia.tw" tabindex="0">My blog</a>');
+    }, 'My blog').should.eql('<a href="http://zespia.tw/" tabindex="0">My blog</a>');
   });
 
   it('passing a null alt attribute', () => {
     htmlTag('a', {
       href: 'http://zespia.tw',
       alt: null
-    }, 'My blog').should.eql('<a href="http://zespia.tw">My blog</a>');
+    }, 'My blog').should.eql('<a href="http://zespia.tw/">My blog</a>');
   });
 
   it('passing a undefined alt attribute', () => {
     htmlTag('a', {
       href: 'http://zespia.tw',
       alt: undefined
-    }, 'My blog').should.eql('<a href="http://zespia.tw">My blog</a>');
+    }, 'My blog').should.eql('<a href="http://zespia.tw/">My blog</a>');
   });
 
   it('tag is required', () => {
@@ -62,4 +62,23 @@ describe('htmlTag', () => {
       err.should.have.property('message', 'tag is required!');
     }
   });
+
+  it('encode url', () => {
+    htmlTag('img', {
+      src: 'http://foo.com/bár.jpg'
+    }).should.eql('<img src="http://foo.com/b%C3%A1r.jpg">');
+  });
+
+  it('escape html tag', () => {
+    htmlTag('foo', {
+      bar: '<b>'
+    }, '<baz>').should.eql('<foo bar="&lt;b&gt;">&lt;baz&gt;</foo>');
+  });
+
+  it('escape html tag (escape off)', () => {
+    htmlTag('foo', {
+      bar: '<b>'
+    }, '<baz>', false).should.eql('<foo bar="&lt;b&gt;"><baz></foo>');
+  });
+
 });