vadivam-angular 0.0.42 → 0.0.44

package/README.md

@@ -8,7 +8,7 @@ Tree-shakeable 24px outline SVG icon directives for Angular.
 [![downloads](https://img.shields.io/npm/dw/vadivam-angular?style=flat-square&color=666)](https://www.npmjs.com/package/vadivam-angular)
 [![license](https://img.shields.io/npm/l/vadivam-angular?style=flat-square&color=111)](https://github.com/praveenjuge/vadivam/blob/main/LICENSE)
 
-![All Vadivam icons](https://raw.githubusercontent.com/praveenjuge/vadivam/main/apps/docs/public/preview.png?v=0.0.42)
+![All Vadivam icons](https://raw.githubusercontent.com/praveenjuge/vadivam/main/apps/docs/public/preview.png?v=0.0.44)
 
 ```sh
 npm install vadivam-angular

package/dist/fesm2022/vadivam-angular.mjs

@@ -1,6 +1,155 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, inject, ElementRef, Renderer2, effect, Directive } from '@angular/core';
 
+const SAFE_ICON_TAGS = new Set(["circle", "ellipse", "line", "path", "polygon", "polyline", "rect"]);
+const GEOMETRY_ATTRIBUTES = {
+    circle: new Set(["cx", "cy", "r"]),
+    ellipse: new Set(["cx", "cy", "rx", "ry"]),
+    line: new Set(["x1", "y1", "x2", "y2"]),
+    path: new Set(["d", "pathLength"]),
+    polygon: new Set(["points", "pathLength"]),
+    polyline: new Set(["points", "pathLength"]),
+    rect: new Set(["x", "y", "width", "height", "rx", "ry", "pathLength"]),
+};
+const PRESENTATION_ATTRIBUTES = new Set([
+    "class", "className", "id", "role", "key", "opacity", "transform",
+    "clip-rule", "clipRule", "fill", "fill-opacity", "fillOpacity", "fill-rule", "fillRule",
+    "shape-rendering", "shapeRendering", "stroke", "stroke-dasharray", "strokeDasharray",
+    "stroke-dashoffset", "strokeDashoffset", "stroke-linecap", "strokeLinecap",
+    "stroke-linejoin", "strokeLinejoin", "stroke-miterlimit", "strokeMiterlimit",
+    "stroke-opacity", "strokeOpacity", "stroke-width", "strokeWidth", "vector-effect", "vectorEffect",
+]);
+const SAFE_ATTRIBUTE_NAME = /^[A-Za-z_][A-Za-z0-9_.-]*$/;
+const SAFE_DATA_ATTRIBUTE = /^data-[A-Za-z0-9_.-]+$/;
+const SAFE_ARIA_ATTRIBUTE = /^aria-[A-Za-z0-9_.-]+$/;
+const SAFE_STYLE_NAME = /^(?:--[A-Za-z0-9_-]+|[A-Za-z_][A-Za-z0-9_-]*)$/;
+const SAFE_EVENT_NAME = /^on(?::[A-Za-z][A-Za-z0-9_.-]*|[A-Za-z][A-Za-z0-9_.-]*)$/;
+const UNSAFE_ROOT_ATTRIBUTE = /^(?:dangerouslySetInnerHTML|innerHTML|innerText|textContent|children|href|xlinkHref|src|srcdoc)$/i;
+const URL_VALUE_ATTRIBUTE = /^(?:fill|stroke|filter|clipPath|clip-path|mask|marker|markerStart|marker-start|markerMid|marker-mid|markerEnd|marker-end|cursor)$/;
+const SCRIPT_SCHEME = /(?:java|vb)script\s*:/i;
+const URL_FUNCTION = /url\s*\(/i;
+const COMPLETE_URL_FUNCTION = /url\s*\(\s*(["']?)([^"')\s]+)\1\s*\)/gi;
+const EXTERNAL_SCHEME = /(?:https?|data|blob|file|ftp)\s*:/i;
+const CSS_ESCAPE = /\\/;
+const CSS_RESOURCE_FUNCTION = /(?:image-set|cross-fade|image|src)\s*\(/i;
+const CSS_IMPORT = /@import\b/i;
+const MAX_ICON_DEPTH = 32;
+const MAX_ICON_NODES = 1024;
+function isRecord(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isSafeValue(name, value) {
+    if (value === undefined || value === null || typeof value === "function")
+        return false;
+    if (typeof value === "object")
+        return false;
+    if (typeof value === "string" && SCRIPT_SCHEME.test(value))
+        return false;
+    if ((name === "fill" || name === "stroke") && typeof value === "string" && hasExternalUrl(value))
+        return false;
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function hasExternalUrl(value) {
+    if (!URL_FUNCTION.test(value))
+        return false;
+    COMPLETE_URL_FUNCTION.lastIndex = 0;
+    let matched = false;
+    let match;
+    while ((match = COMPLETE_URL_FUNCTION.exec(value)) !== null) {
+        matched = true;
+        if (!match[2].startsWith("#"))
+            return true;
+    }
+    return !matched;
+}
+function hasUnsafeStyleValue(value) {
+    return SCRIPT_SCHEME.test(value) || EXTERNAL_SCHEME.test(value) || CSS_ESCAPE.test(value) ||
+        CSS_RESOURCE_FUNCTION.test(value) || CSS_IMPORT.test(value) || hasExternalUrl(value);
+}
+function isSafeIconAttribute(tag, name) {
+    return SAFE_ATTRIBUTE_NAME.test(name) && (GEOMETRY_ATTRIBUTES[tag]?.has(name) ||
+        PRESENTATION_ATTRIBUTES.has(name) ||
+        SAFE_DATA_ATTRIBUTE.test(name) ||
+        SAFE_ARIA_ATTRIBUTE.test(name));
+}
+function sanitizeStyle(value) {
+    if (typeof value === "string")
+        return hasUnsafeStyleValue(value) ? undefined : value;
+    if (Array.isArray(value)) {
+        const safeValues = value.map(sanitizeStyle).filter((entry) => entry !== undefined);
+        return safeValues.length ? safeValues : undefined;
+    }
+    if (!isRecord(value))
+        return undefined;
+    const safeStyle = {};
+    for (const [name, entry] of Object.entries(value)) {
+        if (!SAFE_STYLE_NAME.test(name) || (typeof entry !== "string" && typeof entry !== "number"))
+            continue;
+        if (typeof entry === "string" && hasUnsafeStyleValue(entry))
+            continue;
+        safeStyle[name] = entry;
+    }
+    return Object.keys(safeStyle).length ? safeStyle : undefined;
+}
+function safeRootValue(name, value) {
+    if (name === "style")
+        return sanitizeStyle(value);
+    if (value === undefined || value === null || typeof value === "object" || typeof value === "function")
+        return undefined;
+    if (typeof value === "string" && URL_VALUE_ATTRIBUTE.test(name) && (SCRIPT_SCHEME.test(value) || hasExternalUrl(value)))
+        return undefined;
+    return value;
+}
+function sanitizePaint(value, fallback = "currentColor") {
+    const safeValue = safeRootValue("stroke", value);
+    return typeof safeValue === "string" || typeof safeValue === "number" ? safeValue : fallback;
+}
+function sanitizeNodes(iconNode, activeArrays, state, depth) {
+    if (!Array.isArray(iconNode) || depth > MAX_ICON_DEPTH || activeArrays.has(iconNode))
+        return [];
+    activeArrays.add(iconNode);
+    const safeNodes = [];
+    for (const node of iconNode) {
+        state.count += 1;
+        if (state.count > MAX_ICON_NODES)
+            break;
+        if (!Array.isArray(node) || typeof node[0] !== "string" || !SAFE_ICON_TAGS.has(node[0]) || !isRecord(node[1]))
+            continue;
+        const [tag, attrs, children] = node;
+        const safeAttrs = {};
+        for (const [name, value] of Object.entries(attrs)) {
+            if (isSafeIconAttribute(tag, name) && isSafeValue(name, value))
+                safeAttrs[name] = value;
+        }
+        safeNodes.push([tag, safeAttrs]);
+    }
+    activeArrays.delete(iconNode);
+    return safeNodes;
+}
+function sanitizeIconNode(iconNode) {
+    return sanitizeNodes(iconNode, new WeakSet(), { count: 0 }, 0);
+}
+function sanitizeRootAttributes(attrs, allowEventFunctions = false) {
+    if (!isRecord(attrs))
+        return {};
+    const safeAttrs = {};
+    for (const name of Object.keys(attrs)) {
+        const value = attrs[name];
+        if (/^on/i.test(name)) {
+            if (allowEventFunctions && typeof value === "function" && SAFE_EVENT_NAME.test(name)) {
+                Object.defineProperty(safeAttrs, name, { enumerable: true, get: () => typeof attrs[name] === "function" ? attrs[name] : undefined });
+            }
+            continue;
+        }
+        if (!SAFE_ATTRIBUTE_NAME.test(name) || UNSAFE_ROOT_ATTRIBUTE.test(name) || /^prop/i.test(name))
+            continue;
+        if (safeRootValue(name, value) === undefined)
+            continue;
+        Object.defineProperty(safeAttrs, name, { enumerable: true, get: () => safeRootValue(name, attrs[name]) });
+    }
+    return safeAttrs;
+}
+
 const VADIVAM_CONFIG = new InjectionToken("vadivam-icons", { factory: () => ({}) });
 function provideVadivamConfig(config) { return { provide: VADIVAM_CONFIG, useValue: Object.freeze({ ...config }) }; }
 function createVadivamIcon(name, iconNode) { return Object.freeze({ name, iconNode }); }
@@ -43,7 +192,7 @@ class VadivamIconBase {
         this.generatedClasses.clear();
         this.decorative = false;
         const name = this.runtimeName ?? this.name() ?? this.defaultName;
-        const iconNode = this.runtimeIconNode ?? this.iconNode() ?? this.defaultIconNode;
+        const iconNode = sanitizeIconNode(this.runtimeIconNode ?? this.iconNode() ?? this.defaultIconNode);
         const size = this.size() ?? this.config.size ?? defaults.size;
         const stroke = this.strokeWidth() ?? this.config.strokeWidth ?? defaults.strokeWidth;
         const numericSize = Number(size);
@@ -51,7 +200,7 @@ class VadivamIconBase {
         const absoluteInput = this.absoluteStrokeWidth();
         const absolute = absoluteInput === "" || absoluteInput === true || absoluteInput === "true" || (absoluteInput == null && this.config.absoluteStrokeWidth === true);
         const calculated = absolute && Number.isFinite(numericSize) && numericSize !== 0 && Number.isFinite(numericStroke) ? numericStroke * 24 / numericSize : stroke;
-        const attrs = { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: this.color() ?? this.config.color ?? defaults.color, "stroke-width": calculated, "stroke-linecap": "round", "stroke-linejoin": "round" };
+        const attrs = { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: sanitizePaint(this.color() ?? this.config.color), "stroke-width": calculated, "stroke-linecap": "round", "stroke-linejoin": "round" };
         for (const [key, value] of Object.entries(attrs))
             this.renderer.setAttribute(this.element, key, String(value));
         const classes = ["vadivam", name && `vadivam-${name}`, ...(this.config.class ?? "").split(/\s+/)].filter(Boolean);