0

Requirement

To dynamically load the PDF file based on what user's have selected from list of PDF and show it in object tag / embed tag.

Users cannot download the PDF files, and hence object tag. However, other security settings are yet to be added.

Issue

I continuously get error "ERROR Error: Required a safe ResourceURL, got a URL (see http://g.co/ng/security#xss)" while trying to load PDF in object tag.

Research

I have already gone through several posts before coming and asking this question.

  1. Unsafe value used in a resource URL context with Angular 2

Reproducible steps

I have created the stackblitz, and you can see the error being generated.

Question

I am not sure what I am doing wrong here?

I have tried several things including using safe-pipe from Medium.com

r2018
  • 505
  • 4
  • 14

1 Answers1

0

Use 

this.sanitizer.bypassSecurityTrustResourceUrl(url)

DomSanitizer categorizes various method depending on situations.

  • bypassSecurityTrustUrl: Bypass security and trust the given value to be a safe style URL, i.e. a value that can be used in hyperlinks or <img src>.
  • bypassSecurityTrustResourceUrl: Bypass security and trust the given value to be a safe resource URL, i.e. a location that may be used to load executable code from, like <script src>, or <iframe src>.

In this case, object tag embed multimedia content into HTML, so it is recognized as resource type

hgiasac
  • 2,183
  • 16
  • 14
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Donald Duck Aug 05 '18 at 03:23
  • This did the job for me. Can't believe I spent so long time and didn't realise I was using wrong function. Thanks – r2018 Aug 05 '18 at 10:40