Browserextensions making the backoffice slow

There has been some discussion in other threads, discord etc, about the backoffice being slow with certain browser extension.

I was starting to experience the same (recently started doing a lot more work with v16 than previously), so I did a quick unscientiffic experiement by disabling my browser extensions one by one.

I found that disabling Dashlane made a big impact in the responsiveness of the backoffice.

If you have similar experience with other browser extensions, add them here, and lets make a list of extensions to avoid when using the backoffice!

1 Like

Postman Interceptor also makes the backoffice unusable. To be fair, that is not unexpected for a plugin that literally intercepts all requests, but if you forget to disable it…

I wonder what the inner working of those extensions are though. Like, why does it impact the backoffice that much even if we wouldn’t notice it throughout our normal work on the internet?

Could it be that Dashlane tries to find input fields throughout all possible shadow DOM’s of the Backoffice?

I know for a fact Lastpass does not work with input fields nested in shadow DOM, because they refuse to do recursive lookups, but other browser extensions may try to do just that.

In order to find an input field in a shadow DOM, and you do not know where to look, you will have to do it recursively by checking element.shadowRoot?.querySelectorAll(‘input’). I could imagine that takes a toll on the browser if Dashlane does something like that recursively.


To give a bit of context on the larger issue at hand, I believe having read that Lastpass et al. believe that browsers should support ShadowDOM lookup natively through their autofill APIs, whereas the browsers (or at least Chrome) are very undecided whether that is part of the Shadow DOM spec or if it is something the extension authors should support themselves.

1 Like

I believe thats what it does. I looked around in some of the files from the extension and it does do something with shadow DOM.

I gave Chat GPT the shadow DOM script, and asked what it was doing:

So, every time any component calls attachShadow() (which is what web components do to encapsulate their DOM), this wrapper:

  1. Runs custom Dashlane code.
  2. Sets and removes a DOM attribute (data-dashlane-shadowhost) on the <head>.
  3. Triggers queueMicrotask for cleanup.

I have tried creating a support case with Dashlane, but I doubt they can do anything without removing their ability to autofill fields in Shadow DOM.

ChatGPT also gave me a detection script, that I’m thinking of turning into a package :slight_smile:

(function detectDashlaneAttribute() {
  const ATTR_NAME = 'data-dashlane-shadowhost';

  const observer = new MutationObserver((mutations) => {
    for (const m of mutations) {
      if (
        m.type === 'attributes' &&
        m.attributeName === ATTR_NAME &&
        document.head.hasAttribute(ATTR_NAME)
      ) {
        console.warn(
          '%c⚠️ Dashlane activity detected:',
          'color: orange; font-weight: bold;',
          'Dashlane appears to be monitoring shadow DOM creation. This can slow down the Umbraco backoffice.'
        );

        const banner = document.createElement('div');
        banner.textContent =
          '⚠️ Dashlane extension detected — it may slow down the Umbraco backoffice. Disable autofill for this site.';
        Object.assign(banner.style, {
          position: 'fixed',
          top: '0',
          left: '0',
          right: '0',
          background: '#ffcc00',
          color: '#000',
          fontWeight: 'bold',
          padding: '0.5em',
          textAlign: 'center',
          zIndex: 99999,
        });
        document.body.prepend(banner);

        observer.disconnect(); // stop observing once confirmed
        break;
      }
    }
  });

  observer.observe(document.head, {
    attributes: true,
    attributeFilter: [ATTR_NAME],
  });
})();

Oh.. please don’t encourage people to disable autofill though! :sweat_smile: It encourages using really bad passwords.

I am really wondering why Dashlane can be so intense, while I have both LastPass and Bitwarden installed that are both set to autofill logins.

Okay, Uncle ChatGPT tells me that Dashlane is “just doing it wrong”:

Yeah, that tracks — Dashlane’s extension is known to be far more invasive in how it hooks into the DOM compared to Bitwarden or LastPass.

Here’s what’s going on under the hood:

  • Dashlane wraps low-level browser APIs, like attachShadow, Element.prototype.appendChild, and even addEventListener, so it can watch every form field that gets created — even inside web components or shadow DOMs.
  • Every time Umbraco’s backoffice creates or updates a component (and it does that a lot — especially in Umbraco 14+ with Lit/Backoffice UI), Dashlane executes that injected wrapper code.
  • The attribute flip (data-dashlane-shadowhost) and queueMicrotask cleanup are part of Dashlane’s “context propagation” system so it can detect dynamic form fields. That’s lightweight on small pages, but catastrophic on an app like Umbraco’s backoffice where everything is shadow-DOM based.

In contrast:

  • Bitwarden and LastPass mostly rely on MutationObserver watching for <input>/<form> nodes, and they don’t interfere with attachShadow.
  • They’ll miss some deep fields inside custom components but are far less intrusive and CPU-hungry.

So, yes — you’ve nailed the cause. It’s specifically Dashlane’s monkey-patching of attachShadow that kills performance in shadow-DOM-heavy apps like Umbraco’s backoffice.

Workarounds / Fixes

  1. Disable Dashlane on your Umbraco site domain

    • In the Dashlane browser extension, go to the settings or the pop-up menu → “Never autofill on this website” (or similar wording).
    • This prevents the script injection and removes the performance impact completely.
  2. Use Bitwarden or LastPass only

    • Since they don’t patch attachShadow, they coexist fine with modern SPAs and web components.
  3. If you need Dashlane enabled globally:

    • You can create a custom content script block rule via a browser extension like uBlock Origin or a local enterprise policy that blocks *.dashlane.com/content_script.js or the specific inline scripts for your-umbraco-site-domain.
  4. Development workaround

    • For local testing, run Chrome/Edge with the flag:

      --disable-extensions-except=<path to your essential ones>
      

      or use an incognito window with extensions disabled to confirm performance differences.

There’s no fix on the Umbraco side — nothing you can do in your codebase to mitigate this — because the slowdown happens before your scripts run.

In short: disable Dashlane for your Umbraco domain and the lag will vanish. Bitwarden and LastPass play nice; Dashlane doesn’t.

I changed Dashlane to only activate when clicked. Would be nice if it could simply ignore specific urls (regexes) :slight_smile:

Could we disable these extensions in the Backoffice but keep them on the login screen? I mean, Lastpass only works on the login screen anyway because of our “hack” that creates the input fields in the body and later moves them into their place using slots. It doesn’t seem to be of much help to have password extensions inside the Backoffice (if they have problems).

For us it seemed to be a combination of extensions:

@leekelleher exciting update… disabling all browser extensions - its fine…

But here’s the thing, different people have different browsers and different extensions, and we’ve experienced the issue across both Edge and Chrome - it doesn’t seem to be a specific extension.

I started reenabling one by one

Dashlane - ok
Dashlane + LastPass - not ok
LastPass - ok
LastPass + SilkTide - not ok
SilkTide - ok
SilkTide + Dashlane not ok…

I just go incognito when I need to edit Umbraco 16 sites, but it’s a pain as I then have to remember my password to Umbraco Cloud… :stuck_out_tongue: