@postalsys/email-text-tools 2.4.23 → 2.4.24

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-    ".": "2.4.23"
+    ".": "2.4.24"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.4.24](https://github.com/postalsys/email-text-tools/compare/v2.4.23...v2.4.24) (2026-10-18)
+
+
+### Bug Fixes
+
+* contain painting in the outer wrapper too ([d1a8f9b](https://github.com/postalsys/email-text-tools/commit/d1a8f9bf2dd4fcad7adb983c243c524703cad79f))
+
 ## [2.4.23](https://github.com/postalsys/email-text-tools/compare/v2.4.22...v2.4.23) (2026-10-18)
 
 

package/README.md

@@ -14,7 +14,7 @@ Email text tools
 - SVG and MathML (DOMPurify runs with the `html` profile only): the namespace confusion between the three is where most sanitizer bypasses have come from, and mail has no use for either
 - `width`, `min-width`, `max-width`, `height`, `min-height` and `max-height` from the body's own style, which would otherwise size the container the host gave the message
 
-The output is two wrappers: an outer `<div style="overflow: auto;">` that is never given anything else, and inside it a `<div>` carrying the sanitized styles of the message body. Everything the body does (its margins, a `display: contents`, a box-shadow) is clipped by the outer element, and `position` is forbidden on every element because it is the one property that escapes an overflow clip. Every `a` and `area` gets `target="_blank" rel="noopener noreferrer"`, whatever `rel` it came with.
+The output is two wrappers: an outer `<div style="overflow: auto; contain: paint;">` that is never given anything else, and inside it a `<div>` carrying the sanitized styles of the message body. Everything the body does (its margins, a `display: contents`, a box-shadow) is clipped by the outer element. `position` is forbidden on every element because it is the one property that escapes an overflow clip, and the paint containment makes the outer element the containing block of a fixed or absolute descendant in case one slips through. Every `a` and `area` gets `target="_blank" rel="noopener noreferrer"`, whatever `rel` it came with.
 
 Markup without a `<style>` start tag is sanitized once; the first pass exists to find and filter the stylesheets before they are inlined.
 

package/lib/mime-html.js

@@ -72,12 +72,14 @@ const FORBID_STYLES = [
     'zoom'
 ];
 
-// Matches the style text of any element that could carry one of FORBID_STYLES
-const FORBID_STYLES_HINT = /position|float|clip|zoom|anim|offset|scrollbar|paint|clear|\ball\b/i;
+// Properties to remove from style attributes: the list, a cheap test for style text that could
+// name one of them, and a test for one of them in declaration position (at the start, or after any
+// character that cannot be part of a longer property name, so "background-position" is not one)
+function styleRule(properties, hint) {
+    return { properties, hint, declaration: new RegExp('(?:^|[^a-z0-9-])(?:' + properties.join('|') + ')\\s*:', 'i') };
+}
 
-// A forbidden property in declaration position: at the start, or after any character that cannot
-// be part of a longer property name, so "background-position" is not one
-const FORBID_STYLES_DECLARATION = new RegExp('(?:^|[^a-z0-9-])(?:' + FORBID_STYLES.join('|') + ')\\s*:', 'i');
+const FORBID_STYLES_RULE = styleRule(FORBID_STYLES, /position|float|clip|zoom|anim|offset|scrollbar|paint|clear|\ball\b/i);
 
 // Resolves CSS escape sequences (\6F, \o) the way a browser does before it matches a property
 // name, so that a forbidden property cannot hide behind an escaped character
@@ -105,11 +107,10 @@ const USE_PROFILES = { html: true };
 // very end of the input is dropped by the parser, so markup this does not match has no stylesheet.
 const STYLE_TAG = /<style[\s/>]/i;
 
-// The dimensions a body may carry. They end up on the element the message is wrapped in, where
-// a width or a height would size the box the host gave the message rather than the message.
-const BODY_FORBID_STYLES = ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'];
-const BODY_FORBID_STYLES_HINT = /width|height/i;
-const BODY_FORBID_STYLES_DECLARATION = new RegExp('(?:^|[^a-z0-9-])(?:' + BODY_FORBID_STYLES.join('|') + ')\\s*:', 'i');
+// The dimensions of the body. In mail they are page-layout leftovers ("width: 100%; height: 100%",
+// "min-height: 100vh") that would only pad or scroll the box the message is shown in, and they
+// were removed when the body was the outermost element, which consumers may rely on.
+const BODY_STYLES_RULE = styleRule(['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'], /width|height/i);
 
 // One sanitizer for the module. Every sanitize() call passes its full config, so calls do not
 // leak settings into each other.
@@ -392,13 +393,13 @@ function prepareHtml(message) {
     return { html: root.outerHTML, hasStyle, inliningSkipped };
 }
 
-// Removes the named style properties from an element the way a browser will read them, by the
+// Removes the properties of a style rule from an element the way a browser will read them, by the
 // CSSOM first and then by the attribute text the CSSOM did not parse.
-function removeStyleProperties(node, properties, hint, declaration) {
-    if (!hint.test(node.getAttribute('style') || '')) {
+function removeStyleProperties(node, rule) {
+    if (!rule.hint.test(node.getAttribute('style') || '')) {
         return;
     }
-    for (const property of properties) {
+    for (const property of rule.properties) {
         node.style.removeProperty(property);
     }
     // removeProperty() rewrites the attribute from the CSSOM, which only holds the declarations
@@ -408,7 +409,7 @@ function removeStyleProperties(node, properties, hint, declaration) {
     // declarations, a browser reads every one of them. Keep only what the CSSOM parsed, which may
     // be nothing
     const remaining = node.getAttribute('style') || '';
-    if (declaration.test(remaining)) {
+    if (rule.declaration.test(remaining)) {
         const parsed = node.style.cssText;
         if (parsed) {
             node.setAttribute('style', parsed);
@@ -453,23 +454,24 @@ function finishHtml(html, inliningSkipped) {
             // decoded text back so the CSSOM sees the same properties the browser will
             node.setAttribute('style', decodeCssEscapes(styleText));
         }
-        removeStyleProperties(node, FORBID_STYLES, FORBID_STYLES_HINT, FORBID_STYLES_DECLARATION);
+        removeStyleProperties(node, FORBID_STYLES_RULE);
     }
-    removeStyleProperties(dom, BODY_FORBID_STYLES, BODY_FORBID_STYLES_HINT, BODY_FORBID_STYLES_DECLARATION);
+    removeStyleProperties(dom, BODY_STYLES_RULE);
 
-    const bodyStyles = (dom.getAttribute('style') || '').toString().trim();
+    const bodyStyles = (dom.getAttribute('style') || '').trim();
 
     // Two wrappers. The outer one is ours alone and clips everything inside it; the inner one is
     // the message body with the styles it came with. While the body's styles sat on the clipping
     // element, a sender could undo the clipping (display: contents or inline, an overflow-x:
     // visible written after our overflow) or move the element itself over the page around it (a
     // negative margin, a box-shadow or an outline a few thousand pixels wide). Position is the
-    // one property that escapes an overflow clip, and it is forbidden above; whatever else a
-    // descendant does stays inside the outer box. The attribute tells the caller the CSS inlining
-    // caps were hit
+    // one property that escapes an overflow clip, and it is forbidden above; paint containment
+    // makes the outer box the containing block of a fixed or absolute descendant as well, so a
+    // position that slipped past the filter would still be clipped by it. The attribute tells
+    // the caller the CSS inlining caps were hit
     const marker = inliningSkipped ? ' data-css-inlining="skipped"' : '';
     const body = bodyStyles ? `<div style="${he.encode(bodyStyles)}">` : '<div>';
-    return `<div style="overflow: auto;"${marker}>${body}${dom.innerHTML.trim()}</div></div>`;
+    return `<div style="overflow: auto; contain: paint;"${marker}>${body}${dom.innerHTML.trim()}</div></div>`;
 }
 
 // Runs the pipeline and renders the plain text fallback when it fails, for example when a

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@postalsys/email-text-tools",
-    "version": "2.4.23",
+    "version": "2.4.24",
     "description": "Email text tools",
     "main": "index.js",
     "scripts": {

package/test/containment.test.js

@@ -9,7 +9,7 @@ const { mimeHtml } = require('..');
 
 describe('container', () => {
     it('wraps a message with no body styles in a bare inner element', () => {
-        assert.equal(mimeHtml({ html: '<p>x</p>' }), '<div style="overflow: auto;"><div><p>x</p></div></div>');
+        assert.equal(mimeHtml({ html: '<p>x</p>' }), '<div style="overflow: auto; contain: paint;"><div><p>x</p></div></div>');
     });
 
     it('keeps the body styles off the clipping wrapper', () => {
@@ -17,9 +17,8 @@ describe('container', () => {
             '<html><body style="display: contents; margin: -500px; overflow: visible; overflow-x: visible; box-shadow: 0 0 0 9999px red; outline: 9999px solid red; color: red">' +
             '<div style="transform: translateY(-300px)">x</div></body></html>';
         const out = mimeHtml({ html });
-        assert.ok(out.startsWith('<div style="overflow: auto;"><div style="'), out);
         assert.ok(out.endsWith('</div></div>'), out);
-        const inner = /^<div style="overflow: auto;"><div style="([^"]*)">/.exec(out)[1];
+        const inner = /^<div style="overflow: auto; contain: paint;"><div style="([^"]*)">/.exec(out)[1];
         assert.match(inner, /display: contents/);
         assert.match(inner, /margin: -500px/);
         assert.match(inner, /color: red/);
@@ -29,7 +28,7 @@ describe('container', () => {
     it('puts a body rule from the stylesheet on the inner element too', () => {
         const html = '<html><head><style>body { display: contents; margin: -200px; } p { color: red; }</style></head><body><p>x</p></body></html>';
         const out = mimeHtml({ html });
-        assert.ok(out.startsWith('<div style="overflow: auto;"><div style="'), out);
+        assert.ok(out.startsWith('<div style="overflow: auto; contain: paint;"><div style="'), out);
         assert.match(out, /display: contents/);
         assert.match(out, /color: red/);
     });
@@ -46,8 +45,7 @@ describe('container', () => {
     it('drops a body width the CSSOM could not parse', () => {
         // cssstyle parses nothing from this attribute, a browser reads the width
         const out = mimeHtml({ html: '<html><body style="background:url(https://example.com/x.gif) no-repeat; width: 5000px">x</body></html>' });
-        assert.doesNotMatch(out, /width/);
-        assert.equal(out, '<div style="overflow: auto;"><div>x</div></div>');
+        assert.equal(out, '<div style="overflow: auto; contain: paint;"><div>x</div></div>');
     });
 
     it('keeps body styles the CSSOM could not parse when none of them is forbidden', () => {
@@ -70,7 +68,7 @@ describe('container', () => {
             css += `.c${i} { color: red; }\n`;
         }
         const out = mimeHtml({ html: `<html><head><style>${css}</style></head><body style="color: blue"><p class="c1">x</p></body></html>` });
-        assert.ok(out.startsWith('<div style="overflow: auto;" data-css-inlining="skipped"><div style="color: blue">'), out.slice(0, 120));
+        assert.ok(out.startsWith('<div style="overflow: auto; contain: paint;" data-css-inlining="skipped"><div style="color: blue">'), out.slice(0, 120));
     });
 });
 
@@ -109,7 +107,7 @@ describe('single sanitization pass for markup without a stylesheet', () => {
         const out = mimeHtml({
             html: '<p onclick="x()">a</p><script>alert(1)</script><a href="javascript:alert(1)">b</a><iframe src="https://example.com/"></iframe>'
         });
-        assert.equal(out, '<div style="overflow: auto;"><div><p>a</p><a target="_blank" rel="noopener noreferrer">b</a></div></div>');
+        assert.equal(out, '<div style="overflow: auto; contain: paint;"><div><p>a</p><a target="_blank" rel="noopener noreferrer">b</a></div></div>');
     });
 
     for (const [label, tag, close] of [
@@ -125,6 +123,6 @@ describe('single sanitization pass for markup without a stylesheet', () => {
 
     it('leaves a style tag that is only text alone', () => {
         const out = mimeHtml({ html: '<p>write &lt;style&gt; to add rules</p>' });
-        assert.equal(out, '<div style="overflow: auto;"><div><p>write &lt;style&gt; to add rules</p></div></div>');
+        assert.equal(out, '<div style="overflow: auto; contain: paint;"><div><p>write &lt;style&gt; to add rules</p></div></div>');
     });
 });

package/test/hardening.test.js

@@ -257,7 +257,7 @@ describe('hostile input hardening', () => {
     });
 
     describe('CSS inlining caps', () => {
-        const SKIPPED_PREFIX = '<div style="overflow: auto;" data-css-inlining="skipped">';
+        const SKIPPED_PREFIX = '<div style="overflow: auto; contain: paint;" data-css-inlining="skipped">';
 
         function styled(css, body) {
             return `<html><head><style>${css}</style></head><body>${body}</body></html>`;
@@ -298,7 +298,7 @@ describe('hostile input hardening', () => {
             // rules nested in a media query are not matched against elements and do not count
             const css = `${rules(2000)}p.x { color: blue; }\n@media screen { ${rules(4000)} }`;
             const result = mimeHtml({ html: styled(css, '<p class="x">y</p>'.repeat(2000)) });
-            assert.ok(result.startsWith('<div style="overflow: auto;"><div><p'), result.slice(0, 80));
+            assert.ok(result.startsWith('<div style="overflow: auto; contain: paint;"><div><p'), result.slice(0, 80));
             assert.match(result, /color: blue/);
         });
 
@@ -451,7 +451,7 @@ describe('hostile input hardening', () => {
             assert.equal(afterText, false);
             assert.equal(afterMime, true);
             assert.equal(asyncType, 'function');
-            assert.equal(out, '<div style="overflow: auto;"><div><p>x</p></div></div>');
+            assert.equal(out, '<div style="overflow: auto; contain: paint;"><div><p>x</p></div></div>');
         });
 
         it('keeps mimeHtml enumerable and destructurable', () => {