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

package/dist/set-value.js

@@ -1,5 +1,5 @@
-import { fieldNameParser } from './field-name-parser.js';
-import { kebabCase } from './utils.js';
+import { parseFields } from './parse-fields.js';
+import { kebabCase, propInElement, replaceNode, sanitizeAttributeValue, sanitizeHtml, } from './utils.js';
 /**
  * Set value to an element
  *
@@ -11,58 +11,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 +79,54 @@ 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);
+            // Sanitize HTML if XSS protection is enabled
+            if (xssSanitize && typeof datum === 'string') {
+                setContent(el, sanitizeHtml(datum), true, xssSanitize);
+            }
+            else {
+                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 (datum == null) {
+        el.removeAttribute(name);
+        return;
     }
-    if (!name.startsWith('data-') && !(name in el)) {
+    if (!name.startsWith('data-') && !propInElement(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase(name)}`;
         if (el.hasAttribute(dataAttr)) {
             el.setAttribute(dataAttr, `${datum}`);
@@ -676,8 +698,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 +718,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/set.d.ts

@@ -5,5 +5,6 @@ import type { Filter, FrozenPattyData } from './types.js';
  * @param data
  * @param attr
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export default function (el: Element, data: FrozenPattyData, attr: string, filter?: Filter): Element;
+export default function (el: Element, data: FrozenPattyData, attr: string, filter?: Filter, xssSanitize?: boolean): Element;

package/dist/set.js

@@ -6,8 +6,9 @@ import { kebabCase } from './utils.js';
  * @param data
  * @param attr
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export default function (el, data, attr, filter) {
+export default function (el, data, attr, filter, xssSanitize = true) {
     el = el.cloneNode(true);
     for (const dataKeyName in data) {
         if (dataKeyName in data) {
@@ -35,14 +36,14 @@ export default function (el, data, attr, filter) {
                 let deleteNodeList = [];
                 for (const [i, child] of [...newChildren].entries()) {
                     if (datum[i] == null) {
-                        setValue(child, dataKeyName, '', attr, filter);
+                        setValue(child, dataKeyName, '', attr, filter, xssSanitize);
                         const oldChild = oldChildList[i];
                         if (oldChild) {
                             deleteNodeList.push(oldChild);
                         }
                     }
                     else {
-                        setValue(child, dataKeyName, datum[i], attr, filter);
+                        setValue(child, dataKeyName, datum[i], attr, filter, xssSanitize);
                         deleteNodeList = [];
                     }
                 }
@@ -51,7 +52,7 @@ export default function (el, data, attr, filter) {
             }
             else {
                 for (const [, targetEl] of [...targetList].entries()) {
-                    setValue(targetEl, dataKeyName, datum, attr, filter);
+                    setValue(targetEl, dataKeyName, datum, attr, filter, xssSanitize);
                 }
             }
         }

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
@@ -16,3 +20,76 @@ export declare function kebabCase(str: string): string;
  * @param str
  */
 export declare function camelCase(str: string): string;
+/**
+ *
+ * @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 flattenData(data: FrozenPattyData, index: number): FrozenPattyFlattenData;
+/**
+ *
+ * @param el
+ * @param name
+ */
+export declare function propInElement(el: Element, name: string): boolean;