Unsafe value used in a Resource context (iframe)

Question

I'm trying to test my component in which I use a presigned URL to render a PDF file from S3 and then i use a bypassSecurityTrustResourceUrl, and this works well, but just when I'm trying to test this component, I get the following error.

This is the error i'm getting

This is my .spec

@Injectable()
class MockService extends RestService{
  getPDFUrl(){
    return of({
      "timestamp": "2021-03-10T02:17:28.699Z",
      "statusCode": 200,
      "url": "someURL"
    })
  }
  getDocument() {
    {someinfo:"infoo"}
  }
}
describe('DashboardDetailsComponent', () => {
  let component: DashboardDetailsComponent;
  let fixture: ComponentFixture<DashboardDetailsComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HomeModule, HomeRoutingModule, HttpClientModule, RouterTestingModule, NoopAnimationsModule, MatDialogModule ],
      declarations: [ DashboardDetailsComponent,  ],
      providers: [
        {
          provide: DomSanitizer,
          useValue: {
            sanitize: (ctx: any, val: string) => val,
            bypassSecurityTrustResourceUrl: (val: string) => val,
          },
        },
        // more providers
      ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

This is the html code where i used the url

<iframe [src]='url || ""' width="100%" height="350"></iframe>

This is the .ts code where i set the url

this._restService.getPDFUrl(this.document[0].templateURL).subscribe(data => {
        this.url = this._domSanitizer.bypassSecurityTrustResourceUrl(data.url);
      }, err => {
        this.failLoadDocument();
      });

If anyone can help me, I'm stucked on this error since yesterday.

score 1 · Answer 1 · answered Mar 10 '21 at 16:21

Try changing the mock to return an empty string or undefined.

Since you're mocking it, I think it could be causing issues.

Maybe try providing the real DomSanitizer or mock it like how it is shown below.

       {
          provide: DomSanitizer,
          useValue: {
            sanitize: (ctx: any, val: string) => undefined,
            bypassSecurityTrustResourceUrl: (val: string) => undefined,
          },
        },

Unsafe value used in a Resource context (iframe)

1 Answers1