Koenig - Pass html card content through sanitiser

refs https://github.com/TryGhost/Ghost/issues/9724
- extract html sanitisation into a Koenig helper `{{sanitise-html}}` (all markdown handling will eventually move into Koenig too)
- render sanitised html in the html card

app/utils/format-markdown.js

@@ -1,9 +1,8 @@
-/* global html_sanitize */
-import cajaSanitizers from './caja-sanitizers';
 import markdownit from 'npm:markdown-it';
 import markdownitFootnote from 'npm:markdown-it-footnote';
 import markdownitLazyHeaders from 'npm:markdown-it-lazy-headers';
 import markdownitMark from 'npm:markdown-it-mark';
+import {sanitizeHtml} from 'koenig-editor/helpers/sanitize-html';
 
 let slugify = function slugify(inputString, usedHeaders) {
     let slug = inputString.replace(/[^\w]/g, '').toLowerCase();
@@ -62,16 +61,5 @@ export default function formatMarkdown(_markdown, replaceJS = true) {
     // convert markdown to HTML
     escapedhtml = md.render(markdown);
 
-    // replace script and iFrame
-    if (replaceJS) {
-        escapedhtml = escapedhtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
-            '<pre class="js-embed-placeholder">Embedded JavaScript</pre>');
-        escapedhtml = escapedhtml.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi,
-            '<pre class="iframe-embed-placeholder">Embedded iFrame</pre>');
-    }
-
-    // sanitize html
-    escapedhtml = html_sanitize(escapedhtml, cajaSanitizers.url, cajaSanitizers.id);
-
-    return escapedhtml;
+    return sanitizeHtml(escapedhtml, {replaceJS});
 }

lib/koenig-editor/addon/helpers/sanitize-html.js

@@ -0,0 +1,27 @@
+/* global html_sanitize */
+import cajaSanitizers from 'ghost-admin/utils/caja-sanitizers';
+import {assign} from '@ember/polyfills';
+import {helper} from '@ember/component/helper';
+import {htmlSafe} from '@ember/string';
+import {isArray} from '@ember/array';
+
+export function sanitizeHtml(params, options = {}) {
+    let html = isArray(params) ? params[0] : params;
+
+    options = assign({replaceJS: true}, options);
+
+    // replace script and iFrame
+    if (options.replaceJS) {
+        html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+            '<pre class="js-embed-placeholder">Embedded JavaScript</pre>');
+        html = html.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi,
+            '<pre class="iframe-embed-placeholder">Embedded iFrame</pre>');
+    }
+
+    // sanitize html
+    html = html_sanitize(html, cajaSanitizers.url, cajaSanitizers.id);
+
+    return htmlSafe(html);
+}
+
+export default helper(sanitizeHtml);

lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -19,7 +19,7 @@
             update=(action "updateHtml")
         }}
     {{else}}
-        <div class="koenig-card-html-rendered">{{{payload.html}}}</div>
+        <div class="koenig-card-html-rendered">{{sanitize-html payload.html}}</div>
         <div class="koenig-card-click-overlay"></div>
     {{/if}}
 {{/koenig-card}}

lib/koenig-editor/app/helpers/sanitize-html.js

@@ -0,0 +1 @@
+export {default, sanitizeHtml} from 'koenig-editor/helpers/sanitize-html';

tests/integration/helpers/sanitize-html-test.js

@@ -0,0 +1,27 @@
+import hbs from 'htmlbars-inline-precompile';
+import {describe, it} from 'mocha';
+import {expect} from 'chai';
+import {setupComponentTest} from 'ember-mocha';
+
+describe('Integration: Helper: sanitize-html', function () {
+    setupComponentTest('sanitize-html', {
+        integration: true
+    });
+
+    it('renders html', function () {
+        this.set('inputValue', '<strong>bold</strong>');
+
+        this.render(hbs`{{sanitize-html inputValue}}`);
+
+        expect(this.$().html().trim()).to.equal('<strong>bold</strong>');
+    });
+
+    it('replaces scripts', function () {
+        this.set('inputValue', '<script></script>');
+
+        this.render(hbs`{{sanitize-html inputValue}}`);
+
+        expect(this.$().html().trim()).to.equal('<pre class="js-embed-placeholder">Embedded JavaScript</pre>');
+    });
+});
+