@burger-editor/frozen-patty 4.0.0-alpha.3 → 4.0.0-alpha.5

package/dist/set-value.js

@@ -1,5 +1,6 @@
-import { fieldNameParser } from './field-name-parser.js';
-import { kebabCase } from './utils.js';
+import { kebabCase } from '@burger-editor/utils';
+import { parseFields } from './parse-fields.js';
+import { propInElement, replaceNode, sanitizeAttributeValue, sanitizeHtml, } from './utils.js';
 /**
  * Set value to an element
  *
@@ -11,58 +12,67 @@ import { kebabCase } from './utils.js';
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export function setValue(el, name, datum, attr = 'field', filter) {
+export function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     const rawValue = el.getAttribute(`data-${attr}`);
-    const fieldList = rawValue?.split(/\s*,\s*/) ?? [];
-    for (const field of fieldList) {
-        const { fieldName, propName } = fieldNameParser(field);
-        if (name !== fieldName) {
-            continue;
-        }
-        if (filter) {
-            datum = filter(datum);
-        }
-        // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
-        if (propName) {
-            if (/^style\([a-z-]+\)$/i.test(propName)) {
-                const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                let cssValue;
-                switch (cssPropertyName) {
-                    case 'background-image': {
-                        //
-                        // NGパターン
-                        // $changeDom.css(cssPropertyName, 'url("' + value + '")');
-                        //
-                        // cssメソッドを経由すると styleAPIを使用するので URLがホストを含めた絶対パスになる
-                        // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
-                        // 単純な文字列を流し込む（setAttributeを利用）
-                        // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        const url = encodeURI(`${datum}`);
-                        cssValue = `url(${url})`;
-                        break;
-                    }
-                    //
-                    // TODO: 他にもvalueに単位が必要なケースなどに対応したい
-                    //
-                    default: {
-                        cssValue = `${datum}`;
-                    }
-                }
-                el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-            }
-            else if (el instanceof HTMLElement) {
-                // HTMLElement
-                set(el, attr, propName, datum);
+    const fields = parseFields(rawValue ?? '');
+    const field = fields.find((field) => field.fieldName === name);
+    if (!field) {
+        return;
+    }
+    const { propName } = field;
+    if (filter) {
+        datum = filter(datum);
+    }
+    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+    if (!propName) {
+        setContent(el, datum, undefined, xssSanitize);
+        return;
+    }
+    if (propName === 'style' && el instanceof HTMLElement) {
+        el.style.cssText = `${datum}`;
+        return;
+    }
+    if (/^style\([a-z-]+\)$/i.test(propName)) {
+        const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        let cssValue;
+        switch (cssPropertyName) {
+            case 'background-image': {
+                // Using CSS method would create absolute URLs with host
+                // This would prevent migration from demo to production server
+                // Using simple string insertion (setAttribute) instead
+                // URL may not contain multibyte or whitespace characters, but escape anyway
+                const url = encodeURI(`${datum}`);
+                cssValue = `url(${url})`;
+                break;
             }
-            else {
-                // SVGElement or more
-                el.setAttribute(propName, `${datum}`);
+            //
+            // TODO: Handle other cases where values need units
+            //
+            default: {
+                cssValue = `${datum}`;
             }
-            return;
         }
-        setContent(el, datum);
+        el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
+        return;
+    }
+    if (el instanceof HTMLElement) {
+        // HTMLElement
+        set(el, attr, propName, datum, xssSanitize);
+        return;
     }
+    // SVGElement or more
+    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    // Check attribute value if XSS protection is enabled
+    if (xssSanitize) {
+        const safeValue = sanitizeAttributeValue(propName, `${datum}`);
+        if (safeValue !== null) {
+            el.setAttribute(propName, safeValue);
+        }
+        return;
+    }
+    el.setAttribute(propName, `${datum}`);
 }
 /**
  *
@@ -70,41 +80,48 @@ export function setValue(el, name, datum, attr = 'field', filter) {
  * @param prefix
  * @param name
  * @param datum
+ * @param xssSanitize
  */
-function set(el, prefix, name, datum) {
+function set(el, prefix, name, datum, xssSanitize = true) {
     if (datum == null) {
         el.removeAttribute(name);
         return;
     }
     switch (name) {
         case 'text': {
-            setContent(el, datum, false);
+            setContent(el, datum, false, xssSanitize);
             return;
         }
         case 'html': {
-            setContent(el, datum, true);
+            setContent(el, datum, true, xssSanitize);
             return;
         }
         case 'node': {
             if (typeof datum !== 'string') {
                 return;
             }
-            const nodeName = el.localName ?? el.nodeName.toLowerCase();
-            if (nodeName === datum.toLowerCase()) {
-                return;
-            }
-            const node = (el.ownerDocument ?? document).createElement(`${datum}`);
-            for (const child of el.childNodes) {
-                node.append(child.cloneNode(true));
-            }
-            for (const { name, value } of el.attributes) {
-                node.setAttribute(name, value);
-            }
-            el.replaceWith(node);
+            replaceNode(el, datum, prefix, xssSanitize);
+            return;
+        }
+    }
+    // If XSS protection is enabled
+    if (xssSanitize) {
+        // Don't set event handler attributes (starting with 'on')
+        if (name.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const beforeSanitize = datum;
+        datum = sanitizeAttributeValue(name, datum);
+        // If sanitization results in null value (except when original value was null), don't change the value
+        if (datum === null && beforeSanitize !== null) {
             return;
         }
     }
-    if (!name.startsWith('data-') && !(name in el)) {
+    if (datum == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    if (!name.startsWith('data-') && !propInElement(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase(name)}`;
         if (el.hasAttribute(dataAttr)) {
             el.setAttribute(dataAttr, `${datum}`);
@@ -676,8 +693,9 @@ function set(el, prefix, name, datum) {
  * @param el
  * @param datum
  * @param asHtml
+ * @param xssSanitize
  */
-export function setContent(el, datum, asHtml = true) {
+export function setContent(el, datum, asHtml = true, xssSanitize = true) {
     if (el instanceof HTMLInputElement ||
         el instanceof HTMLSelectElement ||
         el instanceof HTMLTextAreaElement ||
@@ -695,9 +713,18 @@ export function setContent(el, datum, asHtml = true) {
         return;
     }
     if (asHtml) {
-        el.innerHTML = datum == null ? '' : `${datum}`;
+        // Sanitize HTML if XSS protection is enabled
+        const htmlStr = datum == null ? '' : `${datum}`;
+        if (xssSanitize && typeof htmlStr === 'string') {
+            // sanitizeHtml will now replace dangerous elements instead of removing them
+            el.innerHTML = sanitizeHtml(htmlStr);
+        }
+        else {
+            el.innerHTML = htmlStr;
+        }
         return;
     }
+    // No need to sanitize textContent (automatically escaped)
     el.textContent = datum == null ? '' : `${datum}`;
 }
 /**

package/dist/stringify-fields.d.ts

@@ -0,0 +1,14 @@
+import type { FieldDefinition } from './types.js';
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+export declare function stringifyFields(fields: readonly FieldDefinition[]): string;
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+export declare function stringifyField(fieldName: string, propName?: string): string;

package/dist/stringify-fields.js

@@ -0,0 +1,26 @@
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+export function stringifyFields(fields) {
+    return fields
+        .map((field) => stringifyField(field.fieldName, field.propName))
+        .join(', ');
+}
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+export function stringifyField(fieldName, propName) {
+    if (!propName) {
+        return fieldName;
+    }
+    // Use shorthand notation when fieldName and propName are the same
+    if (fieldName === propName) {
+        return `:${propName}`;
+    }
+    return `${fieldName}:${propName}`;
+}

package/dist/types.d.ts

@@ -1,6 +1,13 @@
 export interface FrozenPattyData {
     [filed: string]: PrimitiveData;
 }
+export interface FrozenPattyFlattenData {
+    [field: string]: PrimitiveDatum;
+}
+export interface FieldDefinition {
+    fieldName: string;
+    propName?: string;
+}
 export type PrimitiveDatum = string | number | boolean | null | undefined;
 export type PrimitiveData = PrimitiveDatum | PrimitiveDatum[];
 export type Filter = <T>(value: T) => T;

package/dist/utils.d.ts

@@ -1,4 +1,8 @@
-import type { FrozenPattyData, PrimitiveDatum } from './types.js';
+import type { FieldDefinition, FrozenPattyData, FrozenPattyFlattenData, PrimitiveDatum } from './types.js';
+/**
+ * List of dangerous HTML elements to block for XSS protection
+ */
+export declare const DANGEROUS_ELEMENTS: string[];
 /**
  *
  * @param kvs
@@ -8,11 +12,74 @@ export declare function arrayToHash(kvs: [keyof FrozenPattyData, PrimitiveDatum,
 };
 /**
  *
- * @param str
+ * @param el
+ * @param nodeName
+ * @param attr
+ * @param xssSanitize
+ */
+export declare function replaceNode(el: Element, nodeName: string, attr: string, xssSanitize?: boolean): Element;
+/**
+ * Removes dangerous script elements from HTML string
+ * @param html HTML string
+ * @returns Sanitized HTML
+ */
+export declare function sanitizeHtml(html: string): string;
+/**
+ * Sanitizes attribute value
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns Safe attribute value, or null if dangerous
+ */
+export declare function sanitizeAttributeValue<T extends PrimitiveDatum>(name: string, value: T): T | null;
+/**
+ *
+ * @param data
+ * @param definedFields
+ */
+export declare function maxLengthOf(data: FrozenPattyData, definedFields: string[]): number;
+/**
+ *
+ * @param el
+ * @param attr
+ */
+export declare function definedFields(el: Element, attr: string): string[];
+/**
+ *
+ * @param el
+ * @param attr
+ */
+export declare function getFields(el: Element, attr: string): readonly FieldDefinition[];
+/**
+ *
+ * @param el
+ * @param attr
+ * @param dataKeyName
+ */
+export declare function hasField(el: Element, attr: string, dataKeyName: string): boolean;
+/**
+ *
+ * @param fields
+ * @param oldPropName
+ * @param newPropName
+ */
+export declare function replaceProp(fields: readonly FieldDefinition[], oldPropName: string, newPropName: string): FieldDefinition[];
+/**
+ *
+ * @param fields
+ * @param propName
+ */
+export declare function removeProp(fields: readonly FieldDefinition[], propName: string): FieldDefinition[];
+/**
+ * - 値が配列の場合は、index に対応する値を返す。
+ * - 値が配列でない場合は、そのまま返す。
+ * - ⚠️ 値が配列で、index に対応する値が undefined の場合は、配列の最初の値を返す。
+ * @param data
+ * @param index
  */
-export declare function kebabCase(str: string): string;
+export declare function flattenData(data: FrozenPattyData, index: number): FrozenPattyFlattenData;
 /**
  *
- * @param str
+ * @param el
+ * @param name
  */
-export declare function camelCase(str: string): string;
+export declare function propInElement(el: Element, name: string): boolean;

package/dist/utils.js

@@ -1,3 +1,18 @@
+import { parseFields } from './parse-fields.js';
+/**
+ * List of dangerous HTML elements to block for XSS protection
+ */
+export const DANGEROUS_ELEMENTS = [
+    'script',
+    'style',
+    'template',
+    'object',
+    'embed',
+    'iframe',
+    'frame',
+    'frameset',
+    'applet',
+];
 /**
  *
  * @param kvs
@@ -23,15 +38,240 @@ export function arrayToHash(kvs) {
 }
 /**
  *
- * @param str
+ * @param el
+ * @param nodeName
+ * @param attr
+ * @param xssSanitize
+ */
+export function replaceNode(el, nodeName, attr, xssSanitize = true) {
+    nodeName = nodeName.toLowerCase();
+    const currentName = el.localName ?? el.nodeName.toLowerCase();
+    if (currentName === nodeName) {
+        return el;
+    }
+    // Check element name if XSS protection is enabled
+    if (xssSanitize && // Disallow dangerous elements
+        DANGEROUS_ELEMENTS.includes(nodeName)) {
+        return el;
+    }
+    const node = (el.ownerDocument ?? document).createElement(nodeName);
+    for (const child of el.childNodes) {
+        node.append(child.cloneNode(true));
+    }
+    const fields = getFields(el, attr);
+    const attrs = new Set(fields.map((field) => field.propName));
+    for (const { name, value } of el.attributes) {
+        if (attrs.has(name)) {
+            continue;
+        }
+        // Check attribute value if XSS protection is enabled
+        if (xssSanitize) {
+            const sanitizedValue = sanitizeAttributeValue(name, value);
+            if (sanitizedValue !== null) {
+                node.setAttribute(name, sanitizedValue);
+            }
+            continue;
+        }
+        node.setAttribute(name, value);
+    }
+    el.replaceWith(node);
+    return node;
+}
+/**
+ * Removes dangerous script elements from HTML string
+ * @param html HTML string
+ * @returns Sanitized HTML
+ */
+export function sanitizeHtml(html) {
+    if (typeof html !== 'string') {
+        return '';
+    }
+    // Simple approach to handle script tags content
+    // First remove script tags but keep their content
+    let sanitized = html;
+    // For each dangerous element, replace tag but keep content using regex
+    // Example: <script>alert("XSS")</script> -> alert("XSS")
+    for (const tagName of DANGEROUS_ELEMENTS) {
+        const regex = new RegExp(`<${tagName}[^>]*>(.*?)<\\/${tagName}>`, 'gis');
+        sanitized = sanitized.replace(regex, '$1');
+    }
+    // Parse HTML safely using DOM parser for remaining sanitization
+    const doc = new DOMParser().parseFromString(sanitized, 'text/html');
+    const body = doc.body;
+    // Remove event handler attributes from all elements
+    sanitizeElementAndChildren(body);
+    return body.innerHTML;
+}
+/**
+ * Sanitizes an element and all its child elements
+ * @param element Target element
+ */
+function sanitizeElementAndChildren(element) {
+    // Remove dangerous attributes from current element
+    sanitizeAttributes(element);
+    // Process child elements recursively
+    const children = element.children;
+    for (const child of children) {
+        sanitizeElementAndChildren(child);
+    }
+}
+/**
+ * Sanitizes attribute value
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns Safe attribute value, or null if dangerous
+ */
+export function sanitizeAttributeValue(name, value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    name = name.toLowerCase();
+    // Disallow event handler attributes
+    if (name.startsWith('on')) {
+        return null;
+    }
+    // Check for dangerous protocol in link attributes
+    if (name === 'href' ||
+        name === 'src' ||
+        name === 'action' ||
+        name === 'formaction' ||
+        name === 'xlink:href') {
+        const trimmedValue = value.trim().toLowerCase();
+        if (trimmedValue.startsWith('javascript:') ||
+            trimmedValue.startsWith('data:') ||
+            trimmedValue.startsWith('vbscript:')) {
+            return null;
+        }
+    }
+    // Other dangerous attributes
+    if (['manifest'].includes(name)) {
+        return null;
+    }
+    return value;
+}
+/**
+ * Removes dangerous attributes from an element
+ * @param element Target element
+ */
+function sanitizeAttributes(element) {
+    // Collect list of dangerous attributes
+    const dangerousAttrs = [...element.attributes]
+        .filter((attr) => sanitizeAttributeValue(attr.name, attr.value) === null)
+        .map((attr) => attr.name);
+    // Remove dangerous attributes
+    for (const attrName of dangerousAttrs) {
+        element.removeAttribute(attrName);
+    }
+}
+/**
+ *
+ * @param data
+ * @param definedFields
+ */
+export function maxLengthOf(data, definedFields) {
+    let maxLength = 0;
+    for (const key in data) {
+        if (definedFields.includes(key) && Array.isArray(data[key])) {
+            maxLength = Math.max(maxLength, data[key].length);
+        }
+    }
+    return maxLength;
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+export function definedFields(el, attr) {
+    const fieldDefinitions = getFields(el, attr);
+    return fieldDefinitions.map((field) => field.fieldName);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+export function getFields(el, attr) {
+    const fields = el.getAttribute(`data-${attr}`);
+    if (!fields) {
+        return [];
+    }
+    return parseFields(fields);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ * @param dataKeyName
+ */
+export function hasField(el, attr, dataKeyName) {
+    const fieldDefinitions = getFields(el, attr);
+    return fieldDefinitions.some((field) => field.fieldName === dataKeyName);
+}
+/**
+ *
+ * @param fields
+ * @param oldPropName
+ * @param newPropName
  */
-export function kebabCase(str) {
-    return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+export function replaceProp(fields, oldPropName, newPropName) {
+    return fields.map((field) => {
+        if (field.propName === oldPropName) {
+            return {
+                ...field,
+                propName: newPropName,
+            };
+        }
+        return field;
+    });
 }
 /**
  *
- * @param str
+ * @param fields
+ * @param propName
  */
-export function camelCase(str) {
-    return str.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+export function removeProp(fields, propName) {
+    return fields.filter((field) => field.propName !== propName);
+}
+/**
+ * - 値が配列の場合は、index に対応する値を返す。
+ * - 値が配列でない場合は、そのまま返す。
+ * - ⚠️ 値が配列で、index に対応する値が undefined の場合は、配列の最初の値を返す。
+ * @param data
+ * @param index
+ */
+export function flattenData(data, index) {
+    const result = {};
+    for (const key in data) {
+        result[key] = Array.isArray(data[key])
+            ? data[key][index] === undefined
+                ? data[key][0]
+                : data[key][index]
+            : data[key];
+    }
+    return result;
+}
+/**
+ * 特定の要素で、`propName in element`で判定できない属性名
+ */
+const specificProp = {
+    /*
+     * JSDOMの未実装対策
+     * @see https://github.com/jsdom/jsdom/blob/main/lib/jsdom/living/nodes/HTMLSourceElement.webidl
+     * Living Standardでは実装済み
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#htmlsourceelement
+     */
+    source: ['width', 'height'],
+};
+/**
+ *
+ * @param el
+ * @param name
+ */
+export function propInElement(el, name) {
+    const has = name in el;
+    if (has) {
+        return true;
+    }
+    return specificProp[el.localName]?.includes(name) ?? false;
 }

package/package.json

@@ -1,13 +1,12 @@
 {
 	"name": "@burger-editor/frozen-patty",
-	"version": "4.0.0-alpha.3",
-	"description": "Pure HTML to JSON converter that not use template engine.",
+	"version": "4.0.0-alpha.5",
+	"description": "Pure HTML to JSON converter that does not use a template engine.",
 	"author": "D-ZERO",
-	"license": "MIT",
+	"license": "(MIT OR Apache-2.0)",
 	"repository": {
 		"url": "https://github.com/d-zero-dev/BurgerEditor.git"
 	},
-	"private": false,
 	"publishConfig": {
 		"access": "public"
 	},
@@ -41,5 +40,8 @@
 		"dev": "tsc --watch --project tsconfig.build.json",
 		"clean": "tsc --build --clean"
 	},
-	"gitHead": "23c89d351064c391a45ba6a95ab7602f2a644ff0"
+	"dependencies": {
+		"@burger-editor/utils": "4.0.0-alpha.5"
+	},
+	"gitHead": "34e5079df2656e5eee3080a55f9c336b167c1e86"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017-2024 D-ZERO Co., Ltd.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.