Angular 如何确保用户输入不是恶意的？

Question

因此，我正在关注如何在 vanilla JS 中创建路由器的教程。 然后作者指出这只是为了了解事情是如何工作的，但出于多种原因，我们最好使用 Angular 或 React 之类的框架，其中包括 Angular 在将用户输入插入我们的 Z4C4AD1FCA02E7A3AA44DB3 之前对其进行了清理。

我的问题是，既然 Angular 都是前端，那么哪种机制可以防止黑客操纵它接受他的恶意代码？ 也许 Angular 调用了一些后端 API？ 仍然可以操纵，不是吗？

Answer 1

Angular 过滤和编码其模板中使用的任何值，以便无论插入其中的数据如何，它们都保持安全。 请参阅Angular 安全性。

用户可以发送恶意数据作为输入，但如果在 output 时正确编码，则它不会做任何事情。

Answer 2

在 angular 中，您可以验证表单输入，例如：

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

但理论上恶意用户仍然可以通过一些操纵输入向 api 发送请求。 为了防止这种情况，您的 API，您的后端服务器需要尽可能多地进行验证。 如果您的 API 只接受某些输入，那么您的应用程序至少对恶意用户输入是“安全的”。

Answer 3

您引用的内容称为 DOM XSS 或模板注入。 Angular 与其他 javascript 框架（和一般软件）一样并不完美。 Angular 解析安全性已被破坏和修复。 但通常会犯错误的是应用程序开发人员。 很多时候，一个代码示例被解释为一个功能齐全的软件，并在没有任何安全测试的情况下复制粘贴到多个源中。

Aarree 的反应是完全错误的。 XSS 检测也必须在客户端进行，以避免完全无法检测到的客户端注入，主要是 DOM 注入，但也可以在客户端停止一些突变 XSS 或奇怪的浏览器行为，但在服务器端不会。 这就是为什么一些顶级安全专家正在努力研究这样的项目： https://github.com/cure53/DOMPurify

例如，如果您正在阅读 hash 网址（就像 js 路由器一样），如果设计不当或犯了错误，则可能存在恶意注入。 在 innerHTML、模板、eval 或 html 属性以及其他接收器中非常常见。

我给你做了一个简单的例子，你可以测试：

<html>
<body>
<script>
eval(location.hash.substr(1))
</script>
</body>
</html>

只需将其保存为 xss.html 和 append #alert(1) 到 url。 当您使用#时，url 不会发送到服务器，服务器端无法检测到此漏洞，因为浏览器将地址栏中的# 和后面的所有内容从请求中剥离到服务器。

在这样的示例中，我可以回复您网站上的登录页面，并使用 javascript 添加一个键盘记录器，以便在 #url 之后将其发送给合法用户。 他会信任该链接并丢失他的帐户。 大多数情况下可以在 javascript 的 20 行中完成。 而url很容易造假： https://example.com/home/newFeature/login.php

Answer 4

所以 angular 不会自己调用后端 api。 但我可以想象它会正则表达式检查恶意代码或做一些类似的魔法。 但是，如果您想进行真正的验证，则永远不应该在前端。

应该使用前端验证来帮助用户填写正确的数据。 如果您想要验证安全性和恶意代码。 它应该发生在后端。

Angular 如何确保用户输入不是恶意的？

问题描述

4 个解决方案

解决方案1
1 2020-07-27 17:53:21

解决方案2
0 2020-07-27 06:46:47

解决方案3
0 2020-07-27 21:55:16

解决方案4
-1 2020-07-27 06:46:29

Angular 如何确保用户输入不是恶意的？

问题描述

4 个解决方案

解决方案1 1 2020-07-27 17:53:21

解决方案2 0 2020-07-27 06:46:47

解决方案3 0 2020-07-27 21:55:16

解决方案4 -1 2020-07-27 06:46:29

解决方案1
1 2020-07-27 17:53:21

解决方案2
0 2020-07-27 06:46:47

解决方案3
0 2020-07-27 21:55:16

解决方案4
-1 2020-07-27 06:46:29