Angularjs 角度平移指令vs过滤器：XSS是否可能？

我有一个翻译键，它实际上是一个HTML代码，既有编码的也有未编码的

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

这是我得到的输出：

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


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

translations.html_code=scriptalert（'Alert！'）/剧本
translations.html_code=alert（'alert！'）；
translations.html_code_full=alert（'alert！'）；
translations.html\u代码\u完整=

很明显，指令实现是将翻译键编码为HTML，而筛选器不是。为什么指令和过滤器实现之间的输出存在差异？ 如果它正在呈现HTML，为什么我没有收到警报

---

我是为演示而创建的。

AngularJS框架保护您的应用程序免受XSS攻击

截至2007年，在Symantec记录的所有安全漏洞中，网站上执行的跨站点脚本大约占84%

--

---

那么你真正想做什么？也许我们可以向您展示如何以安全的方式进行翻译。

对我来说，翻译库并没有涵盖所有实例。所以我需要涵盖一个普通的脚本攻击和一个角度瞄准攻击。我们将URL的一部分作为密钥读取，然后将其显示为URL中极易受到攻击的消息

我测试的两个URL：

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

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

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

最后，在将值赋给scope变量之前，我在控制器中进行了转义、转换和检查。所以现在页面中没有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。对我来说，这是最安全、最可靠的解决方案。

这正是我想要做的。在另一个web应用程序中，我能够获得警报，但不知何故，我无法在演示中重现。我只是想知道使用translate（即filter vs directive）来防止XSS的更安全的方法。然后看看这张照片。SCE协助编写代码的方式是：（a）默认情况下是安全的，（b）使安全漏洞（如XSS、clickjacking等）的审核更加容易。我也有同样的问题。我可以在我的应用程序中使用translate指令在本地复制css攻击，而过滤器似乎是安全的-但是如果我尝试制作一个反映此问题的plunkr，css将不起作用，脚本将被正确过滤掉。试用了ng translate的2.8.1和2.9.0版本。尝试了不同的精神疗法，但也不起作用。我想知道那里是否有translate指令的安全漏洞。对我来说，如果我使用过滤器，它将捕获警报（）；攻击。但是，对于#/{{{}.）；alert（1）/“；}}类型的攻击，它失败了。如果我使用指令，它会捕获后者，但前者失败@古纳德：我无法理解

#/{{{}”）；警报（1）/“；}

。你能解释一下这段代码吗，当然除了alert？

   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');