Angular Dom Sanitizer HTML无法复制文本 [英] Angular Dom Sanitizer HTML cannot copy text

问题描述

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

I used DomSanitizer to sanitize my HTML content from database to be displayed on page.

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

safeHtml在哪里:

Where safeHtml is:

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

效果完美.但是我注意到，当显示在网页上时，无法选择或复制此文本.否则，可以正常复制或选择从正常字符串字段显示的文本.

It works perfect. But I've noticed that this text cannot be selected nor copied when displayed on web page. Otherwise, the texts displayed from normal string field can be copied or selected normally.

推荐答案

乍看之下绕过SecuritySecurityTrustHtml()似乎是我们想要的，但是文档警告不要使用此常规方法.假设数据库中的内容不包含< script> ，bypassSecurityTrustHtml是错误的方法.还会导致插入的html中的文本未被选中/复制.

At first glance bypassSecurityTrustHtml() looks to be want we want, but the documentation warns against using this method general. Assuming the content from the database does not contain <script> bypassSecurityTrustHtml is the wrong method. It can also cause the text from the inserted html to not be selected/copied.

绕过安全性并信任给定的值是安全的HTML.仅在绑定的HTML不安全(例如包含标签)并且应执行代码时才使用此功能.清理程序将保留安全的HTML，因此在大多数情况下，应不 使用此方法.

Bypass security and trust the given value to be safe HTML. Only use this when the bound HTML is unsafe (e.g. contains tags) and the code should be executed. The sanitizer will leave safe HTML intact, so in most situations this method should not be used.

<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 ...方法之一构造一个值，然后从模板绑定到该值来绕过安全性.

In specific situations, it might be necessary to disable sanitization, for example if the application genuinely needs to produce a javascript: style link with a dynamic value in it. Users can bypass security by constructing a value with one of the bypassSecurityTrust... methods, and then binding to that value from the template.

这些情况应该很少见，必须格外小心，以免产生跨站点脚本(XSS)安全漏洞！

These situations should be very rare, and extraordinary care must be taken to avoid creating a Cross Site Scripting (XSS) security bug!

在使用bypassSecurityTrust ...时，请确保尽早调用该方法，并使其尽可能靠近该值的来源，以使其易于验证使用该方法不会造成安全漏洞.

When using bypassSecurityTrust..., make sure to call the method as early as possible and as close as possible to the source of the value, to make it easy to verify no security bug is created by its use.

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

It is not required (and not recommended) to bypass security if the value is safe, e.g. a URL that does not start with a suspicious protocol, or an HTML snippet that does not contain dangerous code. The sanitizer leaves safe values intact.

sanitize()

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

If value is trusted for the context, this method will unwrap the contained safe value and use it directly. Otherwise, value will be sanitized to be safe in the given context, for example by replacing URLs that have an unsafe protocol part (such as javascript:). The implementation is responsible to make sure that the value can definitely be safely used in the given context.

这篇关于Angular Dom Sanitizer HTML无法复制文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！