有关 Angular 应用安全性的 4 个技巧
本帖最后由 AlexZ 于 2020-8-23 23:59 编辑数字化转型的全球涌入给基础设施带来压力。威胁者一直在不断改进其攻击技术。
如果发现一个漏洞，它将被利用。这就是为什么许多团队将安全性向左转移的原因，甚至是将开发方法从DevOps演变为DevSecOps的原因。
仍然存在一些担忧，其中大多数关注发布时间。但是，您不必为了安全性而牺牲快速发布。不一定非要非此即彼的问题。
在本文中，您将了解可以用来保护Angular应用程序的四种方法。这些是简单的安全做法，不应中断您的工作流程。
Angular 概述
Angular是一个框架，使您可以使用TypeScript构建单页应用程序（SPA），TypeScript是Microsoft开发的一种开源语言，它是JavaScript的严格超集。Angular提供了几个具有其核心功能的TypeScript库，并允许您添加更多库来实现其他可选功能。
Angular应用程序是使用NgModules构建的。模块为组件提供了编译上下文。Angular应用程序必须至少具有一个根模块，并且可能具有更多功能模块。
Angular体系结构围绕组件，视图和服务构建：
组件定义视图-您可以选择显示给用户并根据应用程序逻辑进行修改的屏幕元素。
组件使用服务-使用依赖注入将服务提供者添加到模块中，从而使Angular模块模块化并易于重用。
这两个组件和服务的类别，与装饰，其中包括元数据，它告诉角框架应如何使用。
Angular vs AngularJS：主要区别
Google在2010年首次发布了AngularJS（也称为Angular 1），并广受欢迎。但是，它面临来自React和Vue的激烈竞争。
2014年，Google宣布完全重写AngularJS，将其从JavaScript转换为TypeScript。TypeScript的优点是它提供了一些静态键入功能。他们将新版本命名为Angular 2。
从2开始，所有Angular版本都称为“ Angular”或“ Angular 2+”。
Angular 2对Angular用户来说是一个完全的改变—编程语言，体系结构和数据处理方式都发生了变化。如今，基于TypeScript的Angular 2+的版本为9，许多开发人员继续将AngularJS用作旧框架。
使用AngularJS时的安全注意事项
[*]AngularJS的主动性不如Angular 2+。Snyk报告说，较旧版本的AngularJS（1.7之前）具有29个已知的软件漏洞，包括原型污染，分布式拒绝服务（DDoS），跨站点脚本（XSS）和任意命令执行。
[*]查看这些漏洞，评估项目风险，并尽可能将AngularJS升级到最新版本。
[*]请注意，AngularJS 1.7只会一直维护到2021年6月终止。
我们其余的讨论将集中在较新的Angular 2+或“ Angular”上。
保护Angular应用程序的4种方法
查看以下最佳做法，以了解如何保护在Angular 2及更高版本上运行的应用程序。这些最佳实践将帮助你预防像跨站点脚本（XSS）和跨站请求伪造（CSRF），它可以是一个低调的自动攻击，但也可以是部分的攻击先进的持续威胁，作为第一进行更大的攻击。
1.防止跨站点脚本（XSS）
XSS攻击涉及攻击者将脚本插入程序包中的DOM元素中，以执行恶意操作，例如窃取用户数据。为了防止这种情况，您需要在几个地方清除不受信任的输入：
[*]HTML（绑定内部HTML）
[*]样式（CSS）
[*]属性（绑定值）
[*]资源（引用文件）
始终使用DomSanitizer将外部用户提供的不受信任的值转换为受信任的值。将safeValue绑定到innerHtml属性，然后将HTML字符串传递给service方法以获得安全值。
import { Component, OnInit } from '@angular/core';
import { MyService } from './data.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template: `<div = "safeValue"></div>`,
providers:
})
export class MyComponent implements OnInit {
safeValue: SafeHtml;
constructor(private secure: MyService) {
this.safeValue = this.secure.getSafeHtml("<h1>Sanitization Success</h1>");
}
ngOnInit() {
}
}2.不要自定义 Angular 库文件
定制Angular库以满足您的需求可能很诱人，但这样做会使您依赖于当前使用的Angular版本。您会发现很难升级到更高版本的Angular，并且可能会错过重要的安全修复程序和功能。改进和修复Angular库的最好方法是通过请求请求与社区共享您的更改。这将使其他开发人员可以查看您的更改，并考虑将其添加到Angular的下一版本中。
3.避免使用危险的Angular API端点
文档中将某些Angular API标记为安全风险，最常见的是ElementRef。此API使攻击者可以直接访问您页面上的DOM，并使您的应用容易受到XSS的攻击。仅当您别无选择，并且绝对需要直接DOM访问时，才使用此API。
建议您使用Angular本身提供的模板或数据绑定功能来代替ElementRef。您还可以使用Renderer2 API，它比使用ElementRef更安全。
4. HTTP级漏洞
使用Angular的内置功能可以防止跨站点请求伪造（CSRF）和跨站点脚本包含（XSSI）。虽然这些是需要在服务器端解决的安全问题，但是Angular的HttpClient提供了一些帮助程序，可以将您的应用程序与可以抵抗这些攻击的服务器集成在一起。
跨站请求伪造（CSRF）：
CSRF是一种攻击，应用程序信任的用户发送未经授权的恶意命令。减轻它的一种常见方法是让应用程序服务器发送包含在cookie中的随机身份验证令牌。客户端读取cookie，然后在所有后续请求中添加具有相同令牌的自定义请求标头。这样就可以拒绝没有身份验证令牌的攻击者的请求。
使用Angular HttpClient时，将在客户端获得对身份验证令牌的内置支持。
跨站点脚本包含（XSSI）：
XSSI是一种攻击，它使攻击者的网站可以从应用程序的JSON API中读取数据。它利用了旧浏览器上的漏洞，该漏洞使得可以重写本机JavaScript对象构造函数。然后，它可以使用标签提供API URL 。<script>
服务器可以通过使所有JSON响应变为不可执行来减轻这种攻击。例如，可以通过在它们前面加上字符串“）]}'，\ n”来完成。Angular的HttpClient识别此约定，并自动从所有JSON响应中剥离字符串“）]}'，\ n”。
其他Angular性能资源：
[*]加快Angular应用的速度-14个Angular优化技巧
[*]向您的Angular应用程序添加涡轮增压数据网格
[*]使用Web Workers加快您的Angular应用程序
[*]在Angular中使用Web组件
[*]JSON Web令牌的Angular安全性和身份验证指南
Angular安全性-结论
安全是至关重要的问题，不仅安全专家而且开发人员都应该解决。编写安全代码的简单做法可以帮助防止错误和错误的利用。当然，没有“完美”之类的东西，并且总会有需要修复的补丁，要发布的补丁以及需要响应的紧急事件。但是，您可以采用安全的代码思路，并避免不必要的风险。
寻找与框架无关的Web组件吗？GrapeCity具有一整套JavaScript UI组件和功能强大的类似Excel的JavaScript电子表格组件。我们对Angular（以及React和Vue）具有深厚的支持，并致力于扩展我们的组件以在现代JavaScript框架中使用。
页:
[1]