与其他位置相比，在角度模板中串联URL的安全性如何？

Question

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

<img ng:src="/resources/{{id}}/thumbnail" />

但是，这会导致$
interpolate：noconcat错误
。与此模板相反：

<img ng:src="{{fullUrl}}" />

甚至：

<img ng:src="{{id|createThumbnailURL}}" />

（其中createThumbnailURL是一个简单的过滤器，它执行与上述相同的隐含条件）完全可以正常工作。

该文档说：

串联表达式使人们很难推理串联值的某种组合是否不安全使用并且很容易导致XSS。

是的，静态URL总是比串联URL更容易评估，我明白了这一点。但是，拥有REST-API的URL可以通过简单的串联来构造，并且必须在 某种程度上
进行串联对我来说并不罕见。我可以在控制器甚至服务器端执行此操作，但是 如何改善将串联移动到其他位置的功能呢？ 而
什么是解决这个问题的推荐的方法？

更新

这是该错误的演示：http : //cipher-
code.de/tmp/angular3/index.xhtml

也许与页面是XML有关。

Answer 1

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

更具体地说，在Angular认为容易受到攻击的情况下（如url），允许的插值较少（严格性）。您的URL串联被“清除”。

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

您可能会感到困惑，为什么全字符串内插ng:src="{{fullUrl}}"比字符串串联安全得多ng:src="/resources/{{id}}/thumbnail"。TBH，我不确定两者之间是否存在重大差异，但这只是判断。

您可以使用其他方法来解决这种烦恼：

1） 将您的网址结构包装在里面$sce.trustAs()

<img ng:src="sce.trustAs('url', '/resources/{{id}}/thumbnail')" />

2） 如果选择，您可以在整个应用程序中禁用SCE

angular.module('myApp').config(function($sceProvider) {
    $sceProvider.enabled(false);
});

更正：

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

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

        return truststring;
    }

和您的指令调用看起来像

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

在这种情况下，如果将串联包装在一个函数中，则可能甚至不需要取消其消毒处理，因为您不会违反SCE规则。