在我们的 Angular 应用程序中,我们有一个在服务器端填充用户内容的链接。所以我们需要告诉 Angular 不要解释那个链接内容。否则,如果用户或攻击者将 Angular 绑定表达式放在那里(比如 {{User.Password}}),那么 Angular 会评估它,从而打开一个安全漏洞——一种 XSS 攻击。
ng-non-bindable主要是这样做的。但是,我们也希望链接本身由 Angular 操作。
<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': isSiteSelected(@site.value.ID) }">@site.value.Name</a>
@site.value.Name 是插入内容的服务器端代码。
如果我们将 ng-non-bindable 放在 a 元素上,那么 ng-class 将不起作用。我能看到的唯一解决方案是在其中插入另一个 span/div 并将 ng-non-bindable 应用于:
<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': isSiteSelected(@site.value.ID) }"><span ng-non-bindable>@site.value.Name</span></a>
这看起来很笨拙,必须修改 HTML 结构才能阻止 Angular 干扰服务器端数据。
有没有更清洁的解决方案?
理想情况下,我希望 ng-non-bindable (或变体)表示“不绑定内容,但将此元素视为正常”。