在 angularjs 中使用 $sce 或严格上下文转义有什么好处，为什么 React 不需要这样做？

Question

我感到困惑的是，我无法真正看到在 angularjs 中拥有 SCE 的真正好处（即使在阅读了文档之后）关于安全性的好处，并且想知道为什么 React 不需要这样SCE在里面吗？

所以问题只是为了重组：

1. SCE 的好处
2. 为什么 Angular 会，而 React 不会？

Answer 1

在 React 中如果你使用 {text} 那么它会自动转义并且不会发生任何坏事。所以默认情况下你是受保护的。如果您使用 dangerouslySetInnerHTML={{__html: text}}，那么您有责任清理 text，这样就不会发生任何不好的事情，这就是为什么名称 dangerously :)

Angular 有类似的方法。它处理任何可能包含危险 HTML 的字符串，因此它会自动将其转义。 $sce 本质上是 React 的 dangerouslySetInnerHTML，因为它将您的文本包装在一个对象中，告诉 Angular {sceWrappedText} 不应自动转义。而且，就像在 React 中一样，您有责任对其进行清理。

$sce 确实带有一些辅助消毒剂，例如 parseAsHtml，您可以在输出之前使用它来消毒 HTML。我认为它使用 $sanitize 服务并删除了 ng-click 之类的内容。

澄清一下：$sce 和 dangerouslySetInnerHTML 都不应该被认为它们会神奇地使不安全的（用户输入的）字符串安全地显示为 HTML。它们存在是因为 默认情况下 一切都被转义了。作为开发人员，您有责任决定使用什么是安全的：

• 它来自被清理的服务器；
• 您使用一些客户端代码（https://github.com/mganss/HtmlSanitizer, https://www.npmjs.com/package/sanitize-html 和许多其他代码）对其进行了清理
• 这是一块 HTML 你从本质上安全的碎片粘在一起的碎片（想想 '<b>' + parseInt(this.props.numberFromTextInput, 10) + '</b>'）

默认值是什么意思：

控制器：

$scope.text = '<b>foo</b>';

模板：

<div>{{text}}</div>

会输出"Hello, <b>foo</b>!"

同时

$scope.text = $sce.trustAsHtml('<b>foo</b>');

会输出"Hello, foo!"

与 React 的 dangerouslySetInnerHTML 相同，其中 <div dangerouslySetInnerHTML={{__html: '<b>foo</b>'}} /> 将输出 "Hello, foo!" 而 <div>{'<b>foo</b>'}</div> 将被转义。