59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
 
|
import { describe, test, expect } from 'vitest';
|
||
|
|
import { BackgroundSection } from './BackgroundSection';
|
||
|
|
|
||
|
|
const toHtml = (BackgroundSection as any).toHtml;
|
||
|
|
|
||
|
|
describe('BackgroundSection.toHtml anchorId', () => {
|
||
|
|
test('escapes a malicious anchorId (attribute breakout attempt)', () => {
|
||
|
|
const { html } = toHtml({ anchorId: 'x" onmouseover="alert(1)' }, 'child');
|
||
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a normal anchorId still renders correctly', () => {
|
||
|
|
const { html } = toHtml({ anchorId: 'my-bg-section' }, 'child');
|
||
|
|
expect(html).toContain('id="my-bg-section"');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('BackgroundSection.toHtml style-value XSS hardening', () => {
|
||
|
|
test('a malicious bgImage cannot break out of the outer style attribute via url(...)', () => {
|
||
|
|
const malicious = 'javascript:alert(1)) foo{background:red}</style><script>alert(1)</script';
|
||
|
|
const { html } = toHtml({ bgImage: malicious }, 'child');
|
||
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
||
|
|
expect(html).not.toContain('javascript:alert(1)');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a malicious bgColor cannot break out of the outer style attribute', () => {
|
||
|
|
const malicious = 'red" onmouseover="alert(1)';
|
||
|
|
const { html } = toHtml({ bgColor: malicious }, 'child');
|
||
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a malicious overlayColor cannot break out of the overlay style attribute', () => {
|
||
|
|
const malicious = 'red" onmouseover="alert(1)';
|
||
|
|
const { html } = toHtml({ overlayColor: malicious }, 'child');
|
||
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a wrong-typed overlayOpacity (string, not number) cannot break out of the overlay style attribute', () => {
|
||
|
|
const malicious = '0.4" onmouseover="alert(1)' as any;
|
||
|
|
const { html } = toHtml({ overlayOpacity: malicious }, 'child');
|
||
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a malicious innerMaxWidth cannot break out of the inner style attribute', () => {
|
||
|
|
const malicious = '1200px" onmouseover="alert(1)';
|
||
|
|
const { html } = toHtml({ innerMaxWidth: malicious }, 'child');
|
||
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('normal props still render correctly', () => {
|
||
|
|
const { html } = toHtml({ bgImage: 'https://example.com/bg.jpg', bgColor: '#1e293b', overlayColor: '#000000', overlayOpacity: 0.4, innerMaxWidth: '1200px' }, 'child');
|
||
|
|
expect(html).toContain("url('https://example.com/bg.jpg')");
|
||
|
|
expect(html).toContain('background-color:#1e293b');
|
||
|
|
expect(html).toContain('opacity:0.4');
|
||
|
|
expect(html).toContain('max-width:1200px');
|
||
|
|
expect(html).toContain('child');
|
||
|
|
});
|
||
|
|
});
|