Skip to content

Instantly share code, notes, and snippets.

@klihelp
Last active May 14, 2018 13:45
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save klihelp/6655d798967c49fd731a8742119d8c9e to your computer and use it in GitHub Desktop.
Save klihelp/6655d798967c49fd731a8742119d8c9e to your computer and use it in GitHub Desktop.
Angular 2 - Add safeHtml with loading scripts from innerHTML
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CheckScriptsPipe, SafeHtmlPipe } from "./pipe.safehtml.loadJsURL.ts"
@NgModule({
declarations: [
AppComponent,
CheckScriptsPipe,
SafeHtmlPipe,
],
imports: [
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {}
// In content.html use:
// <div [innerHTML]="post.content.rendered | checkScripts | safeHtml " class="entry-body"></div>
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
// use better logic for every content load
let loadJsURL = function(url:string) {
let canJsLoad = function(url:string) {
if (!url) return false;
let scripts = document.getElementsByTagName('script');
for (var i = scripts.length; i--;) {
// *td
// better with substring or pos, make work with //
if (scripts[i].src == url) return false;
}
return true;
}
// Load js url
let insertJsUrl = function(url:string) {
var script = document.createElement('script');
script.setAttribute('src', url);
document.body.appendChild(script);
}
if ( canJsLoad(url) ) {
insertJsUrl(url)
}
}
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
@Pipe({name: 'checkScripts'})
export class CheckScriptsPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
let jsUrls = value.match(/(\/\/.+\..+\/.+\.js)/g);
if (jsUrls && jsUrls.length){
for ( let url of jsUrls){
loadJsURL(url)
}
}
return value;
}
}
@mac2000
Copy link

mac2000 commented Mar 14, 2018

Here is one more way:

[].forEach.call(this.divEl.nativeElement.querySelectorAll('script'), script => {
      const s = document.createElement('script')
      if (script.innerText) s.innerText = script.innerText
      if (script.src) s.src = script.src
      document.body.appendChild(s)
})

not sure why, but cloneNode is not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment