Added escapeHtml method to string package

refs https://github.com/TryGhost/Team/issues/1871

This method is required in a couple of places where we want to escape HTML manually, such as the email template.

packages/string/lib/escapeHtml.js

@@ -0,0 +1,18 @@
+/**
+ * escapeHTML
+ * 
+ * Escape a string to be used as text or an attribute in HTML
+ * 
+ * @param {string} string - the string we want to escape
+ * @returns {string} The escaped string
+ */
+module.exports = function (string) {
+    const htmlChars = {
+        '&': '&',
+        '"': '"',
+        '\'': ''',
+        '<': '&lt;',
+        '>': '&gt;'
+    };
+    return string.replace(/[&"'<>]/g, c => htmlChars[c]);
+};

packages/string/lib/index.js

@@ -1,2 +1,3 @@
 module.exports.stripInvisibleChars = require('./stripInvisibleChars');
 module.exports.slugify = require('./slugify');
+module.exports.escapeHtml = require('./escapeHtml');

packages/string/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "c8": "7.12.0",
+    "jsdom": "^20.0.0",
     "mocha": "10.0.0",
     "should": "13.2.3",
     "sinon": "14.0.0"

packages/string/test/escapeHtml.test.js

@@ -0,0 +1,44 @@
+require('./utils');
+
+const escapeHtml = require('../lib').escapeHtml;
+const jsdom = require('jsdom');
+
+describe('Escape HTML', function () {
+    it('escapes all characters', function () {
+        const result = escapeHtml(`<tag>"Black" & 'White'</tag>`);
+        result.should.equal(`&lt;tag&gt;&quot;Black&quot; &amp; &apos;White&apos;&lt;/tag&gt;`);
+    });
+
+    it('produces valid HTML attributes', function () {
+        const myAttribute = `><tag>"Black" & 'White'</tag>`;
+        const htmls = [
+            `<input value="${escapeHtml(myAttribute)}" type="text" />`,
+            `<input value='${escapeHtml(myAttribute)}' type='text' />`
+        ];
+
+        for (const html of htmls) {
+            const dom = new jsdom.JSDOM(html);
+            should(dom.window.document.querySelector('input').getAttribute('value')).equal(myAttribute);
+            should(dom.window.document.querySelector('input').value).equal(myAttribute);
+        }
+    });
+
+    it('produces valid HTML text', function () {
+        const texts = [
+            `<tag>"Black" & 'White'</tag>`,
+            `<![CDATA[This is no data]]>`,
+            `<!--This is no comment-->`,
+            `</p>This doesn't end<p>`
+        ];
+        const htmls = texts.map(text => [
+            `<p>${escapeHtml(text)}</p>`
+        ]);
+
+        for (const [index, html] of htmls.entries()) {
+            const text = texts[index];
+            const dom = new jsdom.JSDOM(html);
+            should(dom.window.document.querySelector('p').textContent).equal(text);
+            should(dom.window.document.querySelector('p').innerHTML).not.equal(text);
+        }
+    });
+});