saasufy-components 10.5.3 → 10.5.5

package/README.md

@@ -73,6 +73,11 @@ In order to render HTML which was generated dynamically, you need to use triple
 
 Saasufy components support nested expressions but you should not inject untrusted/unsanitized input via a nested expression as it can make your application vulerable to XSS attacks.
 
+Escaping covers element content and quoted attribute values (a newline becomes `<br>`). Two contexts it cannot protect, so avoid them with values you do not control:
+
+- Unquoted attributes, as in `<div class={{value}}>`, which the value can add attributes to. Always quote: `<div class="{{value}}">`.
+- Attributes which are code, such as `onclick` or `style`, since the browser decodes entities before the handler runs. Put the value in a `data-` attribute and read it from your handler instead.
+
 When an expression fails to render (I.e. throws an error), it will remain unchanged in its original expression format within the component/template. If an expression is nested inside a child component, the parent will attempt to evaluate it first. If it fails, then it will remain as-is and the child may later also attempt to evaluate it as part of its own rendering (e.g. once the child provides the missing state).
 
 ### Styling
@@ -686,7 +691,7 @@ Used for displaying and editing a single field of a model instance in realtime.
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea`, `checkbox` or `file`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `model-input` to other elements on your page. It takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `model-input` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type. Note that `model-input` elements of the `file` type are treated as write-only unless the `consumers` attribute is present.
-- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. Markup in the template itself is preserved, which is how a consumer is given HTML; the `{{value}}` substituted into it is escaped. With no `provider-template`, the value is escaped before being written to a consumer's `innerHTML`.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
 - `error-consumers`: Sends error messages to other elements on your page instead of (or as well as) showing them next to the input. It takes the same list of selectors with optional attributes as `consumers`, in the format `element-selector:attribute-name`. This is useful when a message appearing beside the input would move the surrounding layout; the messages of a list of rows can be collected into a single area above the list, for example. Each input should be given a target of its own, since inputs which share one will overwrite each other's messages. The message is cleared (an empty string is sent) as soon as the input saves successfully. Can be used with or without `show-error-message`.
 - `error-provider-template`: A template string within which the `{{value}}` of an error message can be injected before passing it to the elements named by `error-consumers`. Serves the same purpose for errors as `provider-template` does for values. Note that an error message is escaped before the template is applied, so markup in the message itself is shown as text while markup in the template is not.
@@ -694,7 +699,7 @@ Used for displaying and editing a single field of a model instance in realtime.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `default-value`: A default value to show the user if the underlying model field's value is null or undefined. Note that setting a default value will not affect the underlying model's value.
 - `value`: Used to set the model's value.
-- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
+- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute. The `value` is evaluated as JavaScript, so only use this attribute where the `value` is written by you; do not turn it on for an input whose `value` is fed from a record or from another component.
 - `slice-to`: Optional attribute which can be set to a number to trim strings down to a maximum number of characters. This is useful when dealing with potentially very long field values. Extra care should be taken when using this attribute on a `model-input` element as it will cause values to be overwritten with shortened values if the user edits the input box. Note also that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
@@ -809,12 +814,12 @@ This component can be configured to provide its data to multiple components (con
 - `disable-instant-flush`: If specified, changes will only be saved once they have settled (E.g. after the element has lost focus or when the enter key is pressed).
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `input-provider` to other elements on your page. It takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
-- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. Markup in the template itself is preserved, which is how a consumer is given HTML; the `{{value}}` substituted into it is escaped. With no `provider-template`, the value is escaped before being written to a consumer's `innerHTML`.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`. Each option is in the format `label:type=value`; the `:type` and `=value` parts are optional. If the value is not specified, the label is used as the value. The type can be `string` (default), `number` or `boolean` and determines the type of the value which will be passed to consumers when the option is selected; for example `options="30 min:number=30,1 hour:number=60"` will pass the number `30` or `60` instead of the string `'30'` or `'60'`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `value`: Used to set the input's value.
-- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
+- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute. The `value` is evaluated as JavaScript, so only use this attribute where the `value` is written by you; do not turn it on for an input whose `value` is fed from a record or from another component.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
 - `input-props`: Can be used to set additional attributes on the inner `input` element. Must be in the format `attr1=value1,attr2=value2`.
@@ -912,7 +917,7 @@ The following example shows how to bind an `input-provider` component to an `inp
 **Attributes**
 
 - `consumers`: This allows you to connect this `input-transformer` to other elements on your page. It takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
-- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. Markup in the template itself is preserved, which is how a consumer is given HTML; the `{{value}}` substituted into it is escaped. With no `provider-template`, the value is escaped before being written to a consumer's `innerHTML`.
 - `output-type`: The default output type is `string`. This property can be used to convert the output to either `boolean` or `number`.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 
@@ -985,7 +990,7 @@ Logging out of Keycloak as well as of the app:
 
 **Attributes**
 
-- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider.
+- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider. It must be an `http` or `https` URL; relative paths are supported and are resolved against your app's origin.
 - `provider`: The name of the OAuth provider, as specified on the `Authentication` page of your Saasufy control panel. If it is set, the redirect only happens when the user logged in via that specific provider; this is useful when your app offers several different ways to log in.
 - `client-id`: The client ID to pass to the provider as the `client_id` query parameter. OpenID Connect providers require either this or an ID token in order to log the user out without asking them to confirm.
 - `post-logout-redirect-uri`: The URL to send the user back to once the provider has logged them out, passed as the `post_logout_redirect_uri` query parameter. It usually needs to be registered with the provider in advance. If it is not specified, the user is left on the provider's own logged out page.
@@ -1046,7 +1051,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `success-location-hash`: If authentication is successful, the browser's `location.hash` will be set to this value. It can be used to redirect the user to their dashboard, for example.
-- `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example.
+- `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example. It must be an `http` or `https` URL; relative paths are supported and are resolved against the current page.
 - `redirect-uri`: A URI to redirect the user to once OAuth is successful. This attribute may be required depending on the OAuth provider/client.
 - `extra-data`: This attribute can be used to pass additional data to the OAuth `getAccessTokenURL` endpoint. For Google OAuth, for example, an additional `redirect_uri` field is required, so it should be set using `extra-data="redirect_uri=http://localhost.com:8000/"` (substitute the URI with your own).
 - `navigate-event-path`: If authentication is successful and a path is set via this attribute, the component will emit a `navigate` event which will bubble up the component hierarchy and can be used by a parent component to perform the success redirection. This approach can be used as an alternative to `success-location-hash` or `success-url` for doing the final redirect.

package/collection-adder.js

@@ -4,7 +4,8 @@ import {
   convertStringToFieldParams,
   getTypeCastFunction,
   formatError,
-  renderTemplate
+  renderTemplate,
+  toSafeHTML
 } from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
@@ -281,10 +282,14 @@ class CollectionAdder extends SocketConsumer {
     let autocapitalize = this.getAttribute('autocapitalize');
     let autocorrect = this.getAttribute('autocorrect');
 
+    // Every value interpolated into the form markup below comes from an
+    // attribute, which the browser has already decoded, so each one is escaped
+    // on the way back into markup. Escaping is a no-op on entities the template
+    // layer produced, so labels keep rendering exactly as they did.
     let extraAttributesString = `${
-      autocapitalize ? ` autocapitalize="${autocapitalize}"` : ''
+      autocapitalize ? ` autocapitalize="${toSafeHTML(autocapitalize)}"` : ''
     }${
-      autocorrect ? ` autocorrect="${autocorrect}"` : ''
+      autocorrect ? ` autocorrect="${toSafeHTML(autocorrect)}"` : ''
     }`;
 
     if (this.collection) this.collection.destroy();
@@ -309,72 +314,72 @@ class CollectionAdder extends SocketConsumer {
       let optionLabel = optionLabels[field] == null ? 'Options' : optionLabels[field];
       if (inputType === 'checkbox') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <label>
               ${
-                inputLabel
+                toSafeHTML(inputLabel)
               }
               <input class="collection-adder-input" type="${
-                inputType
+                toSafeHTML(inputType)
               }" name="${
-                field
+                toSafeHTML(field)
               }" />
             </label>
           </div>`
         );
       } else if (inputType === 'select') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <label>
               ${
-                inputLabel
+                toSafeHTML(inputLabel)
               }
-              <select name="${field}" class="collection-adder-input collection-adder-select">
-                <option value="" selected disabled hidden>${optionLabel}</option>
-                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
+              <select name="${toSafeHTML(field)}" class="collection-adder-input collection-adder-select">
+                <option value="" selected disabled hidden>${toSafeHTML(optionLabel)}</option>
+                ${inputTypeParams.map(param => `<option value="${toSafeHTML(param)}">${toSafeHTML(param)}</option>`).join('')}
               </select>
             </label>
           </div>`
         );
       } else if (inputType === 'text-select') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <div class="collection-adder-select-text-row">
               <input class="collection-adder-input" type="text" name="${
-                field
+                toSafeHTML(field)
               }" placeholder="${
-                inputLabel
+                toSafeHTML(inputLabel)
               }"${extraAttributesString} />
               <select class="collection-adder-select">
-                <option value="" selected disabled hidden>${optionLabel}</option>
-                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
+                <option value="" selected disabled hidden>${toSafeHTML(optionLabel)}</option>
+                ${inputTypeParams.map(param => `<option value="${toSafeHTML(param)}">${toSafeHTML(param)}</option>`).join('')}
               </select>
             </div>
           </div>`
         );
       } else if (inputType === 'radio') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <div>
               ${
-                inputLabel
+                toSafeHTML(inputLabel)
               }
               ${
                 inputTypeParams.map(
                   param => (
                     `<label>
                       <input class="collection-adder-radio" type="${
-                        inputType
+                        toSafeHTML(inputType)
                       }" name="${
-                        field
-                      }" value=${
-                        param
-                      } />
-                      ${param}
+                        toSafeHTML(field)
+                      }" value="${
+                        toSafeHTML(param)
+                      }" />
+                      ${toSafeHTML(param)}
                     </label>`
                   )
                 ).join('')
@@ -384,49 +389,49 @@ class CollectionAdder extends SocketConsumer {
         );
       } else if (inputType === 'textarea') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <textarea class="collection-adder-input" name="${
-              field
+              toSafeHTML(field)
             }" placeholder="${
-              inputLabel
+              toSafeHTML(inputLabel)
             }"${extraAttributesString}></textarea>
           </div>`
         );
       } else if (inputType === 'file') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <input class="collection-adder-input" type="${
-              inputType
+              toSafeHTML(inputType)
             }" name="${
-              field
+              toSafeHTML(field)
             }"${extraAttributesString} />
           </div>`
         );
       } else if (inputType === 'number') {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <input class="collection-adder-input" type="${
-              inputType
+              toSafeHTML(inputType)
             }" name="${
-              field
+              toSafeHTML(field)
             }" placeholder="${
-              inputLabel
+              toSafeHTML(inputLabel)
             }" step="any"${extraAttributesString} />
           </div>`
         );
       } else {
         items.push(
-          `<div class="collection-adder-field-container" data-field="${field}">
+          `<div class="collection-adder-field-container" data-field="${toSafeHTML(field)}">
             <div class="collection-adder-field-error-container error"></div>
             <input class="collection-adder-input" type="${
-              inputType
+              toSafeHTML(inputType)
             }" name="${
-              field
+              toSafeHTML(field)
             }" placeholder="${
-              inputLabel
+              toSafeHTML(inputLabel)
             }"${extraAttributesString} />
           </div>`
         );
@@ -438,7 +443,7 @@ class CollectionAdder extends SocketConsumer {
         <div class="collection-adder-message-container"></div>
         <div class="collection-adder-form-content">
           ${items.join('')}
-          ${hideSubmitButton ? '' : `<input type="submit" value="${submitButtonLabel}" />`}
+          ${hideSubmitButton ? '' : `<input type="submit" value="${toSafeHTML(submitButtonLabel)}" />`}
         </div>
       </form>
     `;

package/confirm-modal.js

@@ -1,4 +1,5 @@
 import './overlay-modal.js';
+import { toSafeHTML } from './utils.js';
 
 class ConfirmModal extends HTMLElement {
   constructor() {
@@ -65,14 +66,19 @@ class ConfirmModal extends HTMLElement {
     let confirmButtonLabel = this.getAttribute('confirm-button-label') || 'Confirm';
     let cancelButtonLabel = this.getAttribute('cancel-button-label') || 'Cancel';
 
+    // These are documented as text and typically come from an attribute which a
+    // template wrote, such as confirm-message="Delete {{Product.name}}?". The
+    // browser decodes entities when the attribute is parsed, so getAttribute
+    // hands back the original characters and they have to be escaped again
+    // before going into markup here.
     this.innerHTML = `
       <overlay-modal${this.isHidden ? ' style="display: none;"' : ''}>
-        <div slot="title">${heading}</div>
+        <div slot="title">${toSafeHTML(heading)}</div>
         <div class="confirm-modal-content" slot="content">
-          <div>${message}</div>
+          <div>${toSafeHTML(message)}</div>
           <div class="confirm-modal-buttons-container">
-            <input class="modal-confirm-button" type="button" value="${confirmButtonLabel}" />
-            <input class="modal-cancel-button" type="button" value="${cancelButtonLabel}" />
+            <input class="modal-confirm-button" type="button" value="${toSafeHTML(confirmButtonLabel)}" />
+            <input class="modal-cancel-button" type="button" value="${toSafeHTML(cancelButtonLabel)}" />
           </div>
         </div>
       </overlay-modal>

package/input-provider.js

@@ -4,7 +4,8 @@ import {
   updateConsumerElements,
   convertStringToFieldParams,
   convertStringToFieldTypeValues,
-  getTypeCastFunction
+  getTypeCastFunction,
+  toSafeHTML
 } from './utils.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 800;
@@ -141,16 +142,20 @@ class InputProvider extends HTMLElement {
       if (options != null) {
         let fieldTypeValues = convertStringToFieldTypeValues(options, true, true);
         optionValues = new Map();
+        // The options attribute can be written by a consumer rather than by hand,
+        // in which case it carries whatever a record held. Escaping is a no-op on
+        // the entities the template layer already produced, so a label keeps
+        // rendering as it did while markup in it stays text.
         let optionElements = fieldTypeValues
           .map((option) => {
             if (option.field === placeholder) {
-              return `<option value="" selected class="select-default-option">${option.field}</option>`;
+              return `<option value="" selected class="select-default-option">${toSafeHTML(option.field)}</option>`;
             }
             let Type = getTypeCastFunction(option.type);
             let optionValue = Type(option.value ?? option.field);
             let elementValue = String(optionValue);
             optionValues.set(elementValue, optionValue);
-            return `<option value="${elementValue}">${option.field}</option>`;
+            return `<option value="${toSafeHTML(elementValue)}">${toSafeHTML(option.field)}</option>`;
           })
           .join('');
         this.inputElement.innerHTML = optionElements;

package/log-in-form.js

@@ -1,5 +1,6 @@
 import '/node_modules/capitalisk-auth-client/dist/capitalisk-log-in.js';
 import { SocketConsumer } from './socket.js';
+import { toSafeHTML } from './utils.js';
 
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
@@ -45,11 +46,11 @@ class LogInForm extends SocketConsumer {
 
     this.innerHTML = `
       <capitalisk-log-in
-        hostname="${hostname}"
-        port="${port}"
-        network-symbol="${networkSymbol}"
-        chain-module-name="${chainModuleName}"
-        secure="${secure}"
+        hostname="${toSafeHTML(hostname)}"
+        port="${toSafeHTML(port)}"
+        network-symbol="${toSafeHTML(networkSymbol)}"
+        chain-module-name="${toSafeHTML(chainModuleName)}"
+        secure="${toSafeHTML(secure)}"
         disabled="true"
       ></capitalisk-log-in>
     `;

package/log-out.js

@@ -20,6 +20,16 @@ class LogOut extends SocketConsumer {
       );
     }
 
+    // A javascript: or data: URL would execute when assigned to location.href.
+    if (
+      providerLogOutURL.protocol !== 'https:' &&
+      providerLogOutURL.protocol !== 'http:'
+    ) {
+      throw new Error(
+        'The logout-url attribute of log-out must be an http or https URL'
+      );
+    }
+
     let clientId = this.getAttribute('client-id');
     let postLogoutRedirectURI = this.getAttribute('post-logout-redirect-uri');
     let searchParams = providerLogOutURL.searchParams;

package/model-input.js

@@ -215,16 +215,20 @@ class ModelInput extends SocketConsumer {
       if (options != null) {
         let fieldTypeValues = convertStringToFieldTypeValues(options, true, true);
         optionValues = new Map();
+        // The options attribute can be written by a consumer rather than by hand,
+        // in which case it carries whatever a record held. Escaping is a no-op on
+        // the entities the template layer already produced, so a label keeps
+        // rendering as it did while markup in it stays text.
         let optionElements = fieldTypeValues
           .map((option) => {
             if (option.field === placeholder) {
-              return `<option value="" selected class="select-default-option">${option.field}</option>`;
+              return `<option value="" selected class="select-default-option">${toSafeHTML(option.field)}</option>`;
             }
             let Type = getTypeCastFunction(option.type);
             let optionValue = Type(option.value ?? option.field);
             let elementValue = String(optionValue);
             optionValues.set(elementValue, optionValue);
-            return `<option value="${elementValue}">${option.field}</option>`;
+            return `<option value="${toSafeHTML(elementValue)}">${toSafeHTML(option.field)}</option>`;
           })
           .join('');
         this.inputElement.innerHTML = optionElements;

package/oauth-handler.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { generateRandomHexString, convertStringToFieldParams } from './utils.js';
+import { generateRandomHexString, convertStringToFieldParams, toSafeHTML } from './utils.js';
 
 const DEFAULT_AUTH_TIMEOUT = 20000;
 
@@ -12,7 +12,25 @@ class OAuthHandler extends SocketConsumer {
     if (successLocationHash) {
       location.hash = successLocationHash;
     } else if (successURL) {
-      location.href = successURL;
+      let resolvedURL;
+      // Resolved against the document URL so relative paths behave as they did
+      // with the plain assignment; only an absolute URL brings its own scheme.
+      try {
+        resolvedURL = new URL(successURL, location.href);
+      } catch (error) {
+        throw new Error(
+          'The success-url attribute of oauth-handler was not a valid URL'
+        );
+      }
+      if (
+        resolvedURL.protocol !== 'https:' &&
+        resolvedURL.protocol !== 'http:'
+      ) {
+        throw new Error(
+          'The success-url attribute of oauth-handler must be an http or https URL'
+        );
+      }
+      location.href = resolvedURL.href;
     } else {
       this.dispatchEvent(
         new CustomEvent('navigate', {
@@ -42,7 +60,8 @@ class OAuthHandler extends SocketConsumer {
 
     let useLocalStorage = !this.hasAttribute('use-session-storage');
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
-    let expectedOAuthState = (useLocalStorage ? localStorage : sessionStorage).getItem(storageKey);
+    let storage = useLocalStorage ? localStorage : sessionStorage;
+    let expectedOAuthState = storage.getItem(storageKey);
     if (!expectedOAuthState) {
       this.innerHTML = `
         <div class="error">OAuth authentication failed because the state was missing.</div>
@@ -83,11 +102,25 @@ class OAuthHandler extends SocketConsumer {
       history.replaceState({}, document.title, location.pathname);
       
       if (relevantStates.some(expectedState => expectedState === state)) {
+        // Single-use, so consumed before the exchange. Re-read rather than
+        // written back from the list captured above, which would drop a state
+        // another handler or tab added since.
+        let remainingStates = (storage.getItem(storageKey) || '')
+          .split(',')
+          .filter(existingState => existingState && existingState !== state);
+        if (remainingStates.length) {
+          storage.setItem(storageKey, remainingStates.join(','));
+        } else {
+          storage.removeItem(storageKey);
+        }
+
         try {
           await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {
+          // The message is quoted back by the service and can carry parts of the
+          // query string which brought the browser here.
           this.innerHTML = `
-            <div class="error">OAuth authentication failed. ${error.message}</div>
+            <div class="error">OAuth authentication failed. ${toSafeHTML(error.message)}</div>
           `;
           return;
         }

package/oauth-link.js

@@ -11,7 +11,9 @@ class OAuthLink extends HTMLElement {
     };
 
     this.handleClickEvent = () => {
-      this.updateState();
+      // Re-asserts the stored state in case it was evicted; not regenerated,
+      // since the href was built from it at render time.
+      this.storeState();
     };
   }
 
@@ -73,33 +75,34 @@ class OAuthLink extends HTMLElement {
     viewportNode.innerHTML = itemString;
   }
 
+  // A fresh nonce per render; the handler consumes a state on use. Render only,
+  // since the href is rebuilt from the new state.
   updateState() {
     let provider = this.getAttribute('provider');
     if (!provider) {
       throw new Error('The provider attribute of oauth-link was not specified');
     }
-    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let stateSize = Number(this.getAttribute('state-size') || 20);
+    this.provider = provider;
+    this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+    this.storeState();
+  }
+
+  // Re-read immediately before writing so another provider's state, from
+  // another link or tab, is not dropped.
+  storeState() {
+    if (!this.state) return;
+    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
-    
     let storage = useLocalStorage ? localStorage : sessionStorage;
     let existingState = storage.getItem(storageKey);
-    let stateList;
-    if (existingState) {
-      stateList = existingState.split(',').filter(Boolean);
-      let maxStateCount = Number(this.getAttribute('max-state-count') ?? 20);
-      if (stateList.length >= maxStateCount) {
-        stateList.pop();
-      }
-    } else {
-      stateList = []
-    }
-    if (this.provider !== provider) {
-      this.state = `${provider}-${generateRandomHexString(stateSize)}`;
-      this.provider = provider;
+    let stateList = existingState ? existingState.split(',').filter(Boolean) : [];
+    if (stateList.includes(this.state)) return;
+    let maxStateCount = Number(this.getAttribute('max-state-count') ?? 20);
+    if (stateList.length >= maxStateCount) {
+      stateList.pop();
     }
     stateList.unshift(this.state);
-
     storage.setItem(storageKey, stateList.join(','));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "10.5.3",
+  "version": "10.5.5",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/utils.js

@@ -11,28 +11,61 @@ let backtickRegExp = /`/g;
 let templateMultiStartBracesRegExp = /{{{*/g
 let templateMultiEndBracesRegExp = /}}}*/g
 
+// Expression brackets in their encoded form. Escaping leaves these alone so
+// that it stays idempotent, but the browser turns them back into brackets when
+// it parses them out of an attribute, which would hand a value to any component
+// that re-evaluates that attribute (computable-value, computable-model-values).
+// They are flattened here for the same reason the literal brackets above are.
+let templateEncodedStartBracesRegExp = /(?:{){2,}/g
+let templateEncodedEndBracesRegExp = /(?:}){2,}/g
+
+// Line breaks are the one piece of markup a value is allowed to carry; they are
+// escaped along with everything else and then put back, so that only a genuine
+// break tag survives and a stray angle bracket elsewhere in the value cannot.
+let safeBreakRegExp = /<(br ?\/?)>/g;
+
 export function toSafeString(value) {
   return value.replace(expressionCharsRegExp, '$!{$1}')
     .replace(backtickRegExp, `'`)
     .replace(templateMultiStartBracesRegExp, '[[')
-    .replace(templateMultiEndBracesRegExp, ']]');
+    .replace(templateMultiEndBracesRegExp, ']]')
+    .replace(templateEncodedStartBracesRegExp, '[[')
+    .replace(templateEncodedEndBracesRegExp, ']]');
 }
 
 export function toSafeHTML(value) {
-  if (typeof value === 'string') {
-    return toSafeString(value)
-      .replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&')
-      .replace(/<(?!br ?\/?>)/g, '&lt;')
-      .replace(/(?<!br ?\/?)>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;')
-      .replace(/\{/g, '&#123;')
-      .replace(/\}/g, '&#125;')
-      .replace(/\n/g, '<br>');
-  } else if (value != null && typeof value.toString !== 'function') {
-    return '[invalid]';
+  // null and undefined are passed through so that callers can tell a missing
+  // value apart from an empty one and fall back to their own default.
+  if (value == null) return value;
+  if (typeof value !== 'string') {
+    if (typeof value.toString !== 'function') {
+      return '[invalid]';
+    }
+    // Anything which is not a string still has to be escaped; a field holding a
+    // list or an object would otherwise reach the page as markup once it was
+    // stringified further down the line.
+    value = String(value);
   }
-  return value;
+  return toSafeString(value)
+    // Entities which this function itself produces are left alone so that
+    // escaping an already-escaped value is a no-op. Consumer chains pass values
+    // through several templates and would otherwise encode them once per hop.
+    .replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(safeBreakRegExp, '<$1>')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;')
+    .replace(/\n/g, '<br>')
+    // The escaping above re-creates the brackets which toSafeString flattened,
+    // so the encoded form is flattened again here, once nothing further will
+    // produce it. A value such as &#123;{expression}&#125; would otherwise
+    // leave as two adjacent encoded brackets which the browser decodes back
+    // into a live expression for whichever component next evaluates it.
+    .replace(templateEncodedStartBracesRegExp, '[[')
+    .replace(templateEncodedEndBracesRegExp, ']]');
 }
 
 export function toExpression(value) {
@@ -307,7 +340,13 @@ function replaceExpressions(string, replaceFn) {
     let match = matches[i];
     charList.splice(match.startIndex, match.length, ...charSubs[i]);
   }
-  return charList.join('');
+  // Adjacent brackets can also form where two separately escaped values meet,
+  // which no single-value pass can see, so the joined result is flattened too.
+  // Only the encoded form is touched; expressions written by the page author
+  // stay literal and remain available to nested components to evaluate later.
+  return charList.join('')
+    .replace(templateEncodedStartBracesRegExp, '[[')
+    .replace(templateEncodedEndBracesRegExp, ']]');
 }
 
 export function renderTemplate(templateString, data, socket, autoExecFunction) {
@@ -363,6 +402,12 @@ export function updateConsumerElements(consumers, value, template, sourceElement
       })
       .filter(([ selector, attributeName ]) => selector);
 
+    // A template is the supported way to send markup to a consumer: the template
+    // itself is written by the page author and is left intact, while the value
+    // substituted into it is escaped by the {{ }} expression. Without a template
+    // there is no author-written markup to preserve, so the value is escaped
+    // before it can reach the innerHTML of a consumer further down.
+    let isTemplateApplied = !!template;
     if (template) {
       value = renderTemplate.call(this, template, { value }, null, true);
     }
@@ -412,7 +457,7 @@ export function updateConsumerElements(consumers, value, template, sourceElement
               sourceElementName ? `${sourceElementName}:${value}` : value
             );
           } else {
-            element.innerHTML = value;
+            element.innerHTML = isTemplateApplied ? value : toSafeHTML(value);
           }
         }
       }