Question

tl; dr;
是否可以更改angular的{{ }}绑定行为，以免清理/转义值？

完整问题
我们有一个由JSON REST API支持的相当大的angular 5应用程序。 REST API与已经建立多年的更大的系统和数据库接口。其他已建立的应用程序读写数据，关键是必须将所有应用程序中用户输入的数据逐字存储在数据库中，因为其他应用程序（旧版，非Web应用程序）需要读取和写入数据。

这意味着（最不希望的）REST API支持具有以下内容的POST和PUT：

{
  "reportName" : "<a href=\"http://somewhere.bad\">My report</a>",
  "reportType" : "VEHICLE"
}

（这是因为需要将数据逐字写入数据库，以便其他旧版非Web应用程序可以读取用户输入的数据）

目前，角度应用程序是REST API的唯一客户端，但是已经计划公开该API，以便其他客户端代码（包括第三方）可以使用它。

当前，REST API以输入并保留的形式返回数据：

{
  "reportName" : "<a href=\"http://somewhere.bad\">My report</a>",
  "reportType" : "VEHICLE"
}

角度5应用程序方便地在渲染（绑定？）之前清理或转义（？）这些值。角度模板将像这样绑定值：

<div>{{report.reportName}}</div>

所以屏幕上的输出是：

<a href="http://somewhere.bad">My report</a>

这是所需的行为。（原谅我毫无疑问地错误使用了角度术语-我更像是后端开发人员！）

不幸的是，我们已经对REST API进行了一次外部渗透测试，他们毫不奇怪地提出了XSS类型问题，他们的建议是REST API在出路时转义内容。他们的论点是安全性不应依赖客户端。虽然angular只能随意使用/转义，但其他客户端代码可能不会。
考虑到这一点，我在服务器端进行了更改，以便在响应正文中转义json字符串值：

{
  "reportName" : "&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;",
  "reportType" : "VEHICLE"
}

但是，现在，当然，angular正在清理/转义“＆”号，因此在屏幕上将其呈现为：

&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;

即。绑定已有效完成：

<div>&amp;lt;a href=&amp;quot;http://somewhere.bad&amp;quot;&amp;gt;My report&amp;lt;/a&amp;gt;</div>

我认为我们需要的是angular信任响应中的数据并将其逐字呈现。即。如果是插值而不是绑定（再次，请原谅我的术语！），它将有效地做到这一点：

<div>&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;</div>

这将导致屏幕渲染

<a href="http://somewhere.bad">My report</a>

这没关系，因为这是当前的行为。不会将它作为可点击的或可执行的标记位添加到DOM中-仅仅是文本。

是否存在一种全球性的方法来告诉5号角对待值？我们当然遇到的问题是，作为一个已经开发的，具有合理大小的应用程序，模板中可能有成千上万个{{ }}样式绑定，因此不要经历将这种语法更改为其他语法（我已经看到人们在做诸如<div innerHTML="{{report.reportName}}"/>之类的事情，或者使用诸如<div>{{report.reportName | safeHtml}}</div>之类的管道）我正在寻找更多的全局方法。

有什么想法吗？

如何为Angular 5绑定全局取消转义内容

0 个答案: