3

我使用 DomSanitizer 从数据库中清理我的 HTML 内容以显示在页面上。

<div [innerHtml]="safeHtml(article.text)"></div>

safeHtml 在哪里：

safeHtml(html){
    return this.sanitize.bypassSecurityTrustHtml(html);
}

它工作完美。但是我注意到在网页上显示时无法选择或复制此文本。否则，可以正常复制或选择正常字符串字段中显示的文本。

4

2 回答 2

3

乍一看bypassSecurityTrustHtml()似乎是我们想要的，但文档警告不要使用这种方法。假设来自数据库的内容不包含<script>bypassSecurityTrustHtml 是错误的方法。它还可能导致插入的 html 中的文本不被选择/复制。

绕过安全性并相信给定的值是安全的 HTML。仅当绑定的 HTML 不安全（例如包含标签）并且应该执行代码时才使用它。消毒剂将保持安全的 HTML 完好无损，因此在大多数情况下不应使用此方法。

<div [innerHtml]="article.text | keepHtml"></div>

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}

    transform(content) {
        return this.sanitizer.sanitize(SecurityContext.HTML, content);
    }
}

在特定情况下，可能需要禁用清理，例如，如果应用程序确实需要生成 javascript: 样式链接，其中包含动态值。用户可以通过使用 bypassSecurityTrust... 方法之一构造一个值，然后从模板绑定到该值来绕过安全性。

这些情况应该是非常罕见的，并且必须格外小心以避免创建跨站点脚本 (XSS) 安全漏洞！

使用 bypassSecurityTrust... 时，请确保尽早调用该方法，并尽可能靠近值的来源，以便轻松验证其使用不会产生安全漏洞。

如果值是安全的，则不需要（也不建议）绕过安全性，例如不以可疑协议开头的 URL，或不包含危险代码的 HTML 片段。消毒剂保持安全值不变。

消毒（）

如果上下文信任值，则此方法将解开包含的安全值并直接使用它。否则，值将在给定的上下文中被清理为安全的，例如通过替换具有不安全协议部分的 URL（例如 javascript:）。实现负责确保在给定的上下文中绝对可以安全地使用该值。

于 2020-02-25T18:09:06.817 回答
0

您能否检查一下来自数据库的 HTML 内容。它可能有一些样式元素，其中可能有 CSS 属性user-select:none;。

如果这不能解决您的问题，请检查容器div元素的 CSS。

于 2019-11-11T11:30:01.140 回答