unsafe value used in a resource URL context

Question

I'm new to Angular 6 and I'm getting this error:

"unsafe value used in a resource URL context (see http://g.co/ng/security#xss)"

I have searched allot and found that to fix this issue need to create a pipe in angular which i did and created new pipe then changed code in html but still issue persists can any person guide me?

This is the error which I'm getting

Changed Iframe code as show below after creating new pipe:

 <iframe src="http://localhost:8087/bim/api/v1/dashboardTree/{{companyId}} |safe"></iframe>

The code of the pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'tree'
})
export class TreePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

Estus Flask Estus Flask · Accepted Answer · 2018-11-17T08:52:10

src attribute is a string, a pipe isn't evaluated there. In order for it to be evaluated as an expression, it should be:

<iframe [src]="('http://localhost:8087/bim/api/v1/dashboardTree/' + companyId) | safe"></iframe>

Also, there's an inconsistency, the pipe is safe in one place and tree in another.

unsafe value used in a resource URL context

1 Answers