javascript - 在模板中连接 url 的 Angular 如何比在其他位置更不安全？

Question

我有一个类似于此的 angularjs 模板:

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

但是这会导致 $interpolate:noconcat error .与此模板相比:

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

甚至:

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

(其中 createThumbnailURL 是一个简单的过滤器，它与上面的连接相同)工作得很好。

文档说:

Concatenating expressions makes it hard to reason about whether some combination of concatenated values are unsafe to use and could easily lead to XSS.

是的，静态 URL 总是比串联的 URL 更容易评估，我明白这一点。然而，REST-API 的 URL 可以通过简单的连接构建，并且连接必须完成，这对我来说并不罕见。somehwere。我可以在 Controller 甚至服务器端执行此操作，但是如何改进将连接移动到其他地方的任何东西？处理该问题的推荐方法是什么？

更新

这是错误的演示: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}}/缩略图”。 TBH，我不确定是否存在严重差异，但这些都是判断电话。

---

您有一些替代方法来处理这种烦恼:

1) 在 $sce.trustAs()

中包裹您的 url 结构

<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 规则。