Question

我有一个翻译密钥，它实际上是一个HTML代码，无论是编码还是未编码。

   $scope.translations = {
    "html_code" : "&lt;script&gt;alert('Alert!');&lt;/script&gt;",
    "html_code_full" : "<script>alert('Alert!');</script>",
    "greeting" : "Welcome!" 
  }

当我使用这些值在视图中显示翻译文本时，我使用两种方法：

作为指令<span translate>{{translations.html_code}}</span>
作为过滤器{{translations.html_code|translate}}

我为translations.html_code_full尝试相同的操作。这是视图的代码：

translations.html_code = {{translations.html_code|translate}}
translations.html_code = <span translate>{{translations.html_code}}</span>

translations.html_code_full = {{translations.html_code_full|translate}}
translations.html_code_full = <span translate>{{translations.html_code_full}}</span>

这是我得到的输出：

translations.html_code = &lt;script&gt;alert('Alert!');&lt;/script&gt; 
translations.html_code = <script>alert('Alert!');</script> 


translations.html_code_full = <script>alert('Alert!');</script> 
translations.html_code_full =

很明显，指令实现是将转换键编码为HTML，但过滤器不是。为什么指令与过滤器实现之间的输出存在差异？如果它正在渲染HTML，为什么我没有收到警报？

Here is the plunk我是为演示而创建的。

Answer 1

AngularJS框架工作正在保护您的应用程序免受XSS攻击。

截至2007年，赛门铁克在网站上执行的跨站点脚本占据了所有安全漏洞的84％左右。

- Wikipedia - Cross-site scripting

那么你真的试图做什么？也许我们可以告诉你如何以安全的方式做到这一点。

Answer 2

对我来说，翻译库并未涵盖所有实例。所以我需要涵盖正常的脚本攻击和Angular目标攻击。我们将URL的一部分作为密钥读取，然后将其显示为一条消息，以便在URL中进行攻击。

我测试过的2个网址：

/mypage.html#/{{{}.")));alert(1)//";}}

mypage.html#/%3Cscript%3Ealert('foo')%20%3C/script%3E

对我来说，如果在页面中使用translate指令而不是过滤器，则第一个将正确转义。第二个是在页面中使用指令时成功攻击，但在使用过滤器时被正确转义。

最后，在将值分配给范围变量之前，我在控制器中进行了转义，翻译和检查。所以现在页面中没有翻译指令或过滤器。

   function translateParam(paramData, defaultKey){
        var deferred = $q.defer();
        var trusted =  $sce.trustAsHtml(paramData);
        $translate(trusted).then(
            function(translatedString){
                if(translatedString == trusted){
                    //no key has been found so show a default
                    deferred.resolve($translate.instant(defaultKey));
                }
                else{
                    //the key has been found correclty
                    deferred.resolve(translatedString);
                }
            }
        );
        return deferred.promise;
    }

//called like this
  $scope.error = translateParam('keyFromURL','defaultKeyInTranslateFile');

你需要注入$ q，$ sce和$ translate。对我来说，这是最安全可靠的解决方案。

Angular translate指令vs filter：XSS是否可能？

2 个答案: