Angular2 dynamically insert script tag

Question

I'm getting from server content into json object field, where it is html, <style></style> and <script></script> tags, and I want to execute it like this:

[innerHtml]="content | sanitize", but <script></script> tags do not execute. Is it possible to make it work?

My sanitize pipe looks like this:

import {Pipe} from '@angular/core';
import {DomSanitizationService} from '@angular/platform-browser';

@Pipe({
    name: 'sanitize',
    pure: true
})
export class Sanitize {
    constructor(private sanitizer: DomSanitizationService) {

    }

    transform(html: string) {

        return this.sanitizer.bypassSecurityTrustHtml(html);
    }
}

I know, that there is bypassSecurityTrustScript function in DomSanitizationService, but how can I use it in my case?

Is the html added to the DOM? Do you get error messages in the browser console? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 13, 2016 at 14:58
content looks like this: "<div>some html</div> <script>some code</script>" — Andrey
– Andrey, Commented Sep 13, 2016 at 14:59

Alex Sokolov · Accepted Answer · 2016-09-13 15:30:19Z

27

It's not an angular 2's problem, script tags inserted via innerHTML are not executed.

If you have html string that contains script tags insert it this way:

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

answered Sep 13, 2016 at 15:30

Alex Sokolov

3113 silver badges6 bronze badges

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

1 Comment

jmq Over a year ago

For others that may need to add a script to the body at some point, but intentionally don't want it bootstrapped on initial page load with the rest of the app: document.body.appendChild(fragment) could also work on the second line of Alex's code rather than setting up a ViewChild in Angular.

Dhrumil Bhankhar · Accepted Answer · 2017-05-24 16:42:52Z

This will solve the issue...

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

@Pipe({
  name: 'sanitize',
  pure: true
})
export class Sanitize {

  constructor(private domSanitizer: DomSanitizer) { }


  handleExternalScriptsInHtmlString(string) {
    let that = this;
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var results = [];

    for (var i = 0; i < scripts.length; i++) {
      var src = scripts[i].getAttribute('src');
      if (src.length && results.indexOf(src) === -1) {
        results.push(src);
        that.addScript(src);
      }
    }

    return results;
  }

  addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
  }


  transform(htmlContent: any) {
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent);

    this.handleExternalScriptsInHtmlString(htmlContent);

    return sanitizeHtmlContent;
  }
}

Dhrumil Bhankhar · Accepted Answer · 2017-05-24 16:35:59Z

1

There is no angular way... You need to do it like this....

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

@Pipe({
  name: 'sanitize',
  pure: true
})
export class Sanitize {

  constructor(private domSanitizer: DomSanitizer) { }


  handleExternalScriptsInHtmlString(string) {
    let that = this;
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var results = [];

    for (var i = 0; i < scripts.length; i++) {
      var src = scripts[i].getAttribute('src');
      if (src.length && results.indexOf(src) === -1) {
        results.push(src);
        that.addScript(src);
      }
    }

    return results;
  }

  addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
  }


  transform(htmlContent: any) {
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent);

    this.handleExternalScriptsInHtmlString(htmlContent);

    return sanitizeHtmlContent;
  }
}

answered May 24, 2017 at 16:35

Dhrumil Bhankhar

1,3411 gold badge14 silver badges15 bronze badges

3 Comments

SeanMC Over a year ago

this has the same issue, right? because you still just get a variable that you'd have to display using innerHtml which doesn't execute script tags

Dhrumil Bhankhar Over a year ago

@SeanKPS No this one will execute the script tags in fact. Notice the function addScript. We are manually finding script tags and explicitly adding them to DOM

SeanMC Over a year ago

I thought angular wouldn't execute script tags at all -even if they're in the DOM. Maybe that's only within component templates and doesn't apply when appended to the body directly. Still, I needed to put the script output exactly where the script tag was in the DOM, for Github Gists, I ended up writing a couple functions to sort it out.

Collectives™ on Stack Overflow

Angular2 dynamically insert script tag

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related