@transferwise/components 0.0.0-experimental-bcea1dd → 0.0.0-experimental-1168b1c

package/build/types/Markup/_stories/Vulnerability/Vulnerability.d.ts

@@ -1,12 +0,0 @@
-import './Vulnerability.css';
-type Severity = 'High' | 'Medium' | 'Low';
-interface VulnerabilityProps {
-    markup: string;
-}
-export declare const Vulnerability: ({ markup }: VulnerabilityProps) => import("react").JSX.Element;
-interface BadgeProps {
-    severity: Severity;
-}
-export declare const Badge: ({ severity }: BadgeProps) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=Vulnerability.d.ts.map

package/build/types/Markup/_stories/Vulnerability/Vulnerability.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Vulnerability.d.ts","sourceRoot":"","sources":["../../../../../src/Markup/_stories/Vulnerability/Vulnerability.tsx"],"names":[],"mappings":"AAEA,OAAO,qBAAqB,CAAC;AAE7B,KAAK,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1C,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,YAAY,kBAAkB,gCAS3D,CAAC;AAEF,UAAU,UAAU;IAClB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,GAAI,cAAc,UAAU,gCAI7C,CAAC"}

package/build/types/Markup/constants.d.ts

@@ -1,20 +0,0 @@
-export declare const ALLOWED_TAGS: readonly ["important", "positive", "negative", "strong", "strikethrough", "paragraph", "p", "link", "a"];
-/**
- * Matches opening and closing tags from the ALLOWED_TAGS allow-list.
- *
- * Capture groups:
- *  1. `/` if this is a closing tag, undefined otherwise
- *  2. Tag name
- *  3. Raw attribute string between the tag name and `>` (empty for closing tags)
- *
- * The lookahead `(?=[\s>/])` after the tag name ensures we don't match partial
- * words — e.g. `<stronger>` won't be matched as `<strong>`.
- *
- * Global flag (`g`) allows iterative matching via `exec()`.
- */
-export declare const TAG_REGEX: RegExp;
-export declare const TAG_ALIASES: Record<string, string>;
-export declare const MAX_NESTING_DEPTH = 32;
-export declare const ALLOWED_TARGETS: string[];
-export declare const ALLOWED_PROTOCOLS: string[];
-//# sourceMappingURL=constants.d.ts.map

package/build/types/Markup/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Markup/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,0GAUf,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS,QAGrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAiC,CAAC;AAGjF,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAGpC,eAAO,MAAM,eAAe,UAAsB,CAAC;AAGnD,eAAO,MAAM,iBAAiB,UAAwB,CAAC"}

package/build/types/Markup/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Markup';
-export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup.types';
-//# sourceMappingURL=index.d.ts.map

package/build/types/Markup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Markup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/build/types/Markup/utils/parseMarkup.d.ts

@@ -1,6 +0,0 @@
-import { MAX_NESTING_DEPTH } from '../constants';
-import { MarkupNode } from '../Markup.types';
-export { MAX_NESTING_DEPTH };
-/** Entry point: tokenises the input string, then parses the token stream into a MarkupNode tree. */
-export declare function parseMarkup(input: string): MarkupNode[];
-//# sourceMappingURL=parseMarkup.d.ts.map

package/build/types/Markup/utils/parseMarkup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parseMarkup.d.ts","sourceRoot":"","sources":["../../../../src/Markup/utils/parseMarkup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAA0B,MAAM,cAAc,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAuN7B,oGAAoG;AACpG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,EAAE,CAQvD"}

package/build/types/Markup/utils/sanitise.d.ts

@@ -1,2 +0,0 @@
-export declare function isAllowedHref(href: string): boolean;
-//# sourceMappingURL=sanitise.d.ts.map

package/build/types/Markup/utils/sanitise.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sanitise.d.ts","sourceRoot":"","sources":["../../../../src/Markup/utils/sanitise.ts"],"names":[],"mappings":"AAaA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAmFnD"}

package/src/Markup/Markup.css

@@ -1,28 +0,0 @@
-.wds-markup-emphasis {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-style: normal;
-}
-.wds-markup-emphasis--important {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-markup-emphasis--positive {
-  color: #008026;
-  color: var(--color-content-positive);
-}
-.wds-markup-emphasis--negative {
-  color: #cf2929;
-  color: var(--color-content-negative);
-}
-.wds-markup-strong {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
-.wds-markup-strikethrough {
-  -webkit-text-decoration: line-through;
-  text-decoration: line-through;
-}
-.wds-markup-paragraph {
-  margin: 0;
-}

package/src/Markup/Markup.injection.test.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-
-import { render } from '../test-utils';
-
-import { Markup } from './Markup';
-
-/**
- * Proof of Concept: Markup Injection via Attacker-Controlled Data
- *
- * These tests demonstrate Laszlo's concern: when untrusted data (e.g. a payee name,
- * company name, or any string from an external source) is interpolated into a markup
- * template string, the attacker can break out of their structural context and inject
- * arbitrary allowed markup — links, emphasis, etc.
- *
- * This is NOT about XSS (script execution is blocked). It's about content spoofing
- * and phishing within trusted UI.
- */
-describe('Markup injection via attacker-controlled data', () => {
-  describe('the vulnerability: structural injection', () => {
-    it('attacker-controlled data can inject links into trusted UI', () => {
-      // Scenario: BFF returns a payee name that an attacker controls
-      // (e.g. they registered a company with a crafted name)
-      const attackerControlledName =
-        'Acme Corp</strong>' +
-        '<link href="https://evil.example.com">' +
-        '<important>ACTION REQUIRED: Verify your identity</important>' +
-        '</link>' +
-        '<strong>';
-
-      // The frontend interpolates it into a template — a typical BFF integration pattern
-      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      // The injected link renders as a real, clickable anchor tag
-      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
-      expect(injectedLink).toBeInTheDocument();
-
-      // The injected <important> renders with styling that makes it look authoritative
-      const injectedEmphasis = container.querySelector('.wds-markup-emphasis--important');
-      expect(injectedEmphasis).toBeInTheDocument();
-      expect(injectedEmphasis).toHaveTextContent('ACTION REQUIRED: Verify your identity');
-    });
-
-    it('attacker can spoof UI hierarchy with paragraph injection', () => {
-      // A user-entered "note" field that ends up in markup
-      const attackerNote =
-        'Thanks!</p>' +
-        '<p><important>Your account has been compromised. ' +
-        'Contact support at </important>' +
-        '<link href="https://phishing.example.com">this secure link</link></p>' +
-        '<p>';
-
-      const template = `<p>Note from sender: ${attackerNote}</p>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      const phishingLink = container.querySelector('a[href="https://phishing.example.com"]');
-      expect(phishingLink).toBeInTheDocument();
-      expect(phishingLink).toHaveTextContent('this secure link');
-    });
-
-    it('attacker can inject misleading accessibility labels', () => {
-      // Even with valid structure, injected content can mislead screen readers
-      const attackerValue =
-        'normal text</strong>' +
-        '<strong accessibilityLabel="Security alert: click to verify">' +
-        '<link href="https://evil.example.com">here</link>' +
-        '</strong>' +
-        '<strong>';
-
-      const template = `Your balance: <strong>${attackerValue}</strong>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      const misleadingElement = container.querySelector(
-        '[aria-label="Security alert: click to verify"]',
-      );
-      expect(misleadingElement).toBeInTheDocument();
-    });
-  });
-
-  describe('what IS blocked (XSS / script execution)', () => {
-    it('cannot inject arbitrary HTML elements', () => {
-      const xssAttempt = '<img src=x onerror=alert(1)>';
-      const template = `Hello <strong>${xssAttempt}</strong>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      // <img> is not in the allow-list, so it's rendered as text
-      expect(container.querySelector('img')).not.toBeInTheDocument();
-      expect(container).toHaveTextContent(/<img src=x onerror=alert\(1\)>/);
-    });
-
-    it('cannot inject script tags', () => {
-      const xssAttempt = '<script>alert("xss")</script>';
-      const template = `Hello <strong>${xssAttempt}</strong>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      expect(container.querySelector('script')).not.toBeInTheDocument();
-    });
-
-    it('blocks javascript: URLs in links', () => {
-      // Even if attacker injects a link, javascript: URLs are blocked
-      const attack = 'click</strong><link href="javascript:alert(1)">me</link><strong>';
-      const template = `<strong>${attack}</strong>`;
-
-      const { container } = render(<Markup>{template}</Markup>);
-
-      // The link renders but without the dangerous href (falls back to Fragment)
-      expect(container.querySelector('a[href*="javascript"]')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('the general nature of this problem', () => {
-    it('is identical to HTML injection via innerHTML', () => {
-      // This is the same class of bug — mixing code and data in a string
-      const attackerName = '<b>URGENT</b>';
-      const div = document.createElement('div');
-      div.innerHTML = `Hello ${attackerName}`;
-
-      // The attacker's data became structure
-      expect(div.querySelector('b')).not.toBeNull();
-      expect(div.querySelector('b')!).toHaveTextContent('URGENT');
-    });
-
-    it('react JSX prevents this by design', () => {
-      // In contrast, React treats variables as pure data — never as structure
-      const attackerName = '<strong>URGENT</strong>';
-
-      const { container } = render(<span>Hello {attackerName}</span>);
-
-      // React escapes the string — it renders as visible text, not as a <strong> tag
-      expect(container.querySelector('strong')).not.toBeInTheDocument();
-      expect(container).toHaveTextContent(/<strong>URGENT<\/strong>/);
-    });
-
-    it('demonstrates why Markup reintroduces the problem React solved', () => {
-      // The same attacker string that React handles safely...
-      const attackerName = '<strong>URGENT: Call +44 123 456 789 NOW</strong>';
-
-      // ...becomes dangerous when passed through Markup's string parser
-      const { container } = render(<Markup>{`Hello ${attackerName}`}</Markup>);
-
-      // The attacker's data has been promoted to structure
-      const injected = container.querySelector('strong');
-      expect(injected).toBeInTheDocument();
-      expect(injected).toHaveTextContent('URGENT: Call +44 123 456 789 NOW');
-    });
-  });
-});

package/src/Markup/Markup.less

@@ -1,29 +0,0 @@
-.wds-markup-emphasis {
-  font-weight: var(--font-weight-semi-bold);
-  font-style: normal;
-}
-
-.wds-markup-emphasis--important {
-  color: var(--color-content-primary);
-}
-
-.wds-markup-emphasis--positive {
-  color: var(--color-content-positive);
-}
-
-.wds-markup-emphasis--negative {
-  color: var(--color-content-negative);
-}
-
-.wds-markup-strong {
-  font-weight: var(--font-weight-semi-bold);
-}
-
-/// @see https://www.webaxe.org/strikethrough-html-accessibility/
-.wds-markup-strikethrough {
-  text-decoration: line-through;
-}
-
-.wds-markup-paragraph {
-  margin: 0;
-}