@akinon/pz-theme 2.0.164-rc.1 → 2.0.165-beta.0

package/src/utils/__tests__/svg-image-source.test.ts

@@ -0,0 +1,123 @@
+import { MAX_INLINE_SVG_LENGTH, toSafeImageSource } from '../svg-image-source';
+
+/**
+ * Settings SVG (page-up icon, social icons) reaches the storefront
+ * only as an `<img src>`. These pin which values may become a source and how
+ * markup is encoded.
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+describe('toSafeImageSource', () => {
+  const SVG =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 15l7.5-7.5 7.5 7.5"/></svg>';
+
+  it('wraps SVG markup in a percent-encoded data URI', () => {
+    const source = toSafeImageSource(SVG);
+
+    expect(source).toBe(
+      `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SVG)}`
+    );
+    // Nothing that could close the attribute or start markup survives raw.
+    expect(source).not.toMatch(/[<>"#]/);
+  });
+
+  it('wraps markup that starts with an XML declaration, trimmed', () => {
+    const markup = `<?xml version="1.0"?>${SVG}`;
+
+    expect(toSafeImageSource(`  ${markup}\n`)).toBe(
+      `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`
+    );
+  });
+
+  it('keeps hostile markup inert by encoding it, never by passing it through', () => {
+    const hostile =
+      '<svg onload="alert(1)"><script>alert(2)</script><foreignObject><img src=x onerror=alert(3)></foreignObject></svg>';
+    const source = toSafeImageSource(hostile)!;
+
+    expect(source.startsWith('data:image/svg+xml;charset=utf-8,')).toBe(true);
+    expect(source).not.toContain('<script');
+    expect(decodeURIComponent(source.split(',')[1])).toBe(
+      hostile.replace('<svg', `<svg xmlns="${SVG_NS}"`)
+    );
+  });
+
+  // An SVG document loaded as an image draws nothing without its namespace,
+  // while the same markup injected as HTML (the editor's tile) shows fine.
+  it('adds the SVG namespace to a root that lacks one', () => {
+    const decoded = (markup: string) =>
+      decodeURIComponent(toSafeImageSource(markup)!.split(',')[1]);
+
+    expect(decoded('<svg viewBox="0 0 24 24"><path d="M0 0"/></svg>')).toBe(
+      `<svg xmlns="${SVG_NS}" viewBox="0 0 24 24"><path d="M0 0"/></svg>`
+    );
+    expect(decoded('<svg><path d="M0 0"/></svg>')).toBe(
+      `<svg xmlns="${SVG_NS}"><path d="M0 0"/></svg>`
+    );
+    // A prefixed declaration is not the default namespace.
+    expect(
+      decoded(
+        '<svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#a"/></svg>'
+      )
+    ).toBe(
+      `<svg xmlns="${SVG_NS}" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#a"/></svg>`
+    );
+    expect(decoded('<?xml version="1.0"?>\n<svg width="24">x</svg>')).toBe(
+      `<?xml version="1.0"?>\n<svg xmlns="${SVG_NS}" width="24">x</svg>`
+    );
+  });
+
+  it('leaves a root that already declares the namespace alone', () => {
+    const nested = `<svg xmlns="${SVG_NS}"><svg viewBox="0 0 1 1"/></svg>`;
+    expect(decodeURIComponent(toSafeImageSource(nested)!.split(',')[1])).toBe(
+      nested
+    );
+    expect(toSafeImageSource(SVG)).toBe(
+      `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SVG)}`
+    );
+  });
+
+  it('ignores markup larger than the cap', () => {
+    const big = `<svg>${'x'.repeat(MAX_INLINE_SVG_LENGTH)}</svg>`;
+
+    expect(toSafeImageSource(big)).toBeNull();
+  });
+
+  it.each([
+    ['https://cdn.example.com/icons/up.svg'],
+    ['http://cdn.example.com/up.png'],
+    ['HTTPS://CDN.EXAMPLE.COM/UP.SVG'],
+    ['/static/up.svg'],
+    ['data:image/png;base64,iVBORw0KGgo='],
+    ['data:image/svg+xml;base64,PHN2Zy8+'],
+    ['data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"/>']
+  ])('accepts the image URL %s as it is', (url) => {
+    expect(toSafeImageSource(url)).toBe(url);
+  });
+
+  it.each([
+    ['javascript:alert(1)'],
+    ['JaVaScRiPt:alert(1)'],
+    ['vbscript:msgbox(1)'],
+    ['data:text/html,<script>alert(1)</script>'],
+    ['data:application/javascript,alert(1)'],
+    ['//evil.example/up.svg'],
+    ['/\\evil.example/up.svg'],
+    ['/\t/evil.example/up.svg'],
+    ['https://cdn.example.com/a b.svg'],
+    ['https://'],
+    ['up-arrow'],
+    ['icons/up.svg'],
+    ['']
+  ])('rejects %j', (value) => {
+    expect(toSafeImageSource(value)).toBeNull();
+  });
+
+  it('rejects anything that is not a string', () => {
+    expect(toSafeImageSource(undefined)).toBeNull();
+    expect(toSafeImageSource(null)).toBeNull();
+    expect(toSafeImageSource(42)).toBeNull();
+    expect(
+      toSafeImageSource({ url: 'https://cdn.example.com/up.svg' })
+    ).toBeNull();
+  });
+});