title: Displaying Pdf from azure blob storage
body: <p>I'm trying to get a pdf file displayed on my page. The pdf file is located as a blob on azure. I'm getting the link to the blob itself from the server, that way i can grab the file directly from the storage instead of passing it through the server.</p>
  
  <p>I set up a shared access signature(SAS key) because the container is protected.</p>
  
  <p>Since I'm using angular 5 I need to sanitize my url which i'm doing.</p>
  
  <pre><code> this.http.get(baseUrl + 'api/download/fileuri?sheetId=' + this.sheetId, { responseType: 'text' }).subscribe(result =&gt; {
          this.url = result.toString();            
          this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
          console.log(this.sanitizedUrl);
      }, error =&gt; console.error(error));
  </code></pre>
  
  <p>I'm then putting it inside a object, yet i either get nothing but a white page or i get the following error.</p>
  
  <pre><code>&lt;object [data]="sanitizedUrl" type="application/pdf" style="width:100%; height:100vh"&gt;&lt;/object&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/a0yGd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a0yGd.png" alt="enter image description here"></a></p>
  
  <p>I set up the following in azure:</p>
  
  <p><a href="https://i.stack.imgur.com/TH3zM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TH3zM.png" alt="enter image description here"></a></p>
  
  <p>The weirdest part is: I can grab that file but just inputting that link, it just starts downloading it. But the moment i try to access it from the object, it throws that error. So the link is correct and it works. It's just whenever i try to access it from within the page..</p>