63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
|
import { describe, test, expect } from 'vitest';
|
||
|
|
import { Logo } from './Logo';
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Regression coverage for Logo.toHtml -- audited during the toHtml
|
||
|
|
* attribute-XSS sweep (see task-cssxss-brief.md) and found already fully
|
||
|
|
* sanitized (href/src via escapeAttr(safeUrl()), alt/text via escapeAttr /
|
||
|
|
* escapeHtml, imageWidth/fontSize/etc. routed through cssPropsToString which
|
||
|
|
* sanitizes every value regardless of declared type). No fix was required;
|
||
|
|
* these tests lock that behavior in against regressions.
|
||
|
|
*/
|
||
|
|
const toHtml = (Logo as any).toHtml;
|
||
|
|
|
||
|
|
describe('Logo.toHtml href sanitization (attacker-controlled `href` prop)', () => {
|
||
|
|
test('a javascript: URL is neutralized', () => {
|
||
|
|
const { html } = toHtml({ href: 'javascript:alert(1)' }, '');
|
||
|
|
expect(html).not.toContain('javascript:alert');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a quote-breakout href does not escape the anchor attribute', () => {
|
||
|
|
const malicious = '"><script>alert(1)</script>';
|
||
|
|
const { html } = toHtml({ href: malicious }, '');
|
||
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Logo.toHtml image src/alt sanitization (type="image")', () => {
|
||
|
|
test('a javascript: imageSrc is neutralized', () => {
|
||
|
|
const { html } = toHtml({ type: 'image', imageSrc: 'javascript:alert(1)', text: 'Logo' }, '');
|
||
|
|
expect(html).not.toContain('javascript:alert');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a quote-breakout alt (from `text`) does not escape the img attribute', () => {
|
||
|
|
const malicious = '"><script>alert(1)</script>';
|
||
|
|
const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', text: malicious }, '');
|
||
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a non-numeric imageWidth (attribute-breakout attempt) does not escape the style attribute', () => {
|
||
|
|
const malicious = '1"><script>alert(1)</script>';
|
||
|
|
const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', imageWidth: malicious }, '');
|
||
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Logo.toHtml text-logo styling sanitization', () => {
|
||
|
|
test('a quote-breakout color does not escape the span style attribute', () => {
|
||
|
|
const malicious = 'red" onmouseover="alert(1)';
|
||
|
|
const { html } = toHtml({ type: 'text', text: 'MySite', color: malicious }, '');
|
||
|
|
// The raw `"` must never survive un-escaped inside the style attribute
|
||
|
|
// value -- if it did, `onmouseover` would land as a REAL new HTML
|
||
|
|
// attribute (breakout) rather than being inert CSS-value garbage inside
|
||
|
|
// a properly-escaped style="...".
|
||
|
|
expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a normal logo renders as expected', () => {
|
||
|
|
const { html } = toHtml({ type: 'text', text: 'MySite', href: '/' }, '');
|
||
|
|
expect(html).toContain('href="/"');
|
||
|
|
expect(html).toContain('MySite');
|
||
|
|
});
|
||
|
|
});
|