localhost:9000" from accessing a cross-origin frame

Asked Aug 19 '20 at 18:28

Active Aug 19 '20 at 20:27

Viewed 752 times

I wanna get a screenshot of iframe, I use Angular 9.

component.html:

 <div>
   <img id='img' />
 </div>

<div>
     <iframe id="iframe" *ngIf="fileUrl" [src]="getFileUrl()"></iframe>
</div>

component.ts:

// take screenshot
var body = $('iframe').contents().find('body')[0];
      html2canvas(body).then((canvas: any) => {
        var base64encodedstring = canvas.toDataURL("image/jpeg", 1);
        $('#img').attr('src', base64encodedstring);
      });

edited Aug 19 '20 at 20:27

asked Aug 19 '20 at 18:28

ahmed hassan

What does this **getFileUrl()** function do? – Muthupriya Aug 19 '20 at 19:27
Have a look at this question: https://stackoverflow.com/questions/47508270/cross-domain-issue-with-iframe-in-angular2 – Gunnar B. Aug 19 '20 at 19:47
No problem with display iframe content, the problem is can not get a screenshot from the iframe. – ahmed hassan Aug 19 '20 at 20:22
getFileUrl(): any { return this.sanitizer.bypassSecurityTrustResourceUrl(this.fileUrl); } @Muthupriya – ahmed hassan Aug 19 '20 at 20:23
Could you please confirm me that if you directly provided your this.fileUrl in html file, is that image is shown or not? @ahmed hassan – Muthupriya Aug 19 '20 at 20:27
No, not shown, it needs to get from method @Muthupriya – ahmed hassan Aug 19 '20 at 20:57
Do you have control over the thing that is loaded in the iframe..? It seems to at least be loaded from a different domain.. – MikeOne Aug 19 '20 at 22:36

DOMException: Blocked a frame with origin "http://localhost:9000" from accessing a cross-origin frame

0 Answers0