Question

我正在尝试显示来自用户输入URL的图像库。它适用于成功的案例。但是，当我尝试输入XSS网址时，在FireFox上不会调用onError标签的img事件。（适用于Chrome和IE）

这是我的stackblitz应用程序网址：https://angular-dwlzbn.stackblitz.io

您可以在chrome和firefox上查看它进行测试。

我正在测试XSS网址，例如：

http://www.test.src ;>
http://www.img.src="x" onerror=alert(document);/>

即使使用FireFox，我也需要帮助来捕获错误。我的实际代码使用微调器，并且在调用onerror时将其隐藏。因此，在Firefox中，微调器卡住了。

这是我的html：

<form #testForm="ngForm">
    <div>
      <mat-form-field>
      <input matInput type="URL" placeholder="Type Url Here" name="image" #image="ngModel" [(ngModel)]="imageUrl" />
      <mat-error *ngIf="image.invalid && (image.dirty || image.touched)">
        <div *ngIf="image.errors.invalidImage">Image is invalid.</div>
      </mat-error>
      </mat-form-field>
    </div>

    <div class="header-image-preview">
      <img *ngIf="!!imageUrl" [src]="imageUrl" (load)="onImageLoad()" (error)="onImageError()" />
    </div>
</form>

这是我的TS文件的一部分：

  imageUrl: string;
  @ViewChild(NgForm) testForm: NgForm;

  public onImageLoad() {
    this.testForm.controls['image'].setErrors(null);
  }

  public onImageError() {
    this.testForm.controls['image'].setErrors({ 'invalidImage': true });
  }

您可以在此处查看完整的示例代码：https://stackblitz.com/edit/angular-dwlzbn

当SRC具有无效的XSS时，Angular IMG OnError在Firefox上不起作用

0 个答案: