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

Question

令我感到困惑的是,我无法真正看到SCE在angularjs中的真正好处(即使在阅读了文档之后)关于安全性的好处,并想知道为什么反应不需要有这样的SCE？

所以问题只是为了重新组合:

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

Answer 1

在React中,如果你使用{text}它,它将被自动转义,没有任何不好的事情发生.所以默认情况下你受到保护.如果你使用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>

输出"你好,<b>foo</b>!"

而

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

输出"你好,foo!"

同样的,作出反应的dangerouslySetInnerHTML,其中<div dangerouslySetInnerHTML={{__html: '<b>foo</b>'}} />将输出"你好,FOO!" 虽然<div>{'<b>foo</b>'}</div>会被逃脱.