@transferwise/components 0.0.0-experimental-7ad3353 → 0.0.0-experimental-f5ce19a

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;
+}

package/src/Markup/Markup.test.tsx

@@ -0,0 +1,463 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '../test-utils';
+
+import { Markup } from './Markup';
+
+describe('Markup', () => {
+  it('renders plain text', () => {
+    render(<Markup>hello world</Markup>);
+    expect(screen.getByText('hello world')).toBeInTheDocument();
+  });
+
+  it('returns null for empty children', () => {
+    const { container } = render(<Markup />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  describe('wrapper element', () => {
+    it('renders in a span wrapper for inline content', () => {
+      render(<Markup>content</Markup>);
+      const element = screen.getByText('content');
+      expect(element.tagName).toBe('SPAN');
+    });
+
+    it('renders in a div wrapper when paragraph nodes are present', () => {
+      const { container } = render(<Markup>{'<p>block content</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('renders in a div wrapper when nested paragraph nodes are present', () => {
+      const { container } = render(
+        <Markup>{'<important><p>nested paragraph</p></important>'}</Markup>,
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('uses span when as="span" even with paragraphs', () => {
+      const { container } = render(<Markup as="span">{'<p>forced span</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('SPAN');
+    });
+
+    it('uses div when as="div" even without paragraphs', () => {
+      const { container } = render(<Markup as="div">inline but div</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('DIV');
+    });
+
+    it('accepts any HTML element via as prop', () => {
+      const { container } = render(<Markup as="section">{'<p>in a section</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.tagName).toBe('SECTION');
+    });
+
+    it('accepts a React component via as prop', () => {
+      const Card = ({
+        className,
+        children,
+      }: {
+        className?: string;
+        children?: React.ReactNode;
+      }) => (
+        <article data-testid="card" className={className}>
+          {children}
+        </article>
+      );
+      const { container } = render(
+        <Markup as={Card} className="custom">
+          {'<important>inside component</important>'}
+        </Markup>,
+      );
+      expect(screen.getByTestId('card')).toHaveClass('custom');
+      expect(container.querySelector('em')).toHaveTextContent('inside component');
+    });
+
+    it('passes data-testid to the wrapper element', () => {
+      render(<Markup data-testid="markup-wrapper">content</Markup>);
+      expect(screen.getByTestId('markup-wrapper')).toBeInTheDocument();
+    });
+
+    it('applies className to wrapper regardless of element type', () => {
+      render(<Markup className="custom">content</Markup>);
+      expect(screen.getByText('content')).toHaveClass('custom');
+    });
+
+    it('applies className to div wrapper with paragraphs', () => {
+      const { container } = render(<Markup className="block-wrapper">{'<p>paragraph</p>'}</Markup>);
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('block-wrapper');
+      expect(wrapper.tagName).toBe('DIV');
+    });
+  });
+
+  describe('emphasis', () => {
+    it('renders <important> with correct class', () => {
+      render(<Markup>{'<important>critical</important>'}</Markup>);
+      const element = screen.getByText('critical');
+      expect(element.tagName).toBe('EM');
+      expect(element).toHaveClass('wds-markup-emphasis', 'wds-markup-emphasis--important');
+    });
+
+    it('renders <positive> with correct class', () => {
+      render(<Markup>{'<positive>good</positive>'}</Markup>);
+      expect(screen.getByText('good')).toHaveClass('wds-markup-emphasis--positive');
+    });
+
+    it('renders <negative> with correct class', () => {
+      render(<Markup>{'<negative>bad</negative>'}</Markup>);
+      expect(screen.getByText('bad')).toHaveClass('wds-markup-emphasis--negative');
+    });
+
+    it('treats <warning> as plain text (unsupported tag)', () => {
+      render(<Markup>{'<warning>careful</warning>'}</Markup>);
+      expect(screen.getByText(/<warning>/)).toBeInTheDocument();
+    });
+  });
+
+  describe('links', () => {
+    it('renders a link with href', () => {
+      render(<Markup>{'<link href="/settings">settings</link>'}</Markup>);
+      const link = screen.getByRole('link', { name: 'settings' });
+      expect(link).toHaveAttribute('href', '/settings');
+    });
+
+    it('renders a link with target', () => {
+      render(<Markup>{'<link href="https://wise.com/help" target="_blank">visit</link>'}</Markup>);
+      const link = screen.getByRole('link', { name: /visit/ });
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+
+    it('renders a button-mode link with action', async () => {
+      const handleSave = jest.fn();
+      render(<Markup actions={{ save: handleSave }}>{'<link action="save">Save</link>'}</Markup>);
+      const button = screen.getByRole('button', { name: 'Save' });
+      await userEvent.click(button);
+      expect(handleSave).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders as plain text when action handler is missing', () => {
+      render(<Markup>{'<link action="missing">text</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.getByText('text')).toBeInTheDocument();
+    });
+
+    it('renders as plain text when href is unsafe', () => {
+      render(<Markup>{'<link href="javascript:alert(1)">evil</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('evil')).toBeInTheDocument();
+    });
+  });
+
+  describe('nesting', () => {
+    it('renders emphasis inside link', () => {
+      render(<Markup>{'<link href="/x"><important>bold link</important></link>'}</Markup>);
+      const link = screen.getByRole('link');
+      const emphasis = link.querySelector('em');
+      expect(emphasis).toHaveClass('wds-markup-emphasis--important');
+      expect(emphasis).toHaveTextContent('bold link');
+    });
+
+    it('renders link inside emphasis', () => {
+      render(<Markup>{'<important>Read the <link href="/terms">terms</link></important>'}</Markup>);
+      const emphasis = screen.getByText(/Read the/);
+      expect(emphasis.tagName).toBe('EM');
+      const link = screen.getByRole('link', { name: 'terms' });
+      expect(emphasis).toContainElement(link);
+    });
+  });
+
+  describe('strong', () => {
+    it('renders <strong> as a strong element', () => {
+      render(<Markup>{'<strong>bold</strong>'}</Markup>);
+      const element = screen.getByText('bold');
+      expect(element.tagName).toBe('STRONG');
+    });
+  });
+
+  describe('strikethrough', () => {
+    it('renders <strikethrough> as a del element', () => {
+      render(<Markup>{'<strikethrough>removed</strikethrough>'}</Markup>);
+      const element = screen.getByText('removed');
+      expect(element.tagName).toBe('DEL');
+    });
+  });
+
+  describe('paragraph', () => {
+    it('renders <paragraph> as a p element', () => {
+      render(<Markup>{'<paragraph>A paragraph.</paragraph>'}</Markup>);
+      const element = screen.getByText('A paragraph.');
+      expect(element.tagName).toBe('P');
+    });
+
+    it('renders <p> as a p element', () => {
+      render(<Markup>{'<p>Short form.</p>'}</Markup>);
+      const element = screen.getByText('Short form.');
+      expect(element.tagName).toBe('P');
+    });
+  });
+
+  describe('newlines', () => {
+    it('renders newlines as br elements', () => {
+      const { container } = render(<Markup>{'line one\nline two'}</Markup>);
+      expect(container.querySelector('br')).toBeInTheDocument();
+    });
+  });
+
+  describe('non-string children (pass-through)', () => {
+    it('passes through JSX elements unchanged', () => {
+      render(
+        <Markup>
+          <button type="button">Click me</button>
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('passes through a React component', () => {
+      const Custom = () => <span data-testid="custom">custom component</span>;
+      render(
+        <Markup>
+          <Custom />
+        </Markup>,
+      );
+      expect(screen.getByTestId('custom')).toBeInTheDocument();
+    });
+
+    it('applies className when passing through JSX', () => {
+      const { container } = render(
+        <Markup className="wrapper">
+          <em>styled</em>
+        </Markup>,
+      );
+      expect(container.firstChild).toHaveClass('wrapper');
+    });
+
+    it('returns null for undefined children', () => {
+      const { container } = render(<Markup>{undefined}</Markup>);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('returns null for null children', () => {
+      const { container } = render(<Markup>{null}</Markup>);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('passes through numbers as-is', () => {
+      render(<Markup>{42}</Markup>);
+      expect(screen.getByText('42')).toBeInTheDocument();
+    });
+
+    it('passes through fragment with mixed content', () => {
+      render(
+        <Markup>
+          <>
+            <strong>bold</strong> and text
+          </>
+        </Markup>,
+      );
+      expect(screen.getByText('bold')).toBeInTheDocument();
+      expect(screen.getByText(/and text/)).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibilityLabel', () => {
+    it('applies aria-label to emphasis tags', () => {
+      render(
+        <Markup>{'<important accessibilityLabel="Important notice">critical</important>'}</Markup>,
+      );
+      const element = screen.getByText('critical');
+      expect(element).toHaveAttribute('aria-label', 'Important notice');
+    });
+
+    it('applies aria-label to strong tags', () => {
+      render(<Markup>{'<strong accessibilityLabel="Highlighted">bold</strong>'}</Markup>);
+      expect(screen.getByText('bold')).toHaveAttribute('aria-label', 'Highlighted');
+    });
+
+    it('applies aria-label to strikethrough tags', () => {
+      render(
+        <Markup>
+          {'<strikethrough accessibilityLabel="No longer valid">old price</strikethrough>'}
+        </Markup>,
+      );
+      expect(screen.getByText('old price')).toHaveAttribute('aria-label', 'No longer valid');
+    });
+
+    it('applies aria-label to link tags with href', () => {
+      render(
+        <Markup>
+          {'<link href="/settings" accessibilityLabel="Go to account settings">settings</link>'}
+        </Markup>,
+      );
+      const link = screen.getByRole('link', { name: 'Go to account settings' });
+      expect(link).toBeInTheDocument();
+    });
+
+    it('applies aria-label to button-mode link tags', () => {
+      const handler = jest.fn();
+      render(
+        <Markup actions={{ save: handler }}>
+          {'<link action="save" accessibilityLabel="Save your changes">Save</link>'}
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: 'Save your changes' })).toBeInTheDocument();
+    });
+
+    it('does not apply aria-label to paragraph tags', () => {
+      render(<Markup>{'<paragraph accessibilityLabel="ignored">content</paragraph>'}</Markup>);
+      const element = screen.getByText('content');
+      expect(element.tagName).toBe('P');
+      expect(element).not.toHaveAttribute('aria-label');
+    });
+
+    it('does not render aria-label attribute when not provided', () => {
+      render(<Markup>{'<strong>plain bold</strong>'}</Markup>);
+      expect(screen.getByText('plain bold')).not.toHaveAttribute('aria-label');
+    });
+  });
+
+  describe('security', () => {
+    it('does not render script tags', () => {
+      const { container } = render(<Markup>{'<script>alert("xss")</script>'}</Markup>);
+      expect(container.querySelector('script')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('<script>alert("xss")</script>');
+    });
+  });
+
+  describe('data prop (placeholder substitution)', () => {
+    it('substitutes a single placeholder', () => {
+      render(<Markup data={{ name: 'John' }}>{'Hello, {{name}}!'}</Markup>);
+      expect(screen.getByText('Hello, John!')).toBeInTheDocument();
+    });
+
+    it('substitutes multiple placeholders', () => {
+      render(
+        <Markup data={{ amount: '£35.00', recipient: 'Alice' }}>
+          {'You sent {{amount}} to {{recipient}}'}
+        </Markup>,
+      );
+      expect(screen.getByText('You sent £35.00 to Alice')).toBeInTheDocument();
+    });
+
+    it('leaves unmatched placeholders as literal text', () => {
+      render(<Markup data={{ name: 'John' }}>{'Hello, {{name}}! Your code is {{code}}'}</Markup>);
+      expect(screen.getByText('Hello, John! Your code is {{code}}')).toBeInTheDocument();
+    });
+
+    it('converts numeric values to strings', () => {
+      render(<Markup data={{ count: 42 }}>{'You have {{count}} items'}</Markup>);
+      expect(screen.getByText('You have 42 items')).toBeInTheDocument();
+    });
+
+    it('substitutes placeholders inside nested markup', () => {
+      render(<Markup data={{ price: '£35.00' }}>{'Total: <strong>{{price}}</strong>'}</Markup>);
+      const strong = screen.getByText('£35.00');
+      expect(strong.tagName).toBe('STRONG');
+    });
+
+    it('renders without data prop (placeholders remain literal)', () => {
+      render(<Markup>{'Hello, {{name}}!'}</Markup>);
+      expect(screen.getByText('Hello, {{name}}!')).toBeInTheDocument();
+    });
+
+    it('does not parse markup tags inside data values', () => {
+      const { container } = render(
+        <Markup data={{ name: '<link href="https://evil.com">click</link>' }}>
+          {'Hello, {{name}}!'}
+        </Markup>,
+      );
+      expect(container.querySelector('a')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('Hello, <link href="https://evil.com">click</link>!');
+    });
+
+    it('does not parse emphasis tags inside data values', () => {
+      const { container } = render(
+        <Markup data={{ value: '<strong>injected</strong>' }}>{'Result: {{value}}'}</Markup>,
+      );
+      expect(container.querySelector('strong')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent('Result: <strong>injected</strong>');
+    });
+
+    it('does not allow data values to break out of parent tags', () => {
+      const { container } = render(
+        <Markup data={{ price: '</strong><link href="https://evil.com">phish</link><strong>' }}>
+          {'Price: <strong>{{price}}</strong>'}
+        </Markup>,
+      );
+      expect(container.querySelector('a')).not.toBeInTheDocument();
+      const strong = container.querySelector('strong');
+      expect(strong).toHaveTextContent(
+        '</strong><link href="https://evil.com">phish</link><strong>',
+      );
+    });
+
+    it('substitutes the same placeholder used multiple times', () => {
+      render(
+        <Markup data={{ item: 'widget' }}>{'Buy a {{item}}! Everyone loves a {{item}}.'}</Markup>,
+      );
+      expect(screen.getByText('Buy a widget! Everyone loves a widget.')).toBeInTheDocument();
+    });
+  });
+
+  describe('allowLinks', () => {
+    it('renders root-relative links by default (internal mode)', () => {
+      render(<Markup>{'<link href="/settings">settings</link>'}</Markup>);
+      expect(screen.getByRole('link', { name: /settings/ })).toHaveAttribute('href', '/settings');
+    });
+
+    it('renders wise.com links by default (internal mode)', () => {
+      render(<Markup>{'<link href="https://wise.com/help">help</link>'}</Markup>);
+      expect(screen.getByRole('link', { name: /help/ })).toHaveAttribute(
+        'href',
+        'https://wise.com/help',
+      );
+    });
+
+    it('blocks external domains by default (internal mode)', () => {
+      render(<Markup>{'<link href="https://example.com">external</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('external')).toBeInTheDocument();
+    });
+
+    it('allows external domains when set to "all"', () => {
+      render(
+        <Markup allowLinks="all">{'<link href="https://example.com">external</link>'}</Markup>,
+      );
+      expect(screen.getByRole('link', { name: /external/ })).toHaveAttribute(
+        'href',
+        'https://example.com',
+      );
+    });
+
+    it('blocks all links when set to "none"', () => {
+      render(<Markup allowLinks="none">{'<link href="/settings">settings</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('settings')).toBeInTheDocument();
+    });
+
+    it('does not bypass base sanitisation even in "all" mode', () => {
+      render(<Markup allowLinks="all">{'<link href="javascript:alert(1)">xss</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('does not affect action-based links in "none" mode', () => {
+      const handleClick = jest.fn();
+      render(
+        <Markup allowLinks="none" actions={{ save: handleClick }}>
+          {'<link action="save">save</link>'}
+        </Markup>,
+      );
+      expect(screen.getByRole('button', { name: /save/ })).toBeInTheDocument();
+    });
+
+    it('blocks root-relative paths that resolve to a different origin via URL parser', () => {
+      render(<Markup>{'<link href="/\\evil.com">sneaky</link>'}</Markup>);
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(screen.getByText('sneaky')).toBeInTheDocument();
+    });
+  });
+});