fix: open signature links in a new tab instead of navigating the app away
Signatures render into the main document - the identity form's live preview and the composer's signature block - rather than the sandboxed iframe used for message bodies. SIGNATURE_SANITIZE_CONFIG allows no target attribute, so those anchors were live and target-less: one click navigated the whole app away, discarding the unsent draft or the unsaved signature with it. Add sanitizeSignatureHtmlForDisplay, which keeps the storage sanitizer's image restrictions but forces target="_blank" rel="noopener noreferrer" on every anchor, and use it at the two render sites. The composer's SignatureBlock NodeView stamps the target on its rendered DOM instead, because attrs.html is what serializeEditorContent emits into the sent message - storage and the recipient's copy stay exactly as the user wrote them.
This commit is contained in:
@@ -3,6 +3,7 @@ import DOMPurify from 'dompurify';
|
||||
import {
|
||||
sanitizeEmailHtml,
|
||||
sanitizeSignatureHtml,
|
||||
sanitizeSignatureHtmlForDisplay,
|
||||
parseHtmlSafely,
|
||||
hasRichFormatting,
|
||||
plainTextToSafeHtml,
|
||||
@@ -582,6 +583,43 @@ describe('email-sanitization', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('sanitizeSignatureHtmlForDisplay', () => {
|
||||
// Signatures render into the main document (identity-form preview, composer
|
||||
// block), not the sandboxed iframe, so a target-less anchor navigates the
|
||||
// whole app away and takes the unsaved draft/signature with it.
|
||||
it('forces target=_blank and rel on signature links', () => {
|
||||
const clean = sanitizeSignatureHtmlForDisplay('<p><a href="https://example.com">Site</a></p>');
|
||||
expect(clean).toContain('target="_blank"');
|
||||
expect(clean).toContain('rel="noopener noreferrer"');
|
||||
});
|
||||
|
||||
it('overrides a target the user supplied themselves', () => {
|
||||
const clean = sanitizeSignatureHtmlForDisplay('<a href="https://example.com" target="_top">x</a>');
|
||||
expect(clean).toContain('target="_blank"');
|
||||
expect(clean).not.toContain('_top');
|
||||
});
|
||||
|
||||
it('keeps the image restrictions of the storage sanitizer', () => {
|
||||
const clean = sanitizeSignatureHtmlForDisplay(
|
||||
'<img src="http://insecure.example.com/l.png"><img src="https://cdn.example.com/l.png">',
|
||||
);
|
||||
expect(clean).not.toContain('insecure.example.com');
|
||||
expect(clean).toContain('https://cdn.example.com/l.png');
|
||||
});
|
||||
|
||||
it('does not leak target into the stored or sent signature', () => {
|
||||
// sanitizeSignatureHtml feeds both storage and the outgoing message body.
|
||||
const stored = sanitizeSignatureHtml('<p><a href="https://example.com">Site</a></p>');
|
||||
expect(stored).toContain('href="https://example.com"');
|
||||
expect(stored).not.toContain('target=');
|
||||
});
|
||||
|
||||
it('handles empty input', () => {
|
||||
expect(sanitizeSignatureHtmlForDisplay('')).toBe('');
|
||||
expect(sanitizeSignatureHtmlForDisplay(' ')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sanitizePlainTextRenderedHtml', () => {
|
||||
// This branch renders into the main document, not the sandboxed iframe, so
|
||||
// an anchor that loses target="_blank" navigates the whole app away.
|
||||
|
||||
@@ -79,26 +79,61 @@ export const SIGNATURE_SANITIZE_CONFIG = {
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
|
||||
};
|
||||
|
||||
/** Drop images whose src isn't https: or a base64 raster data: URI. */
|
||||
function restrictSignatureImages(node: Element): void {
|
||||
if (node.tagName !== 'IMG') return;
|
||||
const src = node.getAttribute('src');
|
||||
if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
|
||||
node.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sanitize HTML signature for storage and display.
|
||||
* Sanitize an HTML signature for storage and for the outgoing message.
|
||||
* img src is restricted to https: or base64-embedded raster data: URIs
|
||||
* (png/jpeg/gif/webp). SVG is excluded because DOMPurify cannot inspect
|
||||
* bytes inside a data: URI. Images with a disallowed src are removed
|
||||
* entirely so they don't render as broken-image icons.
|
||||
*
|
||||
* Deliberately does NOT force target="_blank": what we store, and what the
|
||||
* recipient receives, should stay as the user wrote it. Use
|
||||
* `sanitizeSignatureHtmlForDisplay` for anything rendered in our own DOM.
|
||||
* @param html - User-provided HTML signature
|
||||
* @returns Sanitized signature (no scripts, no external resources)
|
||||
*/
|
||||
export function sanitizeSignatureHtml(html: string): string {
|
||||
if (!html?.trim()) return '';
|
||||
DOMPurify.addHook('afterSanitizeAttributes', restrictSignatureImages);
|
||||
try {
|
||||
return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
|
||||
} finally {
|
||||
DOMPurify.removeAllHooks();
|
||||
}
|
||||
}
|
||||
|
||||
const SIGNATURE_DISPLAY_CONFIG = {
|
||||
...SIGNATURE_SANITIZE_CONFIG,
|
||||
ALLOWED_ATTR: [...SIGNATURE_SANITIZE_CONFIG.ALLOWED_ATTR, 'target', 'rel'],
|
||||
};
|
||||
|
||||
/**
|
||||
* Sanitize an HTML signature for rendering inside our own DOM — the identity
|
||||
* form's live preview and the composer's signature block. Both inject into the
|
||||
* main document rather than the sandboxed iframe used for message bodies, so a
|
||||
* link without target="_blank" navigates the whole app away, taking any unsent
|
||||
* draft or unsaved signature with it. Force every anchor to open a new tab.
|
||||
*/
|
||||
export function sanitizeSignatureHtmlForDisplay(html: string): string {
|
||||
if (!html?.trim()) return '';
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
|
||||
if (node.tagName !== 'IMG') return;
|
||||
const src = node.getAttribute('src');
|
||||
if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
|
||||
node.remove();
|
||||
restrictSignatureImages(node);
|
||||
if (node.tagName === 'A') {
|
||||
node.setAttribute('target', '_blank');
|
||||
node.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
});
|
||||
try {
|
||||
return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
|
||||
return DOMPurify.sanitize(html, SIGNATURE_DISPLAY_CONFIG);
|
||||
} finally {
|
||||
DOMPurify.removeAllHooks();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user