suneditor 3.1.3 → 3.2.0

package/src/plugins/modal/drawing.js

@@ -49,7 +49,9 @@ class Drawing extends PluginModal {
 		this.pluginOptions = {
 			outputFormat: pluginOptions.outputFormat || 'dataurl', // dataurl, svg
 			useFormatType: pluginOptions.useFormatType ?? false,
-			defaultFormatType: ['block', 'inline'].includes(pluginOptions.defaultFormatType) ? pluginOptions.defaultFormatType : 'block',
+			defaultFormatType: ['block', 'inline'].includes(pluginOptions.defaultFormatType)
+				? pluginOptions.defaultFormatType
+				: 'block',
 			keepFormatType: pluginOptions.keepFormatType ?? false,
 			lineWidth: pluginOptions.lineWidth || 5,
 			lineReconnect: !!pluginOptions.lineReconnect,
@@ -70,9 +72,13 @@ class Drawing extends PluginModal {
 
 		// exception
 		if (!this.$.plugins.image) {
-			console.warn('[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need either "image" plugin. Please add the "image" plugin.');
+			console.warn(
+				'[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need either "image" plugin. Please add the "image" plugin.',
+			);
 		} else if (this.pluginOptions.outputFormat === 'svg' && !this.$.plugins.image.pluginOptions.uploadUrl) {
-			console.warn('[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need the "image" plugin with the "uploadUrl" option. Please add the "image" plugin with the "uploadUrl" option.');
+			console.warn(
+				'[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need the "image" plugin with the "uploadUrl" option. Please add the "image" plugin with the "uploadUrl" option.',
+			);
 		}
 
 		// create HTML
@@ -119,7 +125,11 @@ class Drawing extends PluginModal {
 		};
 
 		// init
-		this.$.eventManager.addEvent(modalEl.querySelector('[data-command="remove"]'), 'click', this.#OnRemove.bind(this));
+		this.$.eventManager.addEvent(
+			modalEl.querySelector('[data-command="remove"]'),
+			'click',
+			this.#OnRemove.bind(this),
+		);
 	}
 
 	/**
@@ -128,7 +138,9 @@ class Drawing extends PluginModal {
 	 */
 	open() {
 		if (this.pluginOptions.useFormatType) {
-			this.#activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
+			this.#activeAsInline(
+				(this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline',
+			);
 		}
 		this.modal.open();
 		this.#initDrawing();
@@ -180,10 +192,26 @@ class Drawing extends PluginModal {
 
 		this.#setCtx();
 
-		this.#eventsRegister.touchstart = this.$.eventManager.addEvent(canvas, 'touchstart', this.#events.touchstart, { passive: false, capture: true });
-		this.#eventsRegister.touchmove = this.$.eventManager.addEvent(canvas, 'touchmove', this.#events.touchmove, true);
-		this.#eventsRegister.mousedown = this.$.eventManager.addEvent(canvas, 'mousedown', this.#events.mousedown, { passive: false, capture: true });
-		this.#eventsRegister.mousemove = this.$.eventManager.addEvent(canvas, 'mousemove', this.#events.mousemove, true);
+		this.#eventsRegister.touchstart = this.$.eventManager.addEvent(canvas, 'touchstart', this.#events.touchstart, {
+			passive: false,
+			capture: true,
+		});
+		this.#eventsRegister.touchmove = this.$.eventManager.addEvent(
+			canvas,
+			'touchmove',
+			this.#events.touchmove,
+			true,
+		);
+		this.#eventsRegister.mousedown = this.$.eventManager.addEvent(canvas, 'mousedown', this.#events.mousedown, {
+			passive: false,
+			capture: true,
+		});
+		this.#eventsRegister.mousemove = this.$.eventManager.addEvent(
+			canvas,
+			'mousemove',
+			this.#events.mousemove,
+			true,
+		);
 		this.#eventsRegister.mouseup = this.$.eventManager.addEvent(canvas, 'mouseup', this.#events.mouseup, true);
 		this.#eventsRegister.mouseleave = this.$.eventManager.addEvent(canvas, 'mouseleave', this.#events.mouseleave);
 		this.#eventsRegister.mouseenter = this.$.eventManager.addEvent(canvas, 'mouseenter', this.#events.mouseenter);
@@ -202,7 +230,8 @@ class Drawing extends PluginModal {
 				canvas.width = newWidth;
 				canvas.height = newHeight;
 				if (prevWidth !== canvas.width || prevHeight !== canvas.height) {
-					if (this.pluginOptions.maintainRatio) this.#adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight);
+					if (this.pluginOptions.maintainRatio)
+						this.#adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight);
 					this.#drawAll();
 				}
 			});
@@ -241,7 +270,8 @@ class Drawing extends PluginModal {
 	#setCtx() {
 		this.ctx.lineWidth = this.pluginOptions.lineWidth;
 		this.ctx.lineCap = this.pluginOptions.lineCap;
-		this.ctx.strokeStyle = this.pluginOptions.lineColor || _w.getComputedStyle(this.$.contextProvider.carrierWrapper).color;
+		this.ctx.strokeStyle =
+			this.pluginOptions.lineColor || _w.getComputedStyle(this.$.contextProvider.carrierWrapper).color;
 	}
 
 	/**

package/src/plugins/modal/embed.js

@@ -39,6 +39,17 @@ const { _w, NO_EVENT } = env;
  * { query_vimeo: 'autoplay=1' }
  * ```
  * @property {Array<RegExp>} [urlPatterns] - Additional URL patterns to recognize as embeddable content.
+ * @property {Array<RegExp|string>} [scriptSrcWhitelist] - Allowed `<script src=...>` patterns for raw embed HTML
+ * - (e.g. Twitter blockquote + `widgets.js`). Each entry is a `RegExp` (tested against the full src) or a `string` (matched via `startsWith`).
+ * - Defaults to `[]` — all script tags are rejected.** Inline scripts (no `src`) are always rejected.
+ * ```js
+ * {
+ *   scriptSrcWhitelist: [
+ *     /^https:\/\/platform\.x\.com\/widgets\.js$/,
+ *     /^https:\/\/www\.instagram\.com\/embed\.js$/,
+ *   ]
+ * }
+ * ```
  * @property {Object<string, {pattern: RegExp, action: (url: string) => string, tag: string}>} [embedQuery] - Custom embed service definitions.
  * Each key is a service name, with `pattern` to match the URL, `action` to transform it into an embed URL, and `tag` for the output element.
  * ```js
@@ -125,6 +136,18 @@ class Embed extends PluginModal {
 		return false;
 	}
 
+	/**
+	 * @description Validate a `<script src>` against the configured whitelist for raw embed HTML.
+	 * Inline scripts (no `src`) are always rejected.
+	 * @param {string} src
+	 * @param {Array<RegExp|string>} whitelist
+	 * @returns {boolean}
+	 */
+	static #isAllowedScriptSrc(src, whitelist) {
+		if (!src) return false;
+		return whitelist.some((p) => (p instanceof RegExp ? p.test(src) : src.startsWith(p)));
+	}
+
 	/** @type {Array<RegExp>} */
 	static #urlPatterns = null;
 
@@ -158,8 +181,18 @@ class Embed extends PluginModal {
 		this.pluginOptions = {
 			canResize: pluginOptions.canResize === undefined ? true : pluginOptions.canResize,
 			showHeightInput: pluginOptions.showHeightInput === undefined ? true : !!pluginOptions.showHeightInput,
-			defaultWidth: !pluginOptions.defaultWidth || !numbers.get(pluginOptions.defaultWidth, 0) ? '' : numbers.is(pluginOptions.defaultWidth) ? pluginOptions.defaultWidth + 'px' : pluginOptions.defaultWidth,
-			defaultHeight: !pluginOptions.defaultHeight || !numbers.get(pluginOptions.defaultHeight, 0) ? '' : numbers.is(pluginOptions.defaultHeight) ? pluginOptions.defaultHeight + 'px' : pluginOptions.defaultHeight,
+			defaultWidth:
+				!pluginOptions.defaultWidth || !numbers.get(pluginOptions.defaultWidth, 0)
+					? ''
+					: numbers.is(pluginOptions.defaultWidth)
+						? pluginOptions.defaultWidth + 'px'
+						: pluginOptions.defaultWidth,
+			defaultHeight:
+				!pluginOptions.defaultHeight || !numbers.get(pluginOptions.defaultHeight, 0)
+					? ''
+					: numbers.is(pluginOptions.defaultHeight)
+						? pluginOptions.defaultHeight + 'px'
+						: pluginOptions.defaultHeight,
 			percentageOnlySize: !!pluginOptions.percentageOnlySize,
 			uploadUrl: typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null,
 			uploadHeaders: pluginOptions.uploadHeaders || null,
@@ -168,16 +201,22 @@ class Embed extends PluginModal {
 			iframeTagAttributes: pluginOptions.iframeTagAttributes || null,
 			query_youtube: pluginOptions.query_youtube || '',
 			query_vimeo: pluginOptions.query_vimeo || '',
+			scriptSrcWhitelist: Array.isArray(pluginOptions.scriptSrcWhitelist) ? pluginOptions.scriptSrcWhitelist : [],
 			insertBehavior: pluginOptions.insertBehavior,
 		};
 
 		// create HTML
 		const sizeUnit = this.pluginOptions.percentageOnlySize ? '%' : 'px';
 		const modalEl = CreateHTML_modal(this.$, this.pluginOptions);
-		const figureControls = pluginOptions.controls || (!this.pluginOptions.canResize ? [['align', 'edit', 'copy', 'remove']] : [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']]);
+		const figureControls =
+			pluginOptions.controls ||
+			(!this.pluginOptions.canResize
+				? [['align', 'edit', 'copy', 'remove']]
+				: [['resize_auto,75,50', 'align', 'edit', 'revert', 'copy', 'remove']]);
 
 		// show align
-		if (!figureControls.some((subArray) => subArray.includes('align'))) modalEl.figureAlignBtn.style.display = 'none';
+		if (!figureControls.some((subArray) => subArray.includes('align')))
+			modalEl.figureAlignBtn.style.display = 'none';
 
 		// modules
 		this.modal = new Modal(this, this.$, modalEl.html);
@@ -210,7 +249,8 @@ class Embed extends PluginModal {
 				tag: 'iframe',
 			},
 			twitter: {
-				pattern: /^(?:https?:\/\/)?(?:(?:www\.)?(?:twitter\.com|x\.com)\/(?:[^/?#]+\/)?status\/\d+(?:[/?#]|$)|platform\.twitter\.com\/embed\/Tweet\.html(?:[?#].*)?$)/i,
+				pattern:
+					/^(?:https?:\/\/)?(?:(?:www\.)?(?:twitter\.com|x\.com)\/(?:[^/?#]+\/)?status\/\d+(?:[/?#]|$)|platform\.twitter\.com\/embed\/Tweet\.html(?:[?#].*)?$)/i,
 				action: (url) => {
 					return `https://platform.twitter.com/embed/Tweet.html?url=${encodeURIComponent(url)}`;
 				},
@@ -319,11 +359,16 @@ class Embed extends PluginModal {
 	 */
 	modalOn(isUpdate) {
 		if (!isUpdate && this.#resizing) {
-			this.inputX.value = this.#origin_w = this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
-			this.inputY.value = this.#origin_h = this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
+			this.inputX.value = this.#origin_w =
+				this.pluginOptions.defaultWidth === 'auto' ? '' : this.pluginOptions.defaultWidth;
+			this.inputY.value = this.#origin_h =
+				this.pluginOptions.defaultHeight === 'auto' ? '' : this.pluginOptions.defaultHeight;
 			this.proportion.disabled = true;
 		} else if (isUpdate) {
-			this.#linkValue = this.previewSrc.textContent = this.embedInput.value = this.#cover.getAttribute('data-se-origin') || '';
+			this.#linkValue =
+				this.previewSrc.textContent =
+				this.embedInput.value =
+					this.#cover.getAttribute('data-se-origin') || '';
 		}
 	}
 
@@ -332,7 +377,9 @@ class Embed extends PluginModal {
 	 * @type {SunEditor.Hook.Modal.Action}
 	 */
 	async modalAction() {
-		this.#align = /** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_embed_radio"]:checked')).value;
+		this.#align = /** @type {HTMLInputElement} */ (
+			this.modal.form.querySelector('input[name="suneditor_embed_radio"]:checked')
+		).value;
 
 		let result = false;
 		if (this.#linkValue.length > 0) {
@@ -352,13 +399,17 @@ class Embed extends PluginModal {
 		Modal.OnChangeFile(this.fileModalWrapper, []);
 		this.#linkValue = this.previewSrc.textContent = this.embedInput.value = '';
 
-		/** @type {HTMLInputElement} */ (this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]')).checked = true;
+		/** @type {HTMLInputElement} */ (
+			this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]')
+		).checked = true;
 		this.#ratio = { w: 0, h: 0 };
 		this.#nonResizing = false;
 
 		if (this.#resizing) {
-			this.inputX.value = this.pluginOptions.defaultWidth === this.#defaultSizeX ? '' : this.pluginOptions.defaultWidth;
-			this.inputY.value = this.pluginOptions.defaultHeight === this.#defaultSizeY ? '' : this.pluginOptions.defaultHeight;
+			this.inputX.value =
+				this.pluginOptions.defaultWidth === this.#defaultSizeX ? '' : this.pluginOptions.defaultWidth;
+			this.inputY.value =
+				this.pluginOptions.defaultHeight === this.#defaultSizeY ? '' : this.pluginOptions.defaultHeight;
 			this.proportion.checked = false;
 			this.proportion.disabled = true;
 		}
@@ -390,7 +441,12 @@ class Embed extends PluginModal {
 		const focusEl = container.previousElementSibling || container.nextElementSibling;
 		const emptyDiv = container.parentNode;
 
-		const message = await this.$.eventManager.triggerEvent('onEmbedDeleteBefore', { element: targetEl, container, align: this.#align, url: this.#linkValue });
+		const message = await this.$.eventManager.triggerEvent('onEmbedDeleteBefore', {
+			element: targetEl,
+			container,
+			align: this.#align,
+			url: this.#linkValue,
+		});
 		if (message === false) return;
 
 		dom.utils.removeItem(container);
@@ -446,6 +502,20 @@ class Embed extends PluginModal {
 		if (/^<iframe\s|^<blockquote\s/i.test(src)) {
 			const embedDOM = new DOMParser().parseFromString(src, 'text/html').body.children;
 			if (embedDOM.length === 0) return false;
+
+			// Validate every iframe in the raw HTML against the URL whitelist.
+			for (let i = 0; i < embedDOM.length; i++) {
+				const node = /** @type {Element} */ (embedDOM[i]);
+				if (/^iframe$/i.test(node.nodeName) && !Embed.#checkContentType(node.getAttribute('src') || ''))
+					return false;
+				const nested = node.querySelectorAll?.('iframe');
+				if (nested) {
+					for (let j = 0; j < nested.length; j++) {
+						if (!Embed.#checkContentType(nested[j].getAttribute('src') || '')) return false;
+					}
+				}
+			}
+
 			embedInfo = { children: embedDOM, ...this.#getInfo(), process: null };
 		} else {
 			const processUrl = this.findProcessUrl(src);
@@ -461,7 +531,16 @@ class Embed extends PluginModal {
 
 		const handler = function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
-			uploadCallback(src, infos.process, infos.url, infos.children, infos.inputWidth, infos.inputHeight, infos.align, infos.isUpdate);
+			uploadCallback(
+				src,
+				infos.process,
+				infos.url,
+				infos.children,
+				infos.inputWidth,
+				infos.inputHeight,
+				infos.align,
+				infos.isUpdate,
+			);
 		}.bind(this, this.#create.bind(this), embedInfo);
 
 		const result = await this.$.eventManager.triggerEvent('onEmbedInputBefore', {
@@ -487,7 +566,13 @@ class Embed extends PluginModal {
 	 */
 	#ready(target, infoOnly = false) {
 		if (!target) return;
-		const figureInfo = this.figure.open(target, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly });
+		const figureInfo = this.figure.open(target, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly,
+		});
 
 		this.#element = target;
 		this.#cover = figureInfo.cover;
@@ -508,7 +593,9 @@ class Embed extends PluginModal {
 		this.#origin_h = String(figureInfo.originHeight || figureInfo.h || '');
 
 		/** @type {HTMLInputElement} */
-		const activeAlign = this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="' + this.#align + '"]') || this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]');
+		const activeAlign =
+			this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="' + this.#align + '"]') ||
+			this.modal.form.querySelector('input[name="suneditor_embed_radio"][value="none"]');
 		activeAlign.checked = true;
 
 		if (!this.#resizing) return;
@@ -604,9 +691,12 @@ class Embed extends PluginModal {
 				container = figure.container;
 
 				const childNodes = Array.from(children);
+				const scriptWhitelist = this.pluginOptions.scriptSrcWhitelist;
 				for (const chd of childNodes) {
 					if (/^script$/i.test(chd.nodeName)) {
-						scriptTag = dom.utils.createElement('script', { src: /** @type {Element} */ (chd).getAttribute('src'), async: 'true' }, null);
+						const scriptSrc = /** @type {Element} */ (chd).getAttribute('src') || '';
+						if (!Embed.#isAllowedScriptSrc(scriptSrc, scriptWhitelist)) continue;
+						scriptTag = dom.utils.createElement('script', { src: scriptSrc, async: 'true' }, null);
 						continue;
 					}
 					cover.appendChild(chd);
@@ -618,7 +708,13 @@ class Embed extends PluginModal {
 		this.#element = oFrame;
 		this.#cover = cover;
 		this.#container = container;
-		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+		this.figure.open(oFrame, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly: true,
+		});
 
 		width ||= this.#defaultSizeX;
 		height ||= this.#defaultSizeY;
@@ -639,7 +735,11 @@ class Embed extends PluginModal {
 		cover.setAttribute('data-se-origin', originSrc);
 
 		if (!isUpdate) {
-			this.$.component.insert(container, { skipHistory: true, scrollTo: false, insertBehavior: this.pluginOptions.insertBehavior });
+			this.$.component.insert(container, {
+				skipHistory: true,
+				scrollTo: false,
+				insertBehavior: this.pluginOptions.insertBehavior,
+			});
 
 			if (scriptTag) {
 				try {
@@ -681,7 +781,8 @@ class Embed extends PluginModal {
 			return;
 		}
 
-		if (!this.#resizing || !changeSize || !this.figure.isVertical) this.figure.setTransform(oFrame, width, height, 0);
+		if (!this.#resizing || !changeSize || !this.figure.isVertical)
+			this.figure.setTransform(oFrame, width, height, 0);
 		if (!scriptTag) this.$.history.push(false);
 	}
 
@@ -700,7 +801,13 @@ class Embed extends PluginModal {
 		const container = figure.container;
 
 		// size
-		this.figure.open(oFrame, { nonResizing: this.#nonResizing, nonSizeInfo: false, nonBorder: false, figureTarget: false, infoOnly: true });
+		this.figure.open(oFrame, {
+			nonResizing: this.#nonResizing,
+			nonSizeInfo: false,
+			nonBorder: false,
+			figureTarget: false,
+			infoOnly: true,
+		});
 		const size = (oFrame.getAttribute('data-se-size') || ',').split(',');
 
 		const width = size[0] || prevFrame.width || '';
@@ -860,7 +967,10 @@ function CreateHTML_modal({ lang, icons }, pluginOptions) {
 		const onlyPercentDisplay = onlyPercentage ? ' style="display: none !important;"' : '';
 		const heightDisplay = !pluginOptions.showHeightInput ? ' style="display: none !important;"' : '';
 		const ratioDisplay = !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
-		const onlyWidthDisplay = !onlyPercentage && !pluginOptions.showHeightInput && !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
+		const onlyWidthDisplay =
+			!onlyPercentage && !pluginOptions.showHeightInput && !pluginOptions.showRatioOption
+				? ' style="display: none !important;"'
+				: '';
 		html += /*html*/ `
 			<div class="se-modal-form">
 				<div class="se-modal-size-text">