feat: Sanitize text sources

demo/blank.html

@@ -21,6 +21,17 @@ <h2>Blank page: default</h2>
                     ></test-harness>
 				</template>
 			</d2l-demo-snippet>
-        </d2l-demo-page>
+
+			<h2>Blank page: text source</h2>
+			<d2l-demo-snippet>
+				<template>
+					<test-harness
+						controls
+						file="blank"
+						text-source
+					></test-harness>
+				</template>
+			</d2l-demo-snippet>
+		</d2l-demo-page>
 	</body>
 </html>

package.json

@@ -28,6 +28,7 @@
   },
   "homepage": "https://ekoopmans.github.io/html2pdf.js/",
   "dependencies": {
+    "dompurify": "^3.3.1",
     "html2canvas": "^1.0.0",
     "jspdf": "^4.0.0"
   },

src/utils.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 // Determine the type of a variable/object.
 export const objType = function objType(obj) {
   var type = typeof obj;
@@ -14,14 +16,9 @@ export const objType = function objType(obj) {
 // Create an HTML element with optional className, innerHTML, and style.
 export const createElement = function createElement(tagName, opt) {
   var el = document.createElement(tagName);
-  if (opt.className)  el.className = opt.className;
-  if (opt.innerHTML) {
-    el.innerHTML = opt.innerHTML;
-    var scripts = el.getElementsByTagName('script');
-    for (var i = scripts.length; i-- > 0; null) {
-      scripts[i].parentNode.removeChild(scripts[i]);
-    }
-  }
+  if (opt.className) el.className = opt.className;
+  if (opt.innerHTML) el.innerHTML = DOMPurify.sanitize(opt.innerHTML);
+
   for (var key in opt.style) {
     el.style[key] = opt.style[key];
   }

test/util/test-harness.js

@@ -2,17 +2,22 @@ import { css, html, LitElement, nothing } from 'lit';
 import { LoadingCompleteMixin } from '@brightspace-ui/core/mixins/loading-complete/loading-complete-mixin.js';
 
 const IFRAME_SCRIPTS_URL = new URL('./iframe-scripts.js', import.meta.url).href;
+const TEXT_SOURCE = `
+    <span id="target">Safe</span> text
+    <img src=x onerror="document.querySelector('#target').innerHTML = 'Onerror'">
+    <script>document.querySelector('#target').innerHTML = 'Script'</script>
+`;
 const stub = (object, method, fake) => {
     const original = object[method];
     object[method] = fake;
     return () => object[method] = original;
 };
 
 const commands = {
-    default: (window, element, settings) => window.html2pdf().set(settings).from(element).outputPdf('arraybuffer'),
-    legacy: async (window, element, settings) => {
+    default: (window, src, settings) => window.html2pdf().set(settings).from(src).outputPdf('arraybuffer'),
+    legacy: async (window, src, settings) => {
         const restore = stub(window.html2pdf.Worker.prototype, 'save', function () { return this.then(function save() { }); });
-        const arrayBuffer = await window.html2pdf(element, settings).outputPdf('arraybuffer');
+        const arrayBuffer = await window.html2pdf(src, settings).outputPdf('arraybuffer');
         restore();
         return arrayBuffer;
     },
@@ -41,6 +46,7 @@ class TestHarness extends LoadingCompleteMixin(LitElement) {
         selector: { type: String },
         settings: { type: String },
         show: { type: String, reflect: true },
+        textSource: { type: Boolean, attribute: 'text-source' },
         _arrayBuffer: { state: true },
     };
 
@@ -140,10 +146,10 @@ class TestHarness extends LoadingCompleteMixin(LitElement) {
     }
 
     async _handleScriptLoad() {
-        const element = this._pdfIframeWindow.document.querySelector(this.selector);
+        const src = this.textSource ? TEXT_SOURCE : this._pdfIframeWindow.document.querySelector(this.selector);
 
         const command = commands[this.command || 'default'];
-        const arrayBuffer = await command(this._pdfIframeWindow, element, settings[this.settings || 'default']);
+        const arrayBuffer = await command(this._pdfIframeWindow, src, settings[this.settings || 'default']);
         await this._pdfIframeWindow.renderPdf(arrayBuffer);
 
         this._resizeIframe(this._pdfIframe, true);

test/vdiff/html2pdf.vdiff.js

@@ -15,10 +15,11 @@ const conditions = {
   pagebreakCss: { settings: 'pagebreakCss' },
   pagebreakAvoidAll: { settings: 'pagebreakAvoidAll' },
   pagebreakSpecify: { settings: 'pagebreakSpecify' },
+  textSource: { textSource: true },
 };
 
 const fileConditions = {
-  'blank': ['default'],
+  'blank': ['default', 'textSource'],
   'lorem-ipsum': ['default', 'legacy', 'margin'],
   'all-tags': ['default', 'selectCanvas'],
   'css-selectors': ['default', 'selectMainId'],
@@ -38,6 +39,7 @@ describe('html2pdf', () => {
           selector=${ifDefined(condition.selector)}
           settings=${ifDefined(condition.settings)}
           show="pdf"
+          text-source=${ifDefined(condition.textSource)}
         ></test-harness>
       `, { viewport });