CODEWITHSUNDEEP
htmlangularjsiframe
Laxmi Salunkhe
Laxmi Salunkhe

Reputation: 509

Angular way to set Iframe src to base64 data

I am trying to set Iframe source to base64 data contains PDF in following format,

JS

$http.get('../../xyz', { token: $scope.token})
   .success( function(response) {
       $scope.reportBase64String = 'data:application/pdf;base64,' + response.data;
   });

HTML

<iframe id="report" ng-src="{{reportBase64String}}"></iframe>

ERROR

Blocked loading resource from url not allowed by $sceDelegate policy.

Upvotes: 0

Views: 5634

Answers (2)

Mohit Savaliya
Mohit Savaliya

Reputation: 81

In Angular 2+

.ts file

import { DomSanitizer } from '@angular/platform-browser';

this.http.get(url).subscribe(res => {
    if (res.data) { //res.data must be base64 data format
      this.src = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + res.data);
    }
  }

.html file

<iframe width="100%" height="100%" [src]="mainfestHtml"></iframe>

If would like to hide toolbar then just add #toolbar=0 after base64 string like

this.src = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + res.data + '#toolbar=0&navpanes=0');

Upvotes: 0

Shikha thakur
Shikha thakur

Reputation: 1289

you can go through the doc of Strict Contextual Escaping Doc

but for now i would recommend you to inject $sce and the file path which you provided change it to

$scope.reportBase64String=$sce.trustAsResourceUrl('data:application/pdf;base64,' + response.data);

Upvotes: 2

Related Questions