@schukai/monster 4.137.1 → 4.137.3

package/README.md

@@ -91,7 +91,7 @@ be closed immediately.
 
 ## License
 
-Copyright © 2024 Volker Schukai
+Copyright © 2026 Volker Schukai
 
 Licensed under [AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html). Commercial licenses are also available.
 

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.137.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.137.3"}

package/source/components/layout/tabs.mjs

@@ -580,6 +580,7 @@ function initPopperSwitch() {
 	}
 
 	this[switchElementSymbol] = switchButton;
+	updatePopperSwitchVisibility.call(this);
 }
 
 /**
@@ -1180,25 +1181,36 @@ function adjustButtonVisibility() {
 	const self = this;
 
 	return new Promise((resolve) => {
-		const observer = new MutationObserver(function (mutations) {
+		let resolved = false;
+		let observer;
+		const runIfRendered = () => {
+			if (resolved === true) return;
+
 			const defCount = self.getOption("buttons.standard").length;
 			const domCount = self[navElementSymbol].querySelectorAll(
-				'button[data-monster-role="button"]',
+				'button[data-monster-role="button"][data-monster-tab-reference]',
 			).length;
 
-			// in drawing
 			if (defCount !== domCount) return;
 
-			observer.disconnect();
-
+			resolved = true;
+			observer?.disconnect();
 			checkAndRearrangeButtons.call(self);
-
 			resolve();
+		};
+
+		observer = new MutationObserver(function () {
+			runIfRendered();
 		});
 
 		observer.observe(self[navElementSymbol], {
 			attributes: true,
+			childList: true,
+			subtree: true,
 		});
+
+		runIfRendered();
+		getWindow().requestAnimationFrame(runIfRendered);
 	});
 }
 
@@ -1273,16 +1285,25 @@ function rearrangeButtons() {
 
 		setButtonCollections.call(this, standardButtons, popperButtons);
 
-		if (this[switchElementSymbol]) {
-			if (popperButtons.length > 0) {
-				this[switchElementSymbol].classList.remove("hidden");
-			} else {
-				this[switchElementSymbol].classList.add("hidden");
-			}
-		}
+		updatePopperSwitchVisibility.call(this);
 	});
 }
 
+/**
+ * @private
+ */
+function updatePopperSwitchVisibility() {
+	if (!this[switchElementSymbol]) {
+		return;
+	}
+
+	if (this.getOption("buttons.popper").length > 0) {
+		this[switchElementSymbol].classList.remove("hidden");
+	} else {
+		this[switchElementSymbol].classList.add("hidden");
+	}
+}
+
 /**
  * @private
  * @param {string} ref

package/source/dom/resource/data.mjs

@@ -15,10 +15,8 @@
 import { internalStateSymbol } from "../../constants.mjs";
 import { extend } from "../../data/extend.mjs";
 import { getGlobalFunction } from "../../types/global.mjs";
-import { addAttributeToken } from "../attributes.mjs";
 import {
 	ATTRIBUTE_CLASS,
-	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ID,
 	ATTRIBUTE_SRC,
 	ATTRIBUTE_TITLE,
@@ -35,6 +33,9 @@ import { instanceSymbol } from "../../constants.mjs";
 
 export { Data };
 
+const KEY_ALLOWED_ORIGINS = "allowedOrigins";
+const JSON_SCRIPT_TYPE_PATTERN = /^(application\/json|text\/json|application\/[a-z0-9.+-]+\+json)$/i;
+
 /**
  * This class is used by the resource manager to embed data.
  *
@@ -54,6 +55,7 @@ class Data extends Resource {
 			mode: "cors",
 			credentials: "same-origin",
 			type: "application/json",
+			[KEY_ALLOWED_ORIGINS]: ["self"],
 		});
 	}
 
@@ -73,7 +75,6 @@ class Data extends Resource {
 	 * @return {Monster.DOM.Resource}
 	 */
 	connect() {
-		const self = this;
 		if (!(this[referenceSymbol] instanceof HTMLElement)) {
 			this.create();
 		}
@@ -105,6 +106,12 @@ class Data extends Resource {
  */
 function createElement() {
 	const document = this.getOption(KEY_DOCUMENT);
+	const type = this.getOption(ATTRIBUTE_TYPE);
+
+	if (!isInertJSONType(type)) {
+		throw new Error("unsupported data resource type");
+	}
+
 	this[referenceSymbol] = document.createElement(TAG_SCRIPT);
 
 	for (const key of [
@@ -127,6 +134,8 @@ function createElement() {
  * throws {Error} target not found
  */
 function appendToDocument() {
+	const document = this.getOption(KEY_DOCUMENT);
+	const url = getValidatedURL.call(this, document);
 	const targetNode = document.querySelector(this.getOption(KEY_QUERY, "head"));
 	if (!(targetNode instanceof HTMLElement)) {
 		throw new Error("target not found");
@@ -134,7 +143,7 @@ function appendToDocument() {
 
 	targetNode.appendChild(this[referenceSymbol]);
 
-	getGlobalFunction("fetch")(this.getOption(ATTRIBUTE_SRC), {
+	getGlobalFunction("fetch")(url.toString(), {
 		method: "GET", // *GET, POST, PUT, DELETE, etc.
 		mode: this.getOption("mode", "cors"), // no-cors, *cors, same-origin
 		cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
@@ -159,9 +168,48 @@ function appendToDocument() {
 				loaded: true,
 				error: e.toString(),
 			});
-
-			targetNode.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
 		});
 
 	return this;
 }
+
+/**
+ * @private
+ * @param {string} type
+ * @return {boolean}
+ */
+function isInertJSONType(type) {
+	if (type === undefined) {
+		return false;
+	}
+
+	return JSON_SCRIPT_TYPE_PATTERN.test(String(type).split(";")[0].trim());
+}
+
+/**
+ * @private
+ * @param {Document} document
+ * @return {URL}
+ */
+function getValidatedURL(document) {
+	const url = new URL(this.getOption(ATTRIBUTE_SRC), document.baseURI);
+
+	if (!["http:", "https:"].includes(url.protocol)) {
+		throw new Error("unsupported data resource protocol");
+	}
+
+	const allowedOriginsOption = this.getOption(KEY_ALLOWED_ORIGINS, ["self"]);
+	const allowedOrigins = Array.isArray(allowedOriginsOption)
+		? allowedOriginsOption
+		: [allowedOriginsOption];
+	const documentOrigin = new URL(document.baseURI).origin;
+	const allowed = allowedOrigins.map((origin) =>
+		origin === "self" ? documentOrigin : new URL(origin, document.baseURI).origin,
+	);
+
+	if (!allowed.includes(url.origin)) {
+		throw new Error("data resource origin not allowed");
+	}
+
+	return url;
+}

package/test/cases/dom/resource/data.mjs

@@ -63,7 +63,7 @@ describe('Data', function () {
         it('setEventTypes()', function (done) {
 
             const data = new Data({
-                src: new DataUrl('', 'text/javascript').toString()
+                src: '/data.json'
             });
 
             data.connect().available().then(() => {
@@ -71,12 +71,77 @@ describe('Data', function () {
             }).catch(e => done(e));
 
         })
+
+        it('rejects executable script types', function () {
+
+            const data = new Data({
+                src: new DataUrl('console.log(1);', 'text/javascript').toString(),
+                type: 'text/javascript'
+            });
+
+            expect(() => data.connect()).to.throw('unsupported data resource type');
+            expect(document.querySelector('script')).not.to.exist;
+
+        })
+
+        it('rejects remote origins by default', function () {
+
+            const data = new Data({
+                src: 'https://cdn.example/data.json'
+            });
+
+            expect(() => data.connect()).to.throw('data resource origin not allowed');
+            expect(document.querySelector('script')).not.to.exist;
+
+        })
+
+        it('allows configured remote origins', function (done) {
+
+            const data = new Data({
+                src: 'https://cdn.example/data.json',
+                allowedOrigins: ['https://cdn.example']
+            });
+
+            data.connect().available().then(() => {
+                expect(data.isConnected()).to.be.true;
+
+                done();
+            }).catch(e => done(e));
+
+        })
+
+        it('does not expose fetch errors in DOM attributes', function (done) {
+
+            globalThis['fetch'] = function () {
+                return Promise.reject(new Error('token=secret'));
+            };
+
+            const data = new Data({
+                src: '/data.json',
+                id: 'data-error'
+            });
+
+            data.connect();
+
+            setTimeout(() => {
+                try {
+                    const script = document.getElementById('data-error');
+
+                    expect(script.hasAttribute('data-monster-error')).to.be.false;
+
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            }, 0);
+
+        })
     });
 
     describe('External Data', () => {
 
         let id = new ID('data').toString();
-        let server, data, url = 'https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.2.2/layzr.min.js';
+        let server, data, url = '/layzr.json';
 
         beforeEach(() => {
 
@@ -126,4 +191,4 @@ describe('Data', function () {
     });
 
 
-});
+});

package/test/cases/dom/resourcemanager.mjs

@@ -104,7 +104,7 @@ describe('ResourceManager', function () {
 
         describe('check availability example.json', function () {
             it('add data and check content', function (done) {
-                manager.addData('https://example.com/example.json').connect().available().then(r => {
+                manager.addData('/example.json').connect().available().then(r => {
                     expect(document.querySelector('html').outerHTML).contains('>{"a":"test"}</script></head>');
                     done();
                 }).catch(e => done(e));
@@ -115,4 +115,4 @@ describe('ResourceManager', function () {
     });
 
 
-});
+});