Я использую http.post для получения ответа и устанавливаю свой div [innerHTML] = "response.html", но angular2 удаляет javascript со страницы html

Question

фрагмент из шаблона

<div class="col-sm-12" id="responseDiv" *ngIf="(response$ | async) as response">
<div class="col-sm-12" *ngIf="!response.status">
<div style="height: 800px; overflow: auto" [innerHTML]="response.html">
</div></div></div>      

У div нет полного HTML, он лишен важного содержимого. Что мне делать?

Редактировать: я имею в виду, HTML завершен, но не отображается правильно. Я думаю, что отсутствует JS.

Edit2: Извините, я подумал, что это простой пример, поэтому не вставил мою машинопись. Я не могу сразу опубликовать пример plnkr, потому что URL-адрес и тело не могут поделиться. Но URL, на который я отправляю сообщение, возвращает HTML, который мне нужно отобразить. Вы видите ниже мой сервис:

this.http
      .post(url, body, {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
        observe: 'response',
        responseType: 'text'
      })
      .subscribe(response => {
        const newResponse: HtmlContent = {
          html: response.body,
          fields: this.validationService.validate(response.body)
        };
        this.hopResponse$.next(newResponse);
      }, error => {
        const error_code = (error as HttpErrorResponse).status;
        console.log(error_code);
        this.hopResponse$.next(Object.assign({}, this.hopResponse, { status: 'error' }, {e_code : error_code }));
      });

И это мой компонент (надеюсь, это не вызывает больше вопросов :):

import { Component, OnInit } from '@angular/core';
import {HtmlContent} from '../../../app.interfaces';
import {Observable} from 'rxjs/Observable';
import {PaymentService} from '../../../services/payment.service';

@Component({
  selector: 'app-hop-post-response',
  templateUrl: './post-response.component.html',
  styleUrls: ['./post-response.component.scss']
})
export class HOPPostResponseComponent implements OnInit {

  response$: Observable<HtmlContent>;

  constructor(private paymentService: PaymentService) {
  }

  ngOnInit() {
    this.response$ = this.paymentService.hopResponse$;
  }

}

Answer 1

То, что вы, скорее всего, видите здесь, - это процесс санации Angular на работе. См. Angular Security для более подробной информации о том, что происходит. Но он удалит, например, <script> из innerHTML.

Есть способ обойти это, если вы доверяете своим данным. Например, вы можете использовать someSanitizer.bypassSecurityTrustHtml(response.html), чтобы пометить значение как доверенное и не иметь innerHTML удаления ненужных частей.

Если вы не доверяете вводу данных, то это очень опасная вещь. Вы должны использовать iframe для хранения полученного контента. У вас не возникнет проблем, подобных innerHTML, и будет иметь место принудительное разделение браузера между вашим контекстом и iframe, поэтому любой вредоносный скрипт, выполняемый внутри, не сможет вас коснуться.