@transferwise/components 46.155.1 → 46.156.0

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

@@ -0,0 +1,163 @@
+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('default allowedHrefs blocks injected external links', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // The default allowlist blocks external domains — the link is NOT rendered
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).not.toBeInTheDocument();
+
+      // But the structural injection still works (emphasis renders)
+      const injectedEmphasis = container.querySelector('.wds-markup-emphasis--important');
+      expect(injectedEmphasis).toBeInTheDocument();
+      expect(injectedEmphasis).toHaveTextContent('ACTION REQUIRED: Verify your identity');
+    });
+
+    it('injected external links render when allowLinks="all"', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup allowLinks="all">{template}</Markup>);
+
+      // With allowLinks="all", the link renders — demonstrating the structural injection
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).toBeInTheDocument();
+    });
+
+    it('default allowedHrefs blocks phishing links in paragraph injection', () => {
+      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).not.toBeInTheDocument();
+    });
+
+    it('attacker can inject misleading accessibility labels', () => {
+      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

@@ -0,0 +1,29 @@
+.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;
+}