Как запустить скрипт как строку, используя DomSanitzer bypassSecurityTrustScript () в Angular - PullRequest
Новая
       14

Как запустить скрипт как строку, используя DomSanitzer bypassSecurityTrustScript () в Angular

0 голосов
/ 19 апреля 2020

У меня есть доверенный скрипт Javascript / Angular в строковом формате, который я хотел бы выполнить в компоненте angular. Я понимаю, что это то, что делает Domsanitizer bypassSecurityTrustScript (). Angular Domsanitizer

Однако при попытке запустить мой компонент ничего не происходит. Как я могу использовать это для запуска js кода из строки? Это то, что я сделал до сих пор ниже, а также в stackblitz Custom Script StackBlitz Заранее спасибо.

mycomponent.ts 

constructor(private domSanitizer: DomSanitizer)
test(){
 let code: string = "console.log('Hello World')";
 this.domSanitzer.bypassSecurityTrustScript(code);
}

1 Ответ

1 голос
/ 19 апреля 2020

bypassSecurityTrustScript не должен ничего запускать. Единственное, что он делает, - это оборачивает предоставленное значение в SafeScript , чтобы при использовании в привязке к шаблону обойти санацию. Он не выполняет никаких преобразований значения. Официальная документация показывает, как можно использовать похожие значения для стилей, URL-адресов и HTML. И вот тут все становится немного странно.

Кажется, что вы можете использовать значение SafeScript в шаблоне как-то как 

<script [innerHtml]="safeScript"></script>

, но оно не работает, потому что Angular уничтожает все <script> теги из шаблонов.

Запуск js из строк представляет угрозу безопасности, поэтому вам следует подумать дважды, прежде чем делать это. Если нет другого способа, вы можете использовать любой «традиционный» подход js для этого, включая eval и Конструктор функции .

Это также можно добавить <script> непосредственно в DOM (используя глобальный document объект или Rendered ) 

import { Component, Renderer2, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

//...
export class ButtonOverviewExample {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: HTMLDocument
  ) {}

  test() {
    const script = this.renderer.createElement("script");
    this.renderer.setProperty(
      script,
      "text",
      "console.log('Hello World')"
    );
    // It will add a new `<script>` on each call
    this.renderer.appendChild(this.document.body, script);
  }
}
...