在angularjs中使用$ sce或Strict Contextual Escaping有什么好处？为什么反应不需要这样做？

Question

我很困惑的事实是，我无法真正看到在角度设备中使用SCE的真正好处（即使在阅读了文档之后）关于安全性的好处，并想知道为什么反应不需要有这样的SCE？

所以问题就是重组：

1. SCE的好处
2. 为什么Angular会这样做但是React没有？

Answer 1

如果您使用{text}，则在React中，它会自动转义，并且不会发生任何不良后果。所以默认情况下你受到保护。如果您使用dangerouslySetInnerHTML={{__html: text}}，则您有责任清理text，以免发生任何不良事件，这就是为什么名称危险：）

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>

输出＆＃34;您好，<b>foo</b>！＆＃34;

虽然

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

会输出＆＃34;您好， foo ！＆＃34;

与React的dangerouslySetInnerHTML相同，其中<div dangerouslySetInnerHTML={{__html: '<b>foo</b>'}} />将输出＆＃34;您好， foo ！＆＃34;而<div>{'<b>foo</b>'}</div>将被转义。