bypassSecurityTrustHtml and bypassSecurityTrustScript in Angular2 with JavaScript

Question

I am trying to execute javascript function inside my Angular2 file via component. But I can't get this working.

This is how my ts file looks like.

import { Component, OnInit, Input } from '@angular/core';
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

import { JavaScriptService } from './javascript.service';

@Component({
  selector: 'app-javascript',
  template: `
     <div [innerHtml]="html"></div>
  `
})
export class JavaScriptService{

  html: any;

  constructor(private sanitizer: DomSanitizer) {

  this.html = sanitizer.bypassSecurityTrustHtml(`<div><script type="text/javascript"> alert('h');</script></div>`);

  }

}

This is how html looks when Angular renders page in browser (I inspected elemens)

<div ng-reflect-inner-h-t-m-l="<div><script type=&quot;text/javascript&quot;> alert('h');</script></div>">
<div><script type="text/javascript"> alert('h');</script></div>
</div>

I don't understand why alert is not executing after page is loaded.

I have tried both with bypassSecurityTrustHtml and bypassSecurityTrustScript but no luck. I appreciate if anyone have solution for this.

Thank you!

AFAIK script tags can't be added using innerHTML. See stackoverflow.com/questions/38088996/… for how to add a script tag. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 16, 2017 at 7:40

Karl · Accepted Answer · 2019-06-18 04:48:35Z

1

I've seen this done before in your .ts file.

It will execute your script tag.

const fragment = document.createRange().createContextualFragment(yourHtmlString); document.body.appendChild(fragment);

Even though it works, then I get this issue SafeValue must use [property]=binding: (see http://g.co/ng/security#xss) being appended to my page so I'm working on resolving that.

answered Jun 18, 2019 at 4:48

Karl

1,8231 gold badge16 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

bypassSecurityTrustHtml and bypassSecurityTrustScript in Angular2 with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related