جاوااسکریپت - انگولار - چگونه یک اسکریپت ذخیره شده در یک رشته را با InnerHtml اجرا کنیم

من دارم تلاش میکنم یک HTML را نمایش بدهم و یک اسکریپت را اجرا کنم که هر دو در یک رشته ذخیره شدهاند.

من یک پایپ ساختهام که رشته را با متد this.sanitizer.bypassSecurityTrustHtml() تبدیل میکند.

سپس، محتوای رشته را در ویژگی innerHtml وارد میکنم و آن را با لوله خود ترکیب میکنم.

شما میتوانید آن را در stackblitz اجرا کنید: https://stackblitz.com/edit/angular-uilj36

این بخشی از کد من است :

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

اپ.کامپوننت.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public html = '<div>Html content</div> <script>console.log("run js ok");</script>';
}

app.component.html

<h1>Code injection :</h1>
<div [innerHtml]="html | safe"></div>

مشکل این است که اسکریپت اجرا نمیشود.

کسی ایدهای دارد چرا اسکریپت اجرا نمیشود؟

پی.اس: میدانم که توصیه نمیشود اما کسی از من خواست که این کار را انجام دهم :)

پاسخ شماره ۱

شما همچنین میتوانید به جای عنصر div از iFrame استفاده کنید. روی iFrame میتوانید ویژگی srcdoc را تنظیم کنید.

<iframe [srcdoc]="html | safe"></iframe>

باید HTML را همراه با اسکریپتهای آن نمایش دهد و اجرا کند. اگر میخواهید iframe را محدود کنید، میتوانید از ویژگی sandbox استفاده کنید.

برای مثال شما میتواند چنین به نظر برسد:

<iframe [srcdoc]="html | safe" sandbox="allow-scripts"></iframe>

ایفریمها برای چنین موارد امنیتی ساخته شدهاند، مانند اجرای اسکریپتها در یک محیط جداگانه.