找回密码
 立即注册

QQ登录

只需一步,快速开始

AlexZ 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-8-23 23:51  /   查看:2078  /  回复:0
本帖最后由 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方法以获得安全值。

  1. import { Component, OnInit } from '@angular/core';  
  2. import { MyService } from './data.service';  
  3. import { DomSanitizer, SafeHtml } from '@angular/platform-browser';  
  4. @Component({  
  5.   selector: 'app-root',  
  6.   template: `<div [innerHtml] = "safeValue"></div>`,  
  7.   providers: [MyService]  
  8. })  
  9. export class MyComponent implements OnInit {  
  10.   safeValue: SafeHtml;  
  11.   constructor(private secure: MyService) {  
  12.     this.safeValue = this.secure.getSafeHtml("<h1>Sanitization Success</h1>");  
  13.   }  
  14.   ngOnInit() {  
  15.   }  
  16. }
复制代码
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安全性-结论

安全是至关重要的问题,不仅安全专家而且开发人员都应该解决。编写安全代码的简单做法可以帮助防止错误和错误的利用。当然,没有“完美”之类的东西,并且总会有需要修复的补丁,要发布的补丁以及需要响应的紧急事件。但是,您可以采用安全的代码思路,并避免不必要的风险。

寻找与框架无关的Web组件吗?GrapeCity具有一整套JavaScript UI组件和功能强大的类似Excel的JavaScript电子表格组件。我们对Angular(以及React和Vue)具有深厚的支持,并致力于扩展我们的组件以在现代JavaScript框架中使用。


0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部