Angular Dom Sanitizer无法复制文本

Question

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

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

其中，safeHtml是：

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

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

Answer 1

乍一看，bypassSecurityTrustHtml()似乎是我们想要的，但文档警告不要使用这种方法。假设数据库中的内容不包含<script>，bypassSecurityTrustHtml是错误的方法。它还可以导致来自插入的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: style链接。用户可以通过使用以下bypassSecurityTrust之一构造一个值来绕过安全性...方法，然后从模板绑定到该值。

这种情况应该非常罕见，必须格外小心，以避免创建跨站点脚本(XSS)安全错误！

在使用bypassSecurityTrust...时，请确保尽可能早地调用该方法，并且尽可能靠近值的来源，以便于验证它的使用不会产生安全错误。

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

sanitize()

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

Answer 2

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

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