0

I want to dynamically load external JS files depending on a condition I get by http call to a service.

I want to insert <script> into app.component.html as:

<script src="mysource/url"></script>

In my component I used bypassSecurityTrustScript and bypassSecurityTrustHtml neither works for me, my script tags get removed:

  <div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-12 body-content'>
      <div [innerHTML]="script"></div>
      <script type="text/javascript" [src] = "src"></script>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>


   @Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public script: any;
  public src: any;
  public constructor(private titleService: Title, private sanitizer: DomSanitizer) {
    let x = '<script>alert("hi")</script>';
    this.script = sanitizer.bypassSecurityTrustHtml(x);
    this.src = sanitizer.bypassSecurityTrustScript('http://www.google.com');
  }

Any idea how can I use DomSanitizer class in this context?

shiva
  • 714
  • 10
  • 25
  • were you able to implement it? – Anurag Jun 24 '17 at 14:28
  • @talentedandrew no I changed my approached. I'm using Angular Universal, I decided to add the logic in cshtml views. – shiva Jun 25 '17 at 21:07
  • ok, I was also facing the similar issue . Then I used this library https://www.npmjs.com/package/postscribe , which did the trick for me.In my case, I was rendering a third party advertisement script in my angular v4 component template.You should definitely check this(library) out. – Anurag Jun 27 '17 at 06:45
  • 1
    this is how I did that https://stackoverflow.com/questions/44606780/placing-amazon-banner-angular-v4 – Anurag Jun 27 '17 at 06:46
  • 1
    @talentedandrew thank you I will check it out. – shiva Jun 27 '17 at 09:36

1 Answers1

0
this.src = sanitizer.bypassSecurityTrustResourceUrl('http://www.example.com');

where http://www.example.com is the URL the script is fetched from.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Does it mean I can use ` – shiva Feb 22 '17 at 22:11
  • Right, didn't think of that. The script tag will be purged. I'll have another look later. – Günter Zöchbauer Feb 23 '17 at 04:03
  • 1
    The ` – Günter Zöchbauer Feb 23 '17 at 07:53
  • 1
    See http://stackoverflow.com/questions/35570746/angular2-including-thirdparty-js-scripts-in-component/35570783#35570783 for how to add a script tag. You don't need the sanitizer this way. – Günter Zöchbauer Feb 23 '17 at 07:54
  • Thanks for the answer, yes I have seen that post but generating ` – shiva Feb 23 '17 at 09:53
  • I'd say the messy thing is that you want to add a script tag, not the way shown in the linked answer. If you want to include a script, then you should use `require(...)` or similar, adding a script at runtime is risky, therefore Angular doesn't provide a direct way to do it. What I show in the linked answer is the same what one would do in plain JS http://stackoverflow.com/questions/9413737/how-to-append-script-script-in-javascript – Günter Zöchbauer Feb 23 '17 at 09:57
  • 1
    I completely agree with you. I have few complexity here. I have Angular Universal so index is process at server side. Javascript I'm trying to add is not modular. Javascript file url are decided by an api service returning e.g user is existing or not, mobile user etc – shiva Feb 23 '17 at 10:05