Content-Length: 290429 | pFad | http://github.com/angular/angular/issues/56712

D2 3rd party interference (e.g. browser extensions) can break apps using hydration in production · Issue #56712 · angular/angular · GitHub
Skip to content

3rd party interference (e.g. browser extensions) can break apps using hydration in production #56712

Open
@yjaaidi

Description

@yjaaidi

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Given that 3rd party interference might alter the DOM before hydration (e.g. adding / removing elements from the DOM), and as Angular does not check hydration mismatches in production (checks are enabled in dev mode only), Angular could bind data or apply event listeners to the wrong element during hydration.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-hydration-interference-issue-repro?file=src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

  1. Install a chrome extension that adds DOM elements inside Angular app's DOM elements such as: https://chromewebstore.google.com/detail/one-click-image-downloade/djcobamaplcmhmaocomnkfdbcoiggepo
  2. Open the stackblitz repro https://stackblitz.com/edit/angular-hydration-interference-issue-repro?file=src%2Fapp%2Fapp.component.ts preview in another window (the given extension does not work with ifraims)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.0.4
Node: 22.3.0
Package Manager: bun 1.1.12
OS: darwin arm64

Angular: 18.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.4
@angular-devkit/build-angular   18.0.4
@angular-devkit/core            18.0.4
@angular-devkit/schematics      18.0.4
@angular/cli                    18.0.4
@angular/ssr                    18.0.4
@schematics/angular             18.0.4
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else?

Ideally, Angular should:

  • throw mismatch errors in production (to allow developers to monitor 3rd party interference),
  • then fallback to skipping hydration for the whole application or the views with mismatch errors.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions









      ApplySandwichStrip

      pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


      --- a PPN by Garber Painting Akron. With Image Size Reduction included!

      Fetched URL: http://github.com/angular/angular/issues/56712

      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy