From 5d6c4834fda9930846ff87339c475d98e866be3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sami=20V=C3=A4nttinen?= <sami.vanttinen@varjolintu.fi>
Date: Sun, 24 Aug 2025 07:47:54 +0300
Subject: [PATCH] Prevent style changes to wrapper divs (#2646)

Prevent style changes to wrapper divs
---
 keepassxc-browser/content/autocomplete.js     |  1 +
 keepassxc-browser/content/banner.js           |  1 +
 .../content/custom-fields-banner.js           |  1 +
 keepassxc-browser/content/ui.js               | 19 +++++++++++++++++++
 4 files changed, 22 insertions(+)

diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index 4c98d4b..b14ff13 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -117,6 +117,7 @@ class Autocomplete {
             this.container.append(this.list);
             this.shadowRoot.append(this.container);
             document.body.append(this.wrapper);
+            kpxcUI.observeWrapper(this.wrapper);
 
             // Add a footer message for auto-submit
             if (this.autoSubmit) {
diff --git a/keepassxc-browser/content/banner.js b/keepassxc-browser/content/banner.js
index eb732a3..0e8e280 100644
--- a/keepassxc-browser/content/banner.js
+++ b/keepassxc-browser/content/banner.js
@@ -165,6 +165,7 @@ kpxcBanner.create = async function(credentials = {}) {
 
     if (window.self === window.top && !kpxcBanner.created) {
         window.parent.document.body.appendChild(wrapper);
+        kpxcUI.observeWrapper(wrapper);
         kpxcBanner.created = true;
     }
 };
diff --git a/keepassxc-browser/content/custom-fields-banner.js b/keepassxc-browser/content/custom-fields-banner.js
index 299899c..7d04c0d 100644
--- a/keepassxc-browser/content/custom-fields-banner.js
+++ b/keepassxc-browser/content/custom-fields-banner.js
@@ -159,6 +159,7 @@ kpxcCustomLoginFieldsBanner.create = async function() {
 
     if (!kpxcCustomLoginFieldsBanner.created) {
         window.self.document.body.appendChild(wrapper);
+        kpxcUI.observeWrapper(wrapper);
         kpxcCustomLoginFieldsBanner.created = true;
     }
 
diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js
index 49379ce..fa9f812 100644
--- a/keepassxc-browser/content/ui.js
+++ b/keepassxc-browser/content/ui.js
@@ -69,6 +69,7 @@ class Icon {
         this.shadowRoot.append(styleSheet);
         this.shadowRoot.append(this.icon);
         document.body.append(wrapper);
+        kpxcUI.observeWrapper(wrapper);
     }
 
     switchIcon(state, uuid) {
@@ -394,6 +395,22 @@ kpxcUI.createButton = function(color, textContent, callback) {
     return button;
 };
 
+// Observe and prevent style changes to wrapper div elements
+kpxcUI.createWrapperObserver = function() {
+    kpxcUI.wrapperObserver = new MutationObserver(function(mutations, obs) {
+        for (const mut of mutations) {
+            if (mut?.target && mut.target.style?.cssText !== 'all: unset;') {
+                mut.target.removeAttribute('style');
+                mut.target.style.all = 'unset';
+            }
+        }
+    });
+};
+
+kpxcUI.observeWrapper = function(elem) {
+    kpxcUI.wrapperObserver.observe(elem, { attributes: true, attributeFilter: [ 'style' ] });
+};
+
 const DOMRectToArray = function(domRect) {
     return [ domRect.bottom, domRect.height, domRect.left, domRect.right, domRect.top, domRect.width, domRect.x, domRect.y ];
 };
@@ -439,6 +456,8 @@ document.addEventListener('mouseup', function(e) {
     kpxcUI.mouseDown = false;
 });
 
+document.addEventListener('DOMContentLoaded', kpxcUI.createWrapperObserver());
+
 HTMLDivElement.prototype.appendMultiple = function(...args) {
     for (const a of args) {
         this.append(a);