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

toaditi · claude · web-flow · commit 79ec7da2b966 · 2026-05-16T14:16:20.000+05:30
Backport of [#1213](#1213) to release24.09. ## Summary When a `CommunicationEvent` exists on an order, the `OrderConversations` screen dumps the stored email HTML (a full `<!DOCTYPE html>` document, with its own `<style>` block containing a global CSS reset) directly inline into the order view page. Browsers parse that `<style>` 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 `<iframe>` 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 `<textarea>` 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) <noreply@anthropic.com>
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>
