@microsoft/fast-element 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/esm/dom-policy.js

@@ -0,0 +1,337 @@
+import { DOMAspect } from "./dom.js";
+import { isString } from "./interfaces.js";
+function safeURL(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        if (isString(value)) {
+            value = value.replace("javascript:", "");
+        }
+        sink(target, name, value, ...rest);
+    };
+}
+function block(tagName, aspect, aspectName, sink) {
+    throw new Error(`${aspectName} on ${tagName !== null && tagName !== void 0 ? tagName : "text"} is blocked by the current DOMPolicy.`);
+}
+const defaultDOMElementGuards = {
+    a: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    area: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    button: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    embed: {
+        [DOMAspect.attribute]: {
+            src: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+        },
+    },
+    form: {
+        [DOMAspect.attribute]: {
+            action: safeURL,
+        },
+        [DOMAspect.property]: {
+            action: safeURL,
+        },
+    },
+    frame: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+        },
+    },
+    iframe: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+            srcdoc: block,
+        },
+    },
+    input: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    link: {
+        [DOMAspect.attribute]: {
+            href: block,
+        },
+        [DOMAspect.property]: {
+            href: block,
+        },
+    },
+    object: {
+        [DOMAspect.attribute]: {
+            codebase: block,
+            data: block,
+        },
+        [DOMAspect.property]: {
+            codeBase: block,
+            data: block,
+        },
+    },
+    script: {
+        [DOMAspect.attribute]: {
+            src: block,
+            text: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+            text: block,
+            innerText: block,
+            textContent: block,
+        },
+    },
+    style: {
+        [DOMAspect.property]: {
+            innerText: block,
+            textContent: block,
+        },
+    },
+};
+const blockedEvents = {
+    onabort: block,
+    onauxclick: block,
+    onbeforeinput: block,
+    onbeforematch: block,
+    onblur: block,
+    oncancel: block,
+    oncanplay: block,
+    oncanplaythrough: block,
+    onchange: block,
+    onclick: block,
+    onclose: block,
+    oncontextlost: block,
+    oncontextmenu: block,
+    oncontextrestored: block,
+    oncopy: block,
+    oncuechange: block,
+    oncut: block,
+    ondblclick: block,
+    ondrag: block,
+    ondragend: block,
+    ondragenter: block,
+    ondragleave: block,
+    ondragover: block,
+    ondragstart: block,
+    ondrop: block,
+    ondurationchange: block,
+    onemptied: block,
+    onended: block,
+    onerror: block,
+    onfocus: block,
+    onformdata: block,
+    oninput: block,
+    oninvalid: block,
+    onkeydown: block,
+    onkeypress: block,
+    onkeyup: block,
+    onload: block,
+    onloadeddata: block,
+    onloadedmetadata: block,
+    onloadstart: block,
+    onmousedown: block,
+    onmouseenter: block,
+    onmouseleave: block,
+    onmousemove: block,
+    onmouseout: block,
+    onmouseover: block,
+    onmouseup: block,
+    onpaste: block,
+    onpause: block,
+    onplay: block,
+    onplaying: block,
+    onprogress: block,
+    onratechange: block,
+    onreset: block,
+    onresize: block,
+    onscroll: block,
+    onsecuritypolicyviolation: block,
+    onseeked: block,
+    onseeking: block,
+    onselect: block,
+    onslotchange: block,
+    onstalled: block,
+    onsubmit: block,
+    onsuspend: block,
+    ontimeupdate: block,
+    ontoggle: block,
+    onvolumechange: block,
+    onwaiting: block,
+    onwebkitanimationend: block,
+    onwebkitanimationiteration: block,
+    onwebkitanimationstart: block,
+    onwebkittransitionend: block,
+    onwheel: block,
+};
+const defaultDOMGuards = {
+    elements: defaultDOMElementGuards,
+    aspects: {
+        [DOMAspect.attribute]: Object.assign({}, blockedEvents),
+        [DOMAspect.property]: Object.assign({ innerHTML: block }, blockedEvents),
+        [DOMAspect.event]: Object.assign({}, blockedEvents),
+    },
+};
+function createDomSinkGuards(config, defaults) {
+    const result = {};
+    for (const name in defaults) {
+        const overrideValue = config[name];
+        const defaultValue = defaults[name];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[name] = defaultValue;
+                break;
+            default:
+                // override the default
+                result[name] = overrideValue;
+                break;
+        }
+    }
+    // add any new sinks that were not overrides
+    for (const name in config) {
+        if (!(name in result)) {
+            result[name] = config[name];
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMAspectGuards(config, defaults) {
+    const result = {};
+    for (const aspect in defaults) {
+        const overrideValue = config[aspect];
+        const defaultValue = defaults[aspect];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[aspect] = createDomSinkGuards(defaultValue, {});
+                break;
+            default:
+                // override the default
+                result[aspect] = createDomSinkGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // add any new aspect guards that were not overrides
+    for (const aspect in config) {
+        if (!(aspect in result)) {
+            result[aspect] = createDomSinkGuards(config[aspect], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createElementGuards(config, defaults) {
+    const result = {};
+    for (const tag in defaults) {
+        const overrideValue = config[tag];
+        const defaultValue = defaults[tag];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[tag] = createDOMAspectGuards(overrideValue, {});
+                break;
+            default:
+                // override the default aspects
+                result[tag] = createDOMAspectGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // Add any new element guards that were not overrides
+    for (const tag in config) {
+        if (!(tag in result)) {
+            result[tag] = createDOMAspectGuards(config[tag], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMGuards(config, defaults) {
+    return Object.freeze({
+        elements: config.elements
+            ? createElementGuards(config.elements, defaults.elements)
+            : defaults.elements,
+        aspects: config.aspects
+            ? createDOMAspectGuards(config.aspects, defaults.aspects)
+            : defaults.aspects,
+    });
+}
+function createTrustedType() {
+    const createHTML = html => html;
+    return globalThis.trustedTypes
+        ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+        : { createHTML };
+}
+function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
+    const sinkGuards = aspectGuards[aspect];
+    if (sinkGuards) {
+        const guard = sinkGuards[aspectName];
+        if (guard) {
+            return guard(tagName, aspect, aspectName, sink);
+        }
+    }
+}
+const DOMPolicy = Object.freeze({
+    /**
+     * Creates a new DOM Policy object.
+     * @param options The options to use in creating the policy.
+     * @returns The newly created DOMPolicy.
+     */
+    create(options = {}) {
+        var _a, _b;
+        const trustedType = (_a = options.trustedType) !== null && _a !== void 0 ? _a : createTrustedType();
+        const guards = createDOMGuards((_b = options.guards) !== null && _b !== void 0 ? _b : {}, defaultDOMGuards);
+        return Object.freeze({
+            createHTML(value) {
+                return trustedType.createHTML(value);
+            },
+            protect(tagName, aspect, aspectName, sink) {
+                var _a;
+                // Check for element-specific guards.
+                const key = (tagName !== null && tagName !== void 0 ? tagName : "").toLowerCase();
+                const elementGuards = guards.elements[key];
+                if (elementGuards) {
+                    const guard = tryGuard(elementGuards, tagName, aspect, aspectName, sink);
+                    if (guard) {
+                        return guard;
+                    }
+                }
+                // Check for guards applicable to all nodes.
+                return ((_a = tryGuard(guards.aspects, tagName, aspect, aspectName, sink)) !== null && _a !== void 0 ? _a : sink);
+            },
+        });
+    },
+});
+export { DOMPolicy };

package/dist/esm/dom.js

@@ -0,0 +1,117 @@
+import { Updates } from "./observation/update-queue.js";
+import "./interfaces.js";
+import { FAST } from "./platform.js";
+/**
+ * The type of HTML aspect to target.
+ * @public
+ */
+export const DOMAspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+    /**
+     * An attribute.
+     */
+    attribute: 1,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute: 2,
+    /**
+     * A property.
+     */
+    property: 3,
+    /**
+     * Content
+     */
+    content: 4,
+    /**
+     * A token list.
+     */
+    tokenList: 5,
+    /**
+     * An event.
+     */
+    event: 6,
+});
+const createHTML = html => html;
+const fastTrustedType = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+    : { createHTML };
+let defaultPolicy = Object.freeze({
+    createHTML(value) {
+        return fastTrustedType.createHTML(value);
+    },
+    protect(tagName, aspect, aspectName, sink) {
+        return sink;
+    },
+});
+const fastPolicy = defaultPolicy;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+export const DOM = Object.freeze({
+    /**
+     * @deprecated
+     * Use Updates.enqueue().
+     */
+    queueUpdate: Updates.enqueue,
+    /**
+     * @deprecated
+     * Use Updates.next()
+     */
+    nextUpdate: Updates.next,
+    /**
+     * @deprecated
+     * Use Updates.process()
+     */
+    processUpdates: Updates.process,
+    /**
+     * Gets the dom policy used by the templating system.
+     */
+    get policy() {
+        return defaultPolicy;
+    },
+    /**
+     * Sets the dom policy used by the templating system.
+     * @param policy - The policy to set.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setPolicy(value) {
+        if (defaultPolicy !== fastPolicy) {
+            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
+        }
+        defaultPolicy = value;
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./platform.js";
+export * from "./dom.js";
 // Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
@@ -10,7 +11,6 @@ export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
 export * from "./styles/host.js";
 // Templating
-export * from "./templating/dom.js";
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
@@ -23,6 +23,7 @@ export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
 export * from "./templating/node-observation.js";
+export * from "./templating/dangerous-html.js";
 // Components
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";

package/dist/esm/index.rollup.debug.js

@@ -1,3 +1,5 @@
-import "./polyfills.js";
 import "./debug.js";
+import { DOMPolicy } from "./dom-policy.js";
+import { DOM } from "./dom.js";
 export * from "./index.js";
+DOM.setPolicy(DOMPolicy.create());

package/dist/esm/index.rollup.js

@@ -1,2 +1,4 @@
-import "./polyfills.js";
+import { DOMPolicy } from "./dom-policy.js";
+import { DOM } from "./dom.js";
 export * from "./index.js";
+DOM.setPolicy(DOMPolicy.create());

package/dist/esm/observation/observable.js

@@ -1,4 +1,4 @@
-import { isFunction, isString, } from "../interfaces.js";
+import { isFunction, isString, noop, } from "../interfaces.js";
 import { createMetadataLocator, FAST } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
@@ -79,6 +79,10 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
+            /**
+             * Opts out of JSON stringification.
+             */
+            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;

package/dist/esm/platform.js

@@ -1,5 +1,5 @@
 import "./polyfills.js";
-// ensure FAST global - duplicated in polyfills.ts and debug.ts
+// ensure FAST global - duplicated debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,

package/dist/esm/polyfills.js

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 (function ensureGlobalThis() {
     if (typeof globalThis !== "undefined") {
         // We're running in a modern environment.
         return;
     }
+    // @ts-ignore
     if (typeof global !== "undefined") {
         // We're running in NodeJS
+        // @ts-ignore
         global.globalThis = global;
     }
     else if (typeof self !== "undefined") {
@@ -22,10 +25,3 @@
         result.globalThis = result;
     }
 })();
-// API-only Polyfill for trustedTypes
-if (!globalThis.trustedTypes) {
-    globalThis.trustedTypes = {
-        createPolicy: (n, r) => r,
-    };
-}
-export {};

package/dist/esm/templating/binding-signal.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { Binding } from "./html-directive.js";
 const subscribers = Object.create(null);
 export const Signal = Object.freeze({
@@ -41,6 +41,11 @@ class SignalObserver {
         this.dataBinding = dataBinding;
         this.subscriber = subscriber;
         this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
     bind(controller) {
         if (this.isNotBound) {
@@ -73,11 +78,12 @@ class SignalBinding extends Binding {
  * Creates a signal binding configuration with the supplied options.
  * @param expression - The binding to refresh when signaled.
  * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @param policy - The security policy to associate with th binding.
  * @returns A binding configuration.
  * @public
  */
-export function signal(expression, options) {
-    const binding = new SignalBinding(expression);
+export function signal(expression, options, policy) {
+    const binding = new SignalBinding(expression, policy);
     binding.options = options;
     return binding;
 }

package/dist/esm/templating/binding-two-way.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { Binding } from "./html-directive.js";
@@ -25,6 +25,11 @@ class TwoWayObserver {
         this.subscriber = subscriber;
         this.dataBinding = dataBinding;
         this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
     }
     bind(controller) {
@@ -83,11 +88,12 @@ class TwoWayBinding extends Binding {
  * Creates a default binding.
  * @param expression - The binding to refresh when changed.
  * @param optionsOrChangeEvent - The binding options or the name of the change event to use.
+ * @param policy - The security policy to associate with the binding.
  * @param isBindingVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding.
  * @public
  */
-export function twoWay(expression, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(expression)) {
+export function twoWay(expression, optionsOrChangeEvent, policy, isBindingVolatile = Observable.isVolatileBinding(expression)) {
     if (isString(optionsOrChangeEvent)) {
         optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
     }
@@ -97,7 +103,7 @@ export function twoWay(expression, optionsOrChangeEvent, isBindingVolatile = Obs
     else if (!optionsOrChangeEvent.fromView) {
         optionsOrChangeEvent.fromView = defaultOptions.fromView;
     }
-    const binding = new TwoWayBinding(expression, isBindingVolatile);
+    const binding = new TwoWayBinding(expression, policy, isBindingVolatile);
     binding.options = optionsOrChangeEvent;
     return binding;
 }