Dynamic iframe source with angular

Question

I am trying to use payment system with Angular. In the payment gateway API, 3D Secure Page exposing as an html in json. I am trying to put this html in an iframe. The main problem is html is not shown. When I try to inspect element on browser, there are html code in the iframe but not shown. What is the reason of it? How can I solve this?

payment.component.ts:

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.modalContent = data.content;
}

payment.component.html

<iframe [innerHTML]="modalContent | sanitizeHtml" frameborder="0"></iframe>

3d secure content example:

<!doctype html>↵<html lang="en">↵<head>↵    <title>iyzico Mock 3D-Secure Processing Page</title>↵</head>↵<body>↵<form id="iyzico-3ds-form" action="https://sandbox-api.iyzipay.com/payment/mock/init3ds" method="post">↵    <input type="hidden" name="orderId" value="mock64-7127975743472898iyziord">↵    <input type="hidden" name="bin" value="405418">↵    <input type="hidden" name="successUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/success/37">↵    <input type="hidden" name="failureUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/failure/37">↵    <input type="hidden" name="confirmationUrl" value="https://sandbox-api.iyzipay.com/payment/mock/confirm3ds">↵    <input type="hidden" name="PaReq" value="66e28140-1079-4f29-81c6-0220c720620e">↵</form>↵<script type="text/javascript">↵    document.getElementById("iyzico-3ds-form").submit();↵</script>↵</body>↵</html>

If you want to use this then you must be getting the URL for iframe otherwise use div instead <iframe [innerHTML]="modalContent | sanitizeHtml" frameborder="0"></iframe>. — Sunil
– Sunil, Commented Nov 16, 2018 at 19:40
@SunilSingh I also tried that with div even it is not worked. — kaankilic
– kaankilic, Commented Nov 16, 2018 at 19:43

Sunil · Accepted Answer · 2018-11-16 20:27:52Z

3

Use the following code snippet -

ts

@ViewChild('iframe') iframe: ElementRef;

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.setIframe(this.iframe);
}

private setIframe(iframe: ElementRef): void {
   const win: Window = iframe.nativeElement.contentWindow;
   const doc: Document = win.document;
   doc.open();
   doc.write(this.modalContent);
   doc.close()
}

html

<iframe #iframe frameborder="1"></iframe>

Working copy is here - https://stackblitz.com/edit/angular-jc3qew

edited Nov 16, 2018 at 20:27

answered Nov 16, 2018 at 19:48

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kaankilic Over a year ago

this code sanitizing Html and script tags. I built pipe with bypassSecurityTrustHtml and still getting blank page.

Sunil Over a year ago

Can you share the html you are receiving.

Collectives™ on Stack Overflow

Dynamic iframe source with angular

1 Answer 1

ts

html

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ts

html

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related