1. Refine for ZK-5766: DomPurify fails with partial html content

2. Upgrade DomPurify to 3.1.6
zkoss · Oct 17, 2024 · 0090c1b · 0090c1b
1 parent 9d4273e
commit 0090c1b
Show file tree

Hide file tree

Showing 26 changed files with 315 additions and 300 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -160,6 +160,12 @@ module.exports = {
               'htmlOutput': true, // true to indicate that the function returns encoded HTML
               'sanitized': true // true to indicate that the function returns sanitized HTML
             },
+            'zUtl.encodeXMLAttribute': { // zUtl.encodeXMLAttribute()
+              'htmlInput': true,
+              'safe': true,
+              'htmlOutput': true, // true to indicate that the function returns encoded HTML
+              'sanitized': true // true to indicate that the function returns sanitized HTML
+            },
             '.$s': {
               'htmlInput': true,
               'htmlOutput': true,
@@ -428,6 +434,12 @@ module.exports = {
               'htmlOutput': true, // true to indicate that the function returns encoded HTML
               'sanitized': true // true to indicate that the function returns sanitized HTML
             },
+            'zUtl.encodeXMLAttribute': { // zUtl.encodeXMLAttribute()
+              'htmlInput': true,
+              'safe': true,
+              'htmlOutput': true, // true to indicate that the function returns encoded HTML
+              'sanitized': true // true to indicate that the function returns sanitized HTML
+            },
             '.$s': {
               'htmlInput': true,
               'htmlOutput': true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "zkless-engine": "^1.1.13"
   },
   "dependencies": {
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.1.7",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43"
   },

diff --git a/zk/src/main/resources/web/js/zk/ext/purify.js b/zk/src/main/resources/web/js/zk/ext/purify.js
diff --git a/zk/src/main/resources/web/js/zk/widget.ts b/zk/src/main/resources/web/js/zk/widget.ts
@@ -2253,10 +2253,10 @@ new zul.wnd.Window({
 		if (fc = this.desktop) {
 			//3. generate HTML
 			var out = new zk.Buffer();
-			if (tagBeg) out.push(DOMPurify.sanitize(tagBeg));
+			if (tagBeg) out.push(/*safe*/tagBeg);
 			for (var j = 0, len = wgts.length; j < len; ++j)
 				wgts[j].redraw(out);
-			if (tagEnd) out.push(DOMPurify.sanitize(tagEnd));
+			if (tagEnd) out.push(/*safe*/tagEnd);
 
 			//4. update DOM
 			// eslint-disable-next-line @microsoft/sdl/no-html-method
@@ -3065,7 +3065,7 @@ new zul.wnd.Window({
 	domStyle_(no?: DomStyleOptions): string {
 		var out = '', s: string | undefined;
 		if (s = this.z$display) //see au.js
-			out += 'display:' + s + ';';
+			out += 'display:' + zUtl.encodeXMLAttribute(s) + ';';
 		else if (!this.isVisible() && (!no || !no.visible))
 			out += 'display:none;';
 
@@ -3075,17 +3075,17 @@ new zul.wnd.Window({
 				out += ';';
 		}
 		if ((!no || !no.width) && (s = this.getWidth()))
-			out += 'width:' + s + ';';
+			out += 'width:' + zUtl.encodeXMLAttribute(s) + ';';
 		if ((!no || !no.height) && (s = this.getHeight()))
-			out += 'height:' + s + ';';
+			out += 'height:' + zUtl.encodeXMLAttribute(s) + ';';
 		if ((!no || !no.left) && (s = this.getLeft()))
-			out += 'left:' + s + ';';
+			out += 'left:' + zUtl.encodeXMLAttribute(s) + ';';
 		if ((!no || !no.top) && (s = this.getTop()))
-			out += 'top:' + s + ';';
+			out += 'top:' + zUtl.encodeXMLAttribute(s) + ';';
 		let zIndex;
 		if ((!no || !no.zIndex) && ((zIndex = this.getZIndex() as number)) >= 0)
 			out += 'z-index:' + zIndex + ';';
-		return DOMPurify.sanitize(out);
+		return out;
 	}
 
 	/**
@@ -3111,7 +3111,7 @@ new zul.wnd.Window({
 			s = /*safe*/ this.getSclass();
 		if (!no || !no.zclass)
 			z = /*safe*/ this.getZclass();
-		let domClass = s ? z ? s + ' ' + z : s : z || '',
+		let domClass = zUtl.encodeXMLAttribute(s ? z ? s + ' ' + z : s : z || ''),
 			n = this.$n();
 		// FIX ZK-5137: modifying sclass clears vflex="1 here to avoid circular dependency issue in ZK 10
 		if (n) {
@@ -3124,7 +3124,7 @@ new zul.wnd.Window({
 				}
 			}
 		}
-		return DOMPurify.sanitize(domClass);
+		return domClass;
 	}
 
 	/**
@@ -3182,7 +3182,7 @@ new zul.wnd.Window({
 		if (this.domExtraAttrs) {
 			outHtml += this.domExtraAttrs_();
 		}
-		return DOMPurify.sanitize(outHtml);
+		return outHtml;
 	}
 
 	// B80-ZK-2957
@@ -3231,7 +3231,7 @@ new zul.wnd.Window({
 	 */
 	domTextStyleAttr_(): string | undefined {
 		const html = this.getStyle();
-		return DOMPurify.sanitize(html ? zUtl.appendAttr('style', jq.filterTextStyle(html)) : (html ?? ''));
+		return html ? zUtl.appendAttr('style', jq.filterTextStyle(zUtl.encodeXMLAttribute(html))) : (html ?? '');
 	}
 
 	/** Replaces the specified DOM element with the HTML content generated this widget.

diff --git a/zul/src/main/resources/web/js/zul/LabelImageWidget.ts b/zul/src/main/resources/web/js/zul/LabelImageWidget.ts
@@ -270,7 +270,7 @@ export abstract class LabelImageWidget<TElement extends HTMLElement = HTMLElemen
 	 */
 	domImage_(): string {
 		var img = this._image;
-		return DOMPurify.sanitize(img ? '<img src="' + img + '" align="absmiddle" alt="" aria-hidden="true">' : '');
+		return img ? '<img src="' + zUtl.encodeXMLAttribute(img) + '" align="absmiddle" alt="" aria-hidden="true">' : '';
 	}
 
 	/**
@@ -290,17 +290,17 @@ export abstract class LabelImageWidget<TElement extends HTMLElement = HTMLElemen
 				let html = '<span class="z-icon-stack" aria-hidden="true">';
 				for (let i = 0, icon_length = icon.length; i < icon_length; i++) {
 					if (icon[i]) { // add icon if icon[i] not undefined
-						html += '<i class="' + /*safe*/ icon[i] + '"';
+						html += '<i class="' + /*safe*/ zUtl.encodeXMLAttribute(icon[i]) + '"';
 						if (tooltip?.[i]) { // add iconTooltip if iconTooltip[i] not undefined
-							html += ' title="' + /*safe*/ tooltip[i] + '"';
+							html += ' title="' + /*safe*/ zUtl.encodeXMLAttribute(tooltip[i]) + '"';
 						}
 						html += '></i>';
 					}
 				}
 				html += '</span>';
-				return DOMPurify.sanitize(html);
+				return html;
 			} else {
-				return DOMPurify.sanitize('<i class="' + icon[0] + '"' + (tooltip?.[0] ? ' title="' + tooltip[0] + '"' : '') + ' aria-hidden="true"></i>');
+				return '<i class="' + zUtl.encodeXMLAttribute(icon[0]) + '"' + (tooltip?.[0] ? ' title="' + zUtl.encodeXMLAttribute(tooltip[0]) + '"' : '') + ' aria-hidden="true"></i>';
 			}
 		}
 		return '';

diff --git a/zul/src/main/resources/web/js/zul/box/Box.ts b/zul/src/main/resources/web/js/zul/box/Box.ts
@@ -792,7 +792,7 @@ export class Box extends zul.Widget {
 			return ''; //if hoz and not splitter, display handled in _childInnerAttrs
 
 		if (!child.isVisible()) html += ' style="display:none"';
-		return DOMPurify.sanitize(html);
+		return html;
 	}
 
 	/** @internal */
@@ -823,7 +823,7 @@ export class Box extends zul.Widget {
 
 		if (!vert && !child.isVisible()) style += style ? ';display:none' : 'display:none';
 		if (!vert) style += style ? ';height:100%' : 'height:100%';
-		return DOMPurify.sanitize(style ? html + ' style="' + style + '"' : html);
+		return style ? html + ' style="' + style + '"' : html;
 	}
 
 	/** @internal */

diff --git a/zul/src/main/resources/web/js/zul/grid/Row.ts b/zul/src/main/resources/web/js/zul/grid/Row.ts
@@ -300,15 +300,15 @@ export class Row extends zul.Widget<HTMLTableRowElement> implements zul.mesh.Ite
 		if (isDetail) {
 			var wd = child.getWidth();
 			if (wd)
-				style += 'width:' + wd + ';';
+				style += 'width:' + zUtl.encodeXMLAttribute(wd) + ';';
 		}
 		if (hgh || align || valign) {
 			if (hgh)
-				style += 'height:' + hgh + ';';
+				style += 'height:' + zUtl.encodeXMLAttribute(hgh) + ';';
 			if (align)
-				style += 'text-align:' + align + ';';
+				style += 'text-align:' + zUtl.encodeXMLAttribute(align) + ';';
 			if (valign)
-				style += 'vertical-align:' + valign + ';';
+				style += 'vertical-align:' + zUtl.encodeXMLAttribute(valign) + ';';
 		}
 		var clx = isDetail ? child.$s('outer') : this.$s('inner'),
 			attrs = '';
@@ -323,7 +323,7 @@ export class Row extends zul.Widget<HTMLTableRowElement> implements zul.mesh.Ite
 				attrs += ' aria-hidden="true"';
 			clx += ' ' + this.$s('hidden-column');
 		}
-		return DOMPurify.sanitize(attrs + ' class="' + clx + '"');
+		return attrs + ' class="' + clx + '"';
 	}
 
 	/**

diff --git a/zul/src/main/resources/web/js/zul/inp/InputWidget.ts b/zul/src/main/resources/web/js/zul/inp/InputWidget.ts
@@ -626,21 +626,21 @@ export class InputWidget<ValueType = unknown> extends zul.Widget<HTMLInputElemen
 		vHTML = /*safe*/ this._tabindex;
 		if (vHTML != undefined) html += ' tabindex="' + vHTML + '"';
 		vHTML = /*safe*/ this._name;
-		if (vHTML) html += ' name="' + vHTML + '"';
+		if (vHTML) html += ' name="' + zUtl.encodeXMLAttribute(vHTML as never) + '"';
 		if (this._disabled) html += ' disabled="disabled"';
 		if (this._readonly) html += ' readonly="readonly"';
 		if (this._placeholder) html += ' placeholder="' + zUtl.encodeXML(this._placeholder) + '"';
 		if (this._inputAttributes) {
 			for (var key in this._inputAttributes) {
 				var val = this._inputAttributes[key];
-				html += (' ' + /*safe*/ key + '="' + /*safe*/ val + '"');
+				html += (' ' + /*safe*/ key + '="' + zUtl.encodeXMLAttribute(val) + '"');
 			}
 		}
 
 		var /*safe*/ s = jq.filterTextStyle(this.domStyle_({width: true, height: true, top: true, left: true}));
 		if (s) html += ' style="' + /*safe*/ s + '"';
 
-		return DOMPurify.sanitize(html);
+		return html;
 	}
 
 	/** @internal */
@@ -881,7 +881,7 @@ export class InputWidget<ValueType = unknown> extends zul.Widget<HTMLInputElemen
 
 		if (this.desktop) { //err not visible if not attached //B85-ZK-3321
 			jq(this.getInputNode()).addClass(this.$s('invalid'));
-			
+
 			interface CustomConstraint extends zul.inp.SimpleConstraint {
 				showCustomError?: (inp: InputWidget<ValueType>, msg: string) => boolean;
 			}
@@ -1083,7 +1083,7 @@ export class InputWidget<ValueType = unknown> extends zul.Widget<HTMLInputElemen
 				//value not reset yet so wait a moment
 		}
 	}
-	
+
 	/** @internal */
 	override focus_(timeout?: number): boolean {
 		zk(this.getInputNode()).focus(timeout);

diff --git a/zul/src/main/resources/web/js/zul/menu/Menu.ts b/zul/src/main/resources/web/js/zul/menu/Menu.ts
@@ -221,7 +221,7 @@ export class Menu extends zul.LabelImageWidget implements zul.LabelImageWidgetWi
 		/*safe*/ iconSclass = this.domIcon_();
 
 		if (img)
-			/*safe*/ img = '<img id="' + this.uuid + '-img" src="' + /*safe*/ img + '" class="' + this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />'
+			/*safe*/ img = '<img id="' + this.uuid + '-img" src="' + /*safe*/ zUtl.encodeXMLAttribute(img) + '" class="' + this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />'
 				+ (iconSclass ? ' ' + /*safe*/ iconSclass : '');
 		else {
 			if (iconSclass) {
@@ -232,7 +232,7 @@ export class Menu extends zul.LabelImageWidget implements zul.LabelImageWidgetWi
 					+ this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />';
 			}
 		}
-		return DOMPurify.sanitize(img + label + separator + icon);
+		return img + label + separator + icon;
 	}
 
 	/**

diff --git a/zul/src/main/resources/web/js/zul/menu/Menuitem.ts b/zul/src/main/resources/web/js/zul/menu/Menuitem.ts
@@ -366,7 +366,7 @@ export class Menuitem extends zul.LabelImageWidget implements zul.LabelImageWidg
 			/*safe*/ iconSclass = this.domIcon_();
 
 		if (img)
-			/*safe*/ img = '<img src="' + /*safe*/ img + '" class="' + this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />'
+			/*safe*/ img = '<img src="' + zUtl.encodeXMLAttribute(img) + '" class="' + this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />'
 				+ (iconSclass ? ' ' + /*safe*/ iconSclass : '');
 		else {
 			if (iconSclass) {
@@ -376,7 +376,7 @@ export class Menuitem extends zul.LabelImageWidget implements zul.LabelImageWidg
 					+ ' src="data:image/png;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="' + this.$s('image') + '" align="absmiddle" alt="" aria-hidden="true" />';
 			}
 		}
-		return DOMPurify.sanitize(img + (this.isAutocheck() || this.isCheckmark() ? icon : '') + label);
+		return img + (this.isAutocheck() || this.isCheckmark() ? icon : '') + label;
 	}
 
 	/**

diff --git a/zul/src/main/resources/web/js/zul/menu/mold/menuitem.js b/zul/src/main/resources/web/js/zul/menu/mold/menuitem.js
@@ -19,7 +19,7 @@ function menuitem$mold$(out) {
 
 	out.push('<li', this.domAttrs_(), ' role="none">');
 
-	out.push('<a role="' + (chechmark ? 'menuitemcheckbox' : 'menuitem') + '" href="', this.getHref() ? /*safe*/ zUtl.encodeXMLAttribute(DOMPurify.sanitize(this.getHref())) : 'javascript:void(0);', '"');
+	out.push('<a role="' + (chechmark ? 'menuitemcheckbox' : 'menuitem') + '" href="', this.getHref() ? /*safe*/ zUtl.encodeXMLAttribute(this.getHref()) : 'javascript:void(0);', '"');
 	if (target)
 		out.push(' target="', zUtl.encodeXML(target), '"');
 	out.push(' id="', uuid, '-a" class="', this.$s('content'), '"',

diff --git a/zul/src/main/resources/web/js/zul/mesh/Auxheader.ts b/zul/src/main/resources/web/js/zul/mesh/Auxheader.ts
@@ -74,14 +74,14 @@ export abstract class Auxheader extends zul.mesh.HeaderWidget {
 
 		return this;
 	}
-	
+
 	/** @internal */
 	override domAttrs_(no?: zk.DomAttrsOptions): string {
 		var /*safe*/ s = super.domAttrs_(no);
 		if (this._colspan != 1)
-			s += ` colspan="${this._colspan}"`;
+			s += ` colspan="${zUtl.encodeXMLAttribute(this._colspan as never)}"`;
 		if (this._rowspan != 1)
-			s += ` rowspan="${this._rowspan}"`;
-		return DOMPurify.sanitize(s);
+			s += ` rowspan="${zUtl.encodeXMLAttribute(this._rowspan as never)}"`;
+		return s;
 	}
 }
diff --git a/zul/src/main/resources/web/js/zul/tab/Tab.ts b/zul/src/main/resources/web/js/zul/tab/Tab.ts
@@ -277,9 +277,9 @@ export class Tab extends zul.LabelImageWidget implements zul.LabelImageWidgetWit
 		if (!img) {
 			img = iconSclass;
 		} else
-			/*safe*/ img = '<img src="' + /*safe*/ img + '" class="' + this.$s('image') + '" alt="" aria-hidden="true"/>'
+			/*safe*/ img = '<img src="' + zUtl.encodeXMLAttribute(img) + '" class="' + this.$s('image') + '" alt="" aria-hidden="true"/>'
 				+ (iconSclass ? ' ' + /*safe*/ iconSclass : '');
-		return DOMPurify.sanitize(label ? img + ' ' + label : img);
+		return label ? img + ' ' + label : img;
 	}
 
 	//bug #3014664

diff --git a/zul/src/main/resources/web/js/zul/utl/Iframe.ts b/zul/src/main/resources/web/js/zul/utl/Iframe.ts
@@ -195,11 +195,11 @@ export class Iframe extends zul.Widget<HTMLIFrameElement> {
 		if ('auto' != v)
 			attr += ' scrolling="' + ('true' === v ? 'yes' : 'false' === v ? 'no' : v) + '"';
 		if ((v = this._align))
-			attr += ' align="' + v + '"';
+			attr += ' align="' + zUtl.encodeXMLAttribute(v) + '"';
 		if ((v = this._name))
-			attr += ' name="' + v + '"';
+			attr += ' name="' + zUtl.encodeXMLAttribute(v) + '"';
 		if ((v = this._autohide))
 			attr += ' z_autohide="' + v + '"';
-		return DOMPurify.sanitize(attr);
+		return attr;
 	}
 }
diff --git a/zul/src/main/resources/web/js/zul/utl/mold/style.js b/zul/src/main/resources/web/js/zul/utl/mold/style.js
@@ -1,9 +1,9 @@
 /* style.js
 
 	Purpose:
-		
+
 	Description:
-		
+
 	History:
 		Thu Jun 30 14:33:41 TST 2011, Created by tomyeh
 
@@ -15,7 +15,7 @@ function style$mold$(out) {
 
 	out.push('<div style="display:none" id="', this.uuid, '">&#160;');
 	if ((src = this._src))
-		out.push('<link id="', this.uuid, '-real" rel="stylesheet" type="text/css" href="', DOMPurify.sanitize(src), '"');
+		out.push('<link id="', this.uuid, '-real" rel="stylesheet" type="text/css" href="', zUtl.encodeXMLAttribute(src), '"');
 	else
 		out.push('<style id="', this.uuid, '-real"');
 

diff --git a/zul/src/main/resources/web/js/zul/wgt/A.ts b/zul/src/main/resources/web/js/zul/wgt/A.ts
@@ -254,14 +254,14 @@ export class A extends zul.LabelImageWidget<HTMLAnchorElement> implements zul.La
 		var /*safe*/ attr = super.domAttrs_(no),
 			v: string | undefined;
 		if (v = this.getTarget())
-			attr += ` target="${v}"`;
+			attr += ` target="${zUtl.encodeXMLAttribute(v)}"`;
 		if (v = this.getHref())
-			attr += ` href="${v}"`;
+			attr += ` href="${zUtl.encodeXMLAttribute(v)}"`;
 		else
 			attr += ' href="javascript:;"';
 		if (this._disabled)
 			attr += ' disabled="disabled"';
-		return DOMPurify.sanitize(attr);
+		return attr;
 	}
 
 	/** @internal */