feat: escape HTML entities

Escape HTML entities within generated HTML tags.

Add option to allow user to provide custom escaper. Could be used to
disable escaping completely.

While this is considered a bug the solution requires a feature
implementation to integrate nicely, hence the feat and not fix label.

Refs: #90

Author: scriptcoded

README.md

@@ -40,7 +40,7 @@ console.log(highlighted)
 
 **Output:**
 
-![Screenshot](screenshot.png)
+![Screenshot](screenshot.png
 
 **HTML mode:**
 
@@ -76,6 +76,7 @@ The following options may be passed to the `highlight` function.
 | Option | Value | Default | Description |
 | --- | --- | --- | --- |
 | html | `boolean` | `false` | Set to true to render HTML instead of Unicode.
+| htmlEscaper | `(str: string) => string` | Basic escaper | Function to escape HTML entities. Uses a basic escaper by default. If HTML mode is used in a browser environment this could be useful to escape strings using the DOM.
 | classPrefix | `string` | `'sql-hl-'` | Prefix to prepend to classes for HTML span-tags. Is appended with entity name.
 | colors | `Object` | _See below_* | What color codes to use for Unicode rendering. A list of basic color codes can be found [here](https://docs.rs/embedded-text/0.4.0/embedded_text/style/index.html#standard-color-codes).
 

escapeHtml.test.js

@@ -0,0 +1,38 @@
+const escapeHtml = require('./lib/escapeHtml')
+
+describe('escapeHtml', () => {
+  it('does not escape strings without special characters', () => {
+    expect(escapeHtml('Hello, world!'))
+      .toBe('Hello, world!')
+  })
+
+  it('escapes brackets', () => {
+    expect(escapeHtml('<br />'))
+      .toBe('&lt;br /&gt;')
+  })
+
+  it('escapes quotes', () => {
+    expect(escapeHtml('"\''))
+      .toBe('&quot;&#39;')
+  })
+
+  it('escapes ampersands', () => {
+    expect(escapeHtml('&'))
+      .toBe('&amp;')
+  })
+
+  it('keeps leading and trailing test', () => {
+    expect(escapeHtml('leading & trailing'))
+      .toBe('leading &amp; trailing')
+  })
+
+  it('escapes multiple segments', () => {
+    expect(escapeHtml('> to >'))
+      .toBe('&gt; to &gt;')
+  })
+
+  it('escapes complex string', () => {
+    expect(escapeHtml('<div onClick="javascript:alert(\'inject\')">Hello, world! This, that & those.</div>'))
+      .toBe('&lt;div onClick=&quot;javascript:alert(&#39;inject&#39;)&quot;&gt;Hello, world! This, that &amp; those.&lt;/div&gt;')
+  })
+})

index.test.js

@@ -119,22 +119,22 @@ describe('unicode', () => {
 describe('html', () => {
   it('strings (single quotes)', () => {
     expect(hlHtml("'Hello, world!'"))
-      .toBe('<span class="sql-hl-string">\'Hello, world!\'</span>')
+      .toBe('<span class="sql-hl-string">&#39;Hello, world!&#39;</span>')
   })
 
   it('strings (double quotes)', () => {
     expect(hlHtml('"Hello, world!"'))
-      .toBe('<span class="sql-hl-string">"Hello, world!"</span>')
+      .toBe('<span class="sql-hl-string">&quot;Hello, world!&quot;</span>')
   })
 
   it('strings (mixing quotes)', () => {
     expect(hlHtml('\'"`\' "\'`" `"\'`'))
-      .toBe('<span class="sql-hl-string">\'"`\'</span> <span class="sql-hl-string">"\'`"</span> <span class="sql-hl-string">`"\'`</span>')
+      .toBe('<span class="sql-hl-string">&#39;&quot;`&#39;</span> <span class="sql-hl-string">&quot;&#39;`&quot;</span> <span class="sql-hl-string">`&quot;&#39;`</span>')
   })
 
   it('strings (scaping quotes)', () => {
     expect(hlHtml('\'\\\'\' "\\"" `\\``'))
-      .toBe('<span class="sql-hl-string">\'\\\'\'</span> <span class="sql-hl-string">"\\""</span> <span class="sql-hl-string">`\\``</span>')
+      .toBe('<span class="sql-hl-string">&#39;\\&#39;&#39;</span> <span class="sql-hl-string">&quot;\\&quot;&quot;</span> <span class="sql-hl-string">`\\``</span>')
   })
 
   it('integers', () => {
@@ -169,7 +169,7 @@ describe('html', () => {
 
   it('numbers within strings', () => {
     expect(hlHtml("'34'"))
-      .toBe("<span class=\"sql-hl-string\">'34'</span>")
+      .toBe('<span class="sql-hl-string">&#39;34&#39;</span>')
   })
 
   it('alphanumeric', () => {
@@ -184,12 +184,12 @@ describe('html', () => {
 
   it('basic query', () => {
     expect(hlHtml("SELECT * FROM `users` WHERE `email` = '[email protected]'"))
-      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-special\">*</span> <span class=\"sql-hl-keyword\">FROM</span> <span class=\"sql-hl-string\">`users`</span> <span class=\"sql-hl-keyword\">WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span>")
+      .toBe('<span class="sql-hl-keyword">SELECT</span> <span class="sql-hl-special">*</span> <span class="sql-hl-keyword">FROM</span> <span class="sql-hl-string">`users`</span> <span class="sql-hl-keyword">WHERE</span> <span class="sql-hl-string">`email`</span> <span class="sql-hl-special">=</span> <span class="sql-hl-string">&#39;[email protected]&#39;</span>')
   })
 
   it('complex query', () => {
     expect(hlHtml("SELECT COUNT(id), `id`, `username` FROM `users` WHERE `email` = '[email protected]' AND `foo` = 'BAR' OR 1=1"))
-      .toBe("<span class=\"sql-hl-keyword\">SELECT</span> <span class=\"sql-hl-function\">COUNT</span><span class=\"sql-hl-bracket\">(</span>id<span class=\"sql-hl-bracket\">)</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`id`</span><span class=\"sql-hl-special\">,</span> <span class=\"sql-hl-string\">`username`</span> <span class=\"sql-hl-keyword\">FROM</span> <span class=\"sql-hl-string\">`users`</span> <span class=\"sql-hl-keyword\">WHERE</span> <span class=\"sql-hl-string\">`email`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'[email protected]'</span> <span class=\"sql-hl-keyword\">AND</span> <span class=\"sql-hl-string\">`foo`</span> <span class=\"sql-hl-special\">=</span> <span class=\"sql-hl-string\">'BAR'</span> <span class=\"sql-hl-keyword\">OR</span> <span class=\"sql-hl-number\">1</span><span class=\"sql-hl-special\">=</span><span class=\"sql-hl-number\">1</span>")
+      .toBe('<span class="sql-hl-keyword">SELECT</span> <span class="sql-hl-function">COUNT</span><span class="sql-hl-bracket">(</span>id<span class="sql-hl-bracket">)</span><span class="sql-hl-special">,</span> <span class="sql-hl-string">`id`</span><span class="sql-hl-special">,</span> <span class="sql-hl-string">`username`</span> <span class="sql-hl-keyword">FROM</span> <span class="sql-hl-string">`users`</span> <span class="sql-hl-keyword">WHERE</span> <span class="sql-hl-string">`email`</span> <span class="sql-hl-special">=</span> <span class="sql-hl-string">&#39;[email protected]&#39;</span> <span class="sql-hl-keyword">AND</span> <span class="sql-hl-string">`foo`</span> <span class="sql-hl-special">=</span> <span class="sql-hl-string">&#39;BAR&#39;</span> <span class="sql-hl-keyword">OR</span> <span class="sql-hl-number">1</span><span class="sql-hl-special">=</span><span class="sql-hl-number">1</span>')
   })
 
   it('query with identifiers without apostrophes', () => {
@@ -206,6 +206,11 @@ describe('html', () => {
     expect(hlHtml('SELECT * FROM a;SELECT * FROM b;'))
       .toBe('<span class="sql-hl-keyword">SELECT</span> <span class="sql-hl-special">*</span> <span class="sql-hl-keyword">FROM</span> a<span class="sql-hl-special">;</span><span class="sql-hl-keyword">SELECT</span> <span class="sql-hl-special">*</span> <span class="sql-hl-keyword">FROM</span> b<span class="sql-hl-special">;</span>')
   })
+
+  it('escapes HTML entities', () => {
+    expect(hlHtml("select * from a where b = 'array<map<string,string>>';"))
+      .toBe('<span class="sql-hl-keyword">select</span> <span class="sql-hl-special">*</span> <span class="sql-hl-keyword">from</span> a <span class="sql-hl-keyword">where</span> b <span class="sql-hl-special">=</span> <span class="sql-hl-string">&#39;array&lt;map&lt;string,string&gt;&gt;&#39;</span><span class="sql-hl-special">;</span>')
+  })
 })
 
 describe('getSegments', () => {
@@ -253,3 +258,20 @@ describe('getSegments', () => {
       ])
   })
 })
+
+describe('custom escaper', () => {
+  it('uses default escaper', () => {
+    expect(highlight("'array<map<string,string>>'", { html: true }))
+      .toBe('<span class="sql-hl-string">&#39;array&lt;map&lt;string,string&gt;&gt;&#39;</span>')
+  })
+
+  it('works with dud escaper', () => {
+    expect(highlight("'array<map<string,string>>'", { html: true, htmlEscaper: (s) => s }))
+      .toBe('<span class="sql-hl-string">\'array<map<string,string>>\'</span>')
+  })
+
+  it('works with bad escaper', () => {
+    expect(highlight("'array<map<string,string>>'", { html: true, htmlEscaper: () => 'foobar' }))
+      .toBe('<span class="sql-hl-string">foobar</span>')
+  })
+})

lib/escapeHtml.js

@@ -0,0 +1,59 @@
+/*
+ * Simplified version of the escape-html library which can be found at
+ * https://github.com/component/escape-html
+ *
+ * Original license:
+ * (The MIT License)
+ *
+ * Copyright (c) 2012-2013 TJ Holowaychuk
+ * Copyright (c) 2015 Andreas Lubbe
+ * Copyright (c) 2015 Tiancheng "Timothy" Gu
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * 'Software'), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+const charCodeMap = {
+  34: '"', // "
+  38: '&', // &
+  39: ''', // '
+  60: '&lt;', // <
+  62: '&gt;' // >
+}
+
+function escapeHtml (str) {
+  let html = ''
+  let lastIndex = 0
+
+  for (let i = 0; i < str.length; i++) {
+    const escape = charCodeMap[str.charCodeAt(i)]
+    if (!escape) continue
+
+    if (lastIndex !== i) {
+      html += str.substring(lastIndex, i)
+    }
+
+    lastIndex = i + 1
+    html += escape
+  }
+
+  return html + str.substring(lastIndex)
+}
+
+module.exports = escapeHtml

lib/index.d.ts

@@ -1,6 +1,7 @@
 declare module 'sql-highlight' {
   export interface HighlightOptions {
     html?: boolean;
+    htmlEscaper?: (str: string) => string
     classPrefix?: string;
     colors?: {
       keyword: string;

lib/index.js

@@ -1,9 +1,11 @@
 'use strict'
 
 const keywords = require('./keywords')
+const escapeHtml = require('./escapeHtml')
 
 const DEFAULT_OPTIONS = {
   html: false,
+  htmlEscaper: escapeHtml,
   classPrefix: 'sql-hl-',
   colors: {
     keyword: '\x1b[35m',
@@ -128,7 +130,8 @@ function highlight (sqlString, options) {
         return content
       }
       if (options.html) {
-        return `<span class="${options.classPrefix}${name}">${content}</span>`
+        const escapedContent = options.htmlEscaper(content)
+        return `<span class="${options.classPrefix}${name}">${escapedContent}</span>`
       }
       return options.colors[name] + content + options.colors.clear
     })

test/index.js

@@ -25,3 +25,5 @@ console.log(highlight('SELECT "This is a \\"text\\" test" AS text;'))
 console.log(highlight('DROP PROCEDURE IF EXISTS `some-database`.`some-table`;'))
 
 console.log(highlight('SELECT * FROM a;SELECT * FROM b;'))
+
+console.log(highlight("select * from a where b = 'array<map<string,string>>';", { html: true }))