Fixed: Order view page CSS leak from embedded email communication content (OFBIZ-13390) (#1213)

toaditi · claude · web-flow · commit 9659f494aa5a · 2026-05-16T14:15:43.000+05:30
## Summary

When a `CommunicationEvent` exists on an order, the `OrderConversations`
screen dumps the stored email HTML (a full `&lt;!DOCTYPE html&gt;` document,
with its own `&lt;style&gt;` block containing a global CSS reset) directly
inline into the order view page. Browsers parse that `&lt;style&gt;` at
document scope — not div scope — so the email's reset cascades into the
parent page and breaks the order layout: tables lose padding, the body
background changes, `.screenlet` styling is overridden, etc.

## Fix

Render the email body inside an `&lt;iframe&gt;` so its CSS lives in its own
document context and cannot leak. The stored content is
HTML-entity-encoded, so it's decoded client-side via a `&lt;textarea&gt;`
before being assigned to `srcdoc`.

One file changed:
`applications/party/template/party/DisplayCommunicationContent.ftl`.

## Test plan

- [ ] Open an order that has at least one communication event (e.g. send
an order confirmation email, then revisit the order view).
- [ ] Expand the "All Communication Events" section.
- [ ] Verify the email body renders inside a bordered iframe with the
email's own styling (heading, cards, items table).
- [ ] Verify the parent order view page styling is unaffected — tables,
padding, screenlets all render normally.
- [ ] Verify the iframe auto-resizes to fit the email content (`onload`
handler).

Co-authored-by: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/applications/party/template/party/DisplayCommunicationContent.ftl b/applications/party/template/party/DisplayCommunicationContent.ftl
@@ -18,7 +18,22 @@ under the License.
 -->
 
 
-<#-- Display content in a specific div to avoid display conflicts -->
-<div style="margin-left: 14%;width:50% !important;">
-    ${StringUtil.wrapString(childCommEvent.content!)}
-</div>
+<#-- iframe isolates the email's <style> block from the parent page. Stored content is
+     HTML-entity-encoded, so decode it via a textarea before assigning to srcdoc. -->
+<#assign iframeId = "commContent_" + childCommEvent.communicationEventId>
+<iframe id="${iframeId}"
+        sandbox="allow-same-origin"
+        style="width: 100%; min-height: 600px; border: 1px solid #ccc; margin-left: 14%;"></iframe>
+<script type="text/javascript">
+    (function() {
+        var iframe = document.getElementById('${iframeId}');
+        iframe.onload = function() {
+            try {
+                this.style.height = (this.contentWindow.document.documentElement.scrollHeight + 20) + 'px';
+            } catch (e) {}
+        };
+        var decoder = document.createElement('textarea');
+        decoder.innerHTML = '${StringUtil.wrapString((childCommEvent.content!'')?js_string)}';
+        iframe.srcdoc = decoder.value;
+    })();
+</script>
