@revenuecat/purchases-ui-js 4.7.2 → 4.7.4

package/dist/components/text/TextNode.stories.svelte

@@ -68,6 +68,53 @@
 
 <Story name="Default" args={{ name: "hello world!" }} />
 
+<!--
+  Security regression: a localization value containing HTML/JS must render as
+  inert text, never execute. With the fix in place this story shows the literal
+  markup as text, the page is untouched, and `window.__XSS_FIRED` stays
+  undefined. If it ever executes, the page background turns red.
+-->
+<Story
+  name="XSS payload is escaped"
+  args={{
+    font_weight: "regular",
+    horizontal_alignment: "leading",
+    name: "hello world!",
+    text_lid,
+  }}
+  parameters={{
+    localizations: {
+      [defaultLocale]: {
+        [text_lid]:
+          'Premium <img src=x onerror="window.__XSS_FIRED=true;document.body.style.background=\'red\'"> and <svg onload="window.__XSS_FIRED=true"></svg>',
+      },
+    } satisfies Localizations,
+  }}
+/>
+
+<!--
+  Markdown links: safe http(s)/mailto/tel links are kept (and quoted), while
+  dangerous schemes (javascript:, data:, …) have their href dropped so the
+  label renders as plain, non-clickable text.
+-->
+<Story
+  name="Markdown links (safe kept, dangerous dropped)"
+  args={{
+    font_weight: "regular",
+    horizontal_alignment: "leading",
+    name: "hello world!",
+    text_lid,
+  }}
+  parameters={{
+    localizations: {
+      [defaultLocale]: {
+        [text_lid]:
+          "Safe: [RevenueCat](https://www.revenuecat.com) — Dangerous: [click me](javascript:window.__XSS_FIRED=true)",
+      },
+    } satisfies Localizations,
+  }}
+/>
+
 <Story
   name="Font Weight"
   args={{

package/dist/components/text/text-utils.js

@@ -58,11 +58,49 @@ export function getTextWrapperInlineStyles(colorMode, _restProps, size, backgrou
         ...mapBackground(colorMode, background_color, null),
     });
 }
+const HTML_ESCAPE_MAP = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+/**
+ * Escapes the HTML-special characters in `text` so that user-controlled
+ * localization values cannot inject markup. None of the markdown control
+ * characters handled below are HTML-special, so escaping first is safe.
+ */
+function escapeHtml(text) {
+    return text.replace(/[&<>"']/g, (character) => HTML_ESCAPE_MAP[character]);
+}
+const SAFE_URL_SCHEMES = ["http", "https", "mailto", "tel"];
+/**
+ * Returns the URL if it is safe to use as a link `href`, otherwise `null`.
+ * Relative and protocol-relative URLs are allowed; absolute URLs are only
+ * allowed for an explicit scheme allowlist. Whitespace and control characters
+ * (code points <= 0x20) are stripped and the scheme is lowercased before
+ * comparison so obfuscated payloads such as "jAvA\tscript:" are still rejected.
+ */
+function sanitizeUrl(url) {
+    const normalized = Array.from(url)
+        .filter((character) => character.charCodeAt(0) > 0x20)
+        .join("")
+        .toLowerCase();
+    const schemeMatch = normalized.match(/^([a-z][a-z0-9+.-]*):/);
+    if (schemeMatch && !SAFE_URL_SCHEMES.includes(schemeMatch[1])) {
+        return null;
+    }
+    return url;
+}
 export function getHtmlFromMarkdown(text) {
     if (!text)
         return "";
+    // Escape HTML first so attacker-controlled markup (e.g. `<img onerror=...>`)
+    // can never reach the `{@html}` sink. After this, the only HTML in the output
+    // is the fixed tag allowlist produced by the rules below.
+    const escapedHtml = escapeHtml(text);
     const escapedMarkdownCharacters = [];
-    const textWithEscapedMarkdownPlaceholders = text.replaceAll(/\\([\\`*_[\]{}()#+\-.!~])/g, (_, escapedCharacter) => {
+    const textWithEscapedMarkdownPlaceholders = escapedHtml.replaceAll(/\\([\\`*_[\]{}()#+\-.!~])/g, (_, escapedCharacter) => {
         escapedMarkdownCharacters.push(escapedCharacter);
         return `\0RC_ESCAPED_MARKDOWN_${escapedMarkdownCharacters.length - 1}\0`;
     });
@@ -77,11 +115,20 @@ export function getHtmlFromMarkdown(text) {
         },
         link: {
             regexp: /\[(.*?)\]\((.*?)\)/g,
-            output: "<a href=$2 target='_blank' rel='noopener noreferrer'>$1</a>",
+            output: (_match, label, url) => {
+                const safeUrl = sanitizeUrl(url);
+                if (safeUrl === null) {
+                    // Drop the unsafe href and render the (already escaped) label only.
+                    return label;
+                }
+                return `<a href="${safeUrl}" target='_blank' rel='noopener noreferrer'>${label}</a>`;
+            },
         },
     };
     const parsedText = Object.values(regexpDictionary).reduce((parsedText, { regexp, output }) => {
-        return parsedText.replaceAll(regexp, output);
+        return typeof output === "string"
+            ? parsedText.replaceAll(regexp, output)
+            : parsedText.replaceAll(regexp, output);
     }, textWithEscapedMarkdownPlaceholders);
     return escapedMarkdownCharacters.reduce((restoredText, escapedMarkdownCharacter, index) => restoredText.replaceAll(`\0RC_ESCAPED_MARKDOWN_${index}\0`, escapedMarkdownCharacter), parsedText);
 }

package/dist/components/workflows/Screen.svelte

@@ -5,7 +5,7 @@
   import type { InitialInputSelections } from "../../stores/inputValidation";
   import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
   import type { WorkflowScreen } from "../../types/workflow";
-  import type { VariableDictionary } from "../../types/variables";
+  import type { PackageInfo, VariableDictionary } from "../../types/variables";
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
@@ -26,6 +26,7 @@
     containerId?: string;
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     initialInputSelections?: InitialInputSelections;
     onInputChanged?: (
       fieldId: string,
@@ -59,6 +60,7 @@
     containerId = "screen-container",
     maxContentWidth,
     variablesPerPackage,
+    infoPerPackage,
     initialInputSelections = {},
     onInputChanged,
     onReservedAttributeChanged,
@@ -78,6 +80,7 @@
       {selectedLocale}
       {uiConfig}
       {variablesPerPackage}
+      {infoPerPackage}
       {globalVariables}
       {maxContentWidth}
       {initialInputSelections}

package/dist/components/workflows/Screen.svelte.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from "../../types/colors";
 import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
 import type { WorkflowScreen } from "../../types/workflow";
-import type { VariableDictionary } from "../../types/variables";
+import type { PackageInfo, VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
@@ -21,6 +21,7 @@ interface Props {
     containerId?: string;
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     initialInputSelections?: InitialInputSelections;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.7.2",
+  "version": "4.7.4",
   "author": {
     "name": "RevenueCat, Inc."
   },