时间戳

首页 > 解决方案 > 我正在使用 http.post 来获得响应，并设置我的 div [innerHTML]="response.html"，但 angular2 正在从 html 页面中删除 javascript

angular - 我正在使用 http.post 来获得响应，并设置我的 div [innerHTML]="response.html"，但 angular2 正在从 html 页面中删除 javascript

问题描述

模板片段

<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$;
  }

}

标签： angulartypescript

解决方案

您在这里最有可能看到的是 Angular 的清理过程。有关发生的更多详细信息，请参阅Angular Security 。但它会删除<script>例如innerHTML。

如果您相信自己的意见，那就有办法解决。例如，您可以使用 将someSanitizer.bypassSecurityTrustHtml(response.html)值标记为受信任，并且不innerHTML去除麻烦的部分。

如果您不信任输入，那么这是一件非常危险的事情。您应该使用 aniframe来保存接收到的内容。您不会遇到任何innerHTML类似的问题，并且您的上下文和 's 之间会有一个浏览器强制分离iframe，因此无论在其中执行什么恶意脚本都无法触及您。

推荐阅读