Angular Dom Sanitizer HTML 无法复制文本

Question

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

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

其中 safeHtml 是：

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

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

Answer 1

乍一看，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 片段。消毒剂保持安全值完好无损。

消毒（）

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

Answer 2

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

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