4

Aloha~ buen día estimada comunidad, tengo un escenario particular y me gustaría contar con su apoyo para darle solución. He estado intentando varias formas, sin éxito hasta el momento y si en caso logro dar con la solución, la estaré publicando a modo de retribución a la comunidad de desarrolladores :D

El caso:

Tengo un servicio que devuelve un JSON, una propiedad llamada content tiene contenido HTML y dentro de ese HTML, existen etiquetas Script del estilo: <script src="URL externa"></script>, sucede que el contenido de ese script externo se encarga de hacer un document.write e imprime en el HTML contenido formateado, y pues, ese script nunca llega a ejecutarse por efectos de seguridad paranoica en Angular, lo cual está bien para mantener la seguridad del sitio, sin embargo, en este caso en particular donde solo necesito "bypassear" esa restricción para mostrar el contenido adecuadamente, sigue sin funcionar.

Dicho de otro modo, tengo archivos GIST embedded (de gist.github.com) que se ven bien si muestro el contenido en Razor con un HTML.Raw (así que el problema va más allá del contenido del HTML). El detalle es que debo mostrarlos en la aplicación de Angular que estoy desarrollando. He utilizado el DOMSanitizer, he tratado de incluir las URL a ejecutarse en modo "bypass" y hasta he invocado al poder de Jquery para cargar dinámicamente el contenido de esos Script Tags, la carga de esos scripts, siguen sin funcionar.

Para que el escenario esté más claro todavía, esto es lo que tengo funcionando en una app hecha en aspnet .net:

http://fredyfx.com/post/elevando-el-cosmos-con-aspnetcore-2-vuejs-entity-framework-core-2-y-postgresql-parte-5/

Y esto es lo que estoy desarrollando: https://dev.fredyfx.com/post/elevando-el-cosmos-con-aspnetcore-2-vuejs-entity-framework-core-2-y-postgresql-parte-5/

Si prestan atención, no todas las imágenes cargan (es normal, le puse restricción de HTTPS para los recursos). Tampoco se muestra los archivos GIST del github en este segundo enlace. Esto último es lo que busco solucionar. Lo ideal sería que se puedan ver.

En angularJS existe la librería https://www.npmjs.com/package/angular-gist-embed que es exactamente lo que busco, el detalle es que AngularJS ya es legacy y estoy con Angular11.

Y bueno, aquí les presento lo que tengo hasta el momento:

El HTML (fragmento exacto):

<div class="post-description pb-50" #htmlContainer [innerHTML]="postDetail?.content">
</div>

El componente:

export class PostComponent implements OnInit {
  ninjaMode: boolean = true;
  postId;
  postDetail: Post;
  hayError: boolean = false;;
  @ViewChild('htmlContainer') container : ElementRef;

  constructor(private routeActivate: ActivatedRoute,
    private readonly sanitizer: DomSanitizer,
    private elementRef: ElementRef,
    private _ngZone: NgZone,
    private postsService: PostsService) {
    // .. aqui hay más código que es innecesario mostrar
    this.postsService.getPostDetail(this.postId).subscribe((res) => {

      this.postDetail = res;
      this.postDetail.content = this.sanitizer.bypassSecurityTrustHtml(res.content);
      this.sanitizer.bypassSecurityTrustResourceUrl('https://github.githubassets.com/assets/gist-embed-33b98015caf26cfcbee6ce1a5d1fc768.css');
      setTimeout(() => { //wait for DOM rendering        
        let scripts = this.container.nativeElement.getElementsByTagName('script');
        for (let script of scripts) {
          this.sanitizer.bypassSecurityTrustScript(script.src);
        }
        let images = this.container.nativeElement.getElementsByTagName('img');
        for (let image of images) {
          this.sanitizer.bypassSecurityTrustResourceUrl(image.src);
        }
        this.reinsertScripts(); //Esto lo saqué de otra respuesta en SOen, tampoco funciona
      });
      this.ninjaMode = false;
      this.hayError = false;
    }, (error) => {
      this.hayError = true;
    });

  }

  ngOnInit(): void {

  }

 reinsertScripts(): void {
   const scripts = <HTMLScriptElement[]>this.elementRef.nativeElement.getElementsByTagName('script');
   console.log('Los scripts: ', scripts);
        const scriptsInitialLength = scripts.length;
        for (let i = 0; i < scriptsInitialLength; i++) {
            const script = scripts[i];
            const scriptCopy = <HTMLScriptElement>document.createElement('script');
            scriptCopy.type = script.type ? script.type : 'text/javascript';
          if (script.innerHTML) {
                scriptCopy.innerHTML = script.innerHTML;
          } else if (script.src) {            
                scriptCopy.src = script.src;
            }
          /*scriptCopy.async = false;*/
          // document.body.appendChild(script);
          
        /*this._ngZone.runOutsideAngular(() => {*/
          console.log('script.parentNode === ', script.parentNode);
          console.log('oldChild === ', script);
          script.parentNode?.replaceChild(scriptCopy, script);
          console.log('script.src === ', script.src);
          $('#container').load(script.src);
            //eval(script.text); //Tampoco funciona
        /*});*/

        
          
        }
    }

}

¿Alguno ha experimentado algo así? ¿Alguna idea de cómo renderizar esos scripts dentro del innerHTML? Muchas gracias por su atención, que tengan un excelente día :D

2

2 respuestas 2

0

Para solucionar el problema que tienes existe una libreria para renderear componentes de angular por string generados sea por Typescript o por un pseudo MVC, siendo este una respuesta hecha por el serverApi, te recomiendo que el uso de innerHTML lo utilices para campos de html comunes y no componentes de angular, ya que estos pasan por un precompilado.

https://www.npmjs.com/package/ngx-dynamic-hooks?activeTab=readme

0

Puedes hacerlo mediante un:

<span [innerHTML]="art.title"></span>

Pero tienes que indicarle a Angular que es un elemento HTML seguro, por lo que tiene que pasarle un método desde el ts del component:

SanitizedHTML(html): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

Entonces en el código donde necesitas renderizar el HTML, lo pondrías así:

<span [innerHTML]="SanitizedHTML(variable_con_el_codigo_HTML)"></span>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.