Javascript 在模板中连接URL的安全性如何低于在其他位置？

我有一个angularjs模板，看起来与此类似：

然而，这导致了一个错误。与此相反，此模板：

甚至：

（其中createThumbnailURL是一个简单的过滤器，它执行与上面相同的操作）工作完全正常

文件说：

连接表达式使得很难推理某些 串联值的组合使用起来不安全，而且很容易 导致XSS

是的，静态URL总是比串联URL更容易评估，我明白了这一点。然而，对于我来说，RESTAPI具有可以通过简单连接构建的URL，并且连接必须在某个地方完成，这听起来并不少见。我可以在控制器甚至服务器端执行此操作，但是这如何改进将连接移动到其他位置？和处理此问题的建议方法是什么？

更新

下面是错误的演示：

---

可能这与页面是XML有关。

这称为SCE（严格上下文转义）： 与许多“严格”模式一样，这是可配置的。但从v1.2开始，它会自动设置为true

更具体地说，在被认为易受攻击的上下文（如url）中，允许的插值较少（严格）。您的URL连接正在被“清理”

您已经知道原因：XSS攻击。它还用于保护开发人员：稍有错误的url可能会导致数据删除或覆盖

您可能会感到困惑，为什么完整字符串插值

ng:src=“{{fullUrl}}”

比字符串串联

ng:src=“/resources/{id}}/thumbnail”

安全得多。TBH，我不确定是否有严重的区别，但这是判断的要求

---

您可以选择一些方法来处理这种烦恼：

1）将您的url结构包装在

$sce.trustAs（）中


更正：

您不能从指令调用$sce服务。只有$scope服务直接可用。但您可以使用函数（或使用函数的指令）

你的指令电话看起来像

<img ng:src="{{ createUrl(id) }}" />



在这种情况下，如果您将连接包装在函数中，您甚至可能不需要对其进行反清理，因为您不会违反SCE规则。
我加入团队有点晚，但这是我的两分钱：

简单地说：

（1）

Angular使用服务执行“严格概念转义”（SCE）。基本上，SCE“需要在某些上下文中进行绑定，以生成标记为可安全用于该上下文的值”

它是Angular为开发者提供的一种保护机制，可以方便地保护你的应用（某些方面）（这对于基于用户输入绑定值的应用更为重要）

（2）

某些位置（即属性）被认为更容易受到某些类型的攻击（例如XSS），SCE对其使用更严格的规则。一些示例是表单的
操作
或框架或对象的
src
/
ngSrc

（3）

根据Angular的当前实现（v1.2.16），当为此类易受攻击的属性分配一个由1个以上“部分”组成的值时，将引发错误。一部分（根据
$interpolate
服务的解析算法）要么是
{{
}
中包含的表达式的一部分，要么是
{{
}}
之外的表达式的一部分

在您的例子中，
/resources/{{id}}/thumbnail
被解析为3个部分：

/resources/
，
{{{id}}
，
/thumbnail


那么，超过1个零件有什么问题

在视图中串联与在控制器中串联并使用单个零件表达式相比，没有什么比这更不安全的了

引用Angular的来源（强调我的）：

//串接表达式使得很难推断
//串联值使用起来不安全，很容易导致XSS。通过要求
//iframe[src]、object[src]等使用单个表达式，我们确保值

//所使用的是由一些JS代码分配或构造的更易测试的地方或

//明显地将该值绑定到某个用户控制的值。这有助于减少

//审核XSS问题时的加载

因此，Angular的方法是强制您执行“更安全”的操作。在视图中构造值的可测试性较低且较不明确，因此您（或其他人）将更难审核应用程序的XSS漏洞（增加安全问题的可能性）


有几种方法（已经在DaveA的回答中提到）可以避免这种情况。
（不过，我肯定不会完全禁用
$sce
）
非常确定您的第一个示例应该有效。这是一个有效的示例：您可以创建一个plunker来说明您的问题吗？@Beyers:我在我的问题中添加了一个指向演示的链接。当您问我时，我第一次尝试了plunkr，但我无法重现那里的错误。这是意外出现的……您还可以使用
getTrustedResourceUrl（'/resources/{id}}）/“缩略图”）；
我在这两种情况下都会出现同样的错误。@Aperçu:我在@DaveA:上也会出现同样的错误，这就是我现在要做的。实际上我在使用一个过滤器，但这并没有太大的区别。我仍然会被磨光，特别是因为似乎还有其他有效的规则
angular.module('myApp').config(function($sceProvider) {
    $sceProvider.enabled(false);
});

    $scope.createUrl = function (strName) {
        var truststring = '/resources/' + strName + '/thumbnail';

        return truststring;
    }

<img ng:src="{{ createUrl(id) }}" />