Angular [Innerhtml] 呈现不同于 webapi 响应的静态文件

Question

需要在 DIV 中显示 HTML 文件内容，在静态文件中工作，在动态文件中失败。

什么有效：

我有一个 EML 文件，我怀疑我必须对其进行解析。 将文件扩展名重命名为 HTML，因为它令人愉悦地呈现得有些体面，所有标签都被删除并正确格式化，如果从静态文件提供。

public getOneFileStatic(fn: string): Observable<any> {
    return this.http.get(fn, { responseType: 'text' })
      .pipe(tap(_ => console.log('== getOneFileStatic ')));
  }

并简单地调用：

svc.getOneFileStatic('/assets/files/eml-test.html')
            .subscribe(x => {                        
                    this.theinner = x;
                });

模板是

<div class="card-block">
      <div [innerHTML]="theinner | safeHtml" style="width: 100%"></div>
</div>

什么没有，并显示带有标签的原始文本

然后尝试了从webapi返回的动态方式：

public getOneFile(fn: string): Observable<any> {
    return this.http.get( this.baseUrl + '/api/ServerFiles/GetStream/' + fn , { responseType: 'text' })
      .pipe(tap(_ => console.log('== getOneFile '))
      );
  }

结果是所有标签和 MIME 内容按原样转储的文本流。

我看过

我检查了内容标题并尝试了：文本、blob 等，还有应用程序/八位字节。 但它们都很好，并且显示为原始的 HTML 标记从未兑现。

标题： 提供静态文件时

Referrer Policy: no-referrer-when-downgrade
HTTP/1.1 304 Not Modified
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
ETag: W/"cb81-Rb8BCAxZvy4eWO/lkggYEFPkXzo"
Date: Wed, 16 Jan 2019 21:33:45 GMT
Connection: keep-alive

遇到动态文件时：

HTTP/1.1 200 OK
Date: Thu, 17 Jan 2019 00:52:35 GMT
Content-Type: text/html
Server: Kestrel
Content-Length: 97197
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200

注意：在静态的情况下没有 Content-Type 标头。但是在流式传输文件内容时，我需要在我的服务器代码中提供一个，即 Kestrel 和 .Net 代码。

Answer 1

您可能想尝试sanitize the resulting raw text with tags。

查看Angular Sanizitation API example（基本但可能就足够了）。