Chrome Content Security Policy (CSP) failures when using "Blob" sources

Describe the bug When using a “Blob” type as [src] input of ngx-extended-pdf-viewer, the viewer fails on Chrome due to a Content Security Policy (CSP) denial.

At first sight, the issue comes from the URL.createObjectURL API used here (an internal redirection happens) : https://github.com/stephanrauh/ngx-extended-pdf-viewer/blob/91b45e1/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts#L200

Version info

• 5.1.0, 5.3.0, 5.4.0-beta.1

Desktop (please complete the following information):

• Chrome, Nativefier / Electron, but only on production / built dist servers

To Reproduce Partial example using “Blob” data:

import { HttpClient } from '@angular/common/http';
  public blob: Blob;
  ngOnInit() {
    this.http.get('/assets/pdfs/The Public Domain - Enclosing the Commons of the Mind.pdf', { responseType: 'blob' })
      .subscribe(res => {
        this.blob = res;
      });
  }

  <ngx-extended-pdf-viewer
    [src]="blob"
  >
  </ngx-extended-pdf-viewer>

Demo PDF file Any PDF file loaded as “Blob” data.

Additional context Workaround using base64 I am now using:

-  documentBlob: Blob;
+  documentBase64 = '';
+  documentLoaded = false;

     x.subscribe(res => {
-      this.documentBlob = res;
+      const component = this;
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        component.documentBase64 = (reader.result as string).replace(/^data:.+;base64,/, '');
+        component.documentLoaded = true;
+      };
+      reader.readAsDataURL(res);
     });

     <ngx-extended-pdf-viewer
-      [src]="documentBlob"
+      *ngIf="documentLoaded"
+      [base64Src]="documentBase64"
     ></ngx-extended-pdf-viewer>

[AdrianDC]

Whow. You seem to know what it needs to help a busy open-source developer. How can I talk you into joining the ngx-extended-pdf-viewer team?

Sorry but I already barely have any time to take care of my gitlabci-local project and Android devices system developments 😄 .

The demo has also landed: https://pdfviewer.net/blob

Of course it doesn’t show the CSP problem (because the demo runs on a PHP server), but if you display the data requests in the browser’s developer tools, you can see there’s no data request (apart from the images encoded in the CSS files).

I confirm the demo no longer performs a blob: request.

I upgraded my CSP (helmet) enforced project to ngx-extended-pdf-viewer@6.0.0, and I can confirm the blob: CSP manual rule is no longer required, all good on my side.

Thanks !

[AdrianDC]

Hi ! Sorry for the late reply, yes this is gitlabci-local. Been working on the project quite a bit lately, expanding supported environments and features. Feel free to share it if you find it interesting, everything is documented on the project itself and in the sources.