Angular 10 - 以字符串形式提供的清理样式和脚本答案

【问题标题】：Angular 10 - Sanitizing style and script, provided in a stringAngular 10 - 以字符串形式提供的清理样式和脚本
【发布时间】：2021-09-26 06:40:31
【问题描述】：

我正在尝试弄清楚 DomSanitizer 在 Angular 10 中的实际工作原理。

我一直在尝试清理以下 CSS 字符串，但没有任何运气：

const testString = 'transform: rotate(70deg);color: blue;';
const result = this.sanitizer.sanitize(SecurityContext.STYLE, testString);

在上面的代码 sn-p 中，result 常量变量总是等于testString。 我期望发生的是：result 应该只包含color: blue;，并且transform CSS 属性会从字符串中过滤掉。

我还尝试清理一些 JavaScript 代码，通过如下字符串提供：

const testString = 'alert("hacked!");console.log("logged");';
const result = this.sanitizer.sanitize(SecurityContext.SCRIPT, testString);

但是，在此示例中，sanitize() 函数会抛出错误消息unsafe value used in a script context。

我期望在这里发生的是：result 常量变量应该是一个空字符串。

【问题讨论】：

它不会过滤掉危险的部分。您必须将其包装在 try/catch 块中并自己处理。
那么，如果这个函数实际上并没有清理任何东西，那么它的意义何在 - 只是绕过 Angular 的内置保护机制的想法？据我所知，bypassSecurityTrustHtml 之类的函数就是为此目的而设计的——sanitize 函数实际上应该清理输入，不是吗？
我认为重点是保护您免受任何危险的 sn-ps 代码的影响。当发现危险的 sn-p 时，由您决定如何处理它。 Idk 你到底在做什么，但也许你可以在创建 sn-ps 时添加验证，而不是查看它实际上是否有效？

【解决方案1】：

您可以放置 if Logic 来检查其是否为蓝色 - 然后放置 else 以返回任何内容或所需的数据。 p>

if(testString==='blue'){
const result = this.sanitizer.sanitize(SecurityContext.STYLE, testString);

} else {
console.log('whatever you like')
}

【讨论】：

我真的不明白这对我的案子有什么帮助。我期待某个输出但没有得到它，我不知道为什么 - 我已经梳理了官方文档，但至少可以说，SecurityContext 及其各种选项的描述很少。
它可以净化蓝色的风格并确保它是蓝色 - 这就是您所要求的。