影响Angular和React应用的寻常几大漏洞

发布时间：2022-06-12 14:52 所属栏目：53 来源：互联网

导读：目前大多数应用程序都会包含：服务器端逻辑、客户端逻辑、数据存储、数据传输、以及API等多个组件。与此同时，每种语言、框架、以及环境的使用，都会让应用程序暴露于一组独特的漏洞之中。为了保证这些组件的安全，第一时间发现应用的漏洞，进而构建出一个安

　　目前大多数应用程序都会包含：服务器端逻辑、客户端逻辑、数据存储、数据传输、以及API等多个组件。与此同时，每种语言、框架、以及环境的使用，都会让应用程序暴露于一组独特的漏洞之中。为了保证这些组件的安全，第一时间发现应用的漏洞，进而构建出一个安全态势较高的应用，往往需要我们付出不懈的努力。

　　值得庆幸的是，大多应用程序的漏洞都有着相似、甚至相同的底层原因。研究这些常见的漏洞类型、以及背后的原因，将有助于我们对应用程序进行恰当的防护。

　　下面，我将和您一起讨论影响Angular和React应用的如下六种最常见的漏洞，以及如何发现和预防它们：

　　身份验证绕过
　　访问控制不当
　　开放式重定向
　　跨站请求伪造 (CSRF)
　　模板注入
　　跨站点脚本包含 (XSSI)
　　身份验证绕过
　　身份验证是指在执行敏感操作、或访问敏感数据之前，先验明身份的合法性。如果在应用程序上未能正确地实施身份验证，那么攻击者将可以利用此类错误配置，来访问他们本不该能够访问到的服务与功能。例如，Angular通常使用AppRoutingModule来进行路由。在将用户引导至应用程序中的敏感路由之前，您应该检查用户是否已通过了身份验证，并被授权了访问该资源。请参考如下代码段：

　　目前，我们有多种方式为用户配置授权，其中包括：基于角色的访问控制、基于所有权的访问控制、以及访问控制列表等。而开发人员常犯的一种错误是在客户端执行授权检查。由于攻击者可以操控和覆盖客户端的检查，因此这是不安全的。可见，此类授权检查必须使用服务器端的代码来执行。请参考如下代码段：

　　复制
　　export class AdministratorGuard implements CanActivate {
　　 constructor(private authService: AuthService, private router: Router) {}
　　 canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<true | UrlTree> {
　　    // Check whether this user is an administratoor.
　　    return this.authService.isAdmin().pipe(
　　      map(isAdmin => {
　　        if (!isAdmin) {
　　          return this.router.parseUrl('/')
　　        }
　　        return isAdmin
　　      })
　　    )
　　 }
　　}
　　export class AuthService {
　　 constructor(private http: HttpClient) {}
　　 // Whether the user is currently logged in.
　　 loggedIn: boolean | null = null
　　 // The user object object encompassing the user's name and role. Will be set
　　 user: User | null = null
　　 // Check whether the current user is an administrator.
　　 isAdmin(): Observable<boolean> {
　　    return this.getCurrentUser().pipe(map(user => {
　　      return user != null && user.role === 'admin'
　　    }))
　　 }
　　 // Get the user definition from local state, or the server (if this is the first time we are checking).
　　 getCurrentUser(): Observable<User | null> {
　　    if (this.loggedIn !== null) {
　　      return of(this.user)
　
　　在开放式重定向攻击发生时，攻击者通过向用户提供来自合法站点的URL，以欺骗用户访问某个外部站点。也就是说，该URL会将其重定到其他站点。而该站点一面设法让用户相信他们仍然在原始网站上，一面帮助攻击者构建出更加看似可信的网络钓鱼活动。

　　为了防止开放式重定向，您需要确保应用程序不会轻易将用户重定向到那些恶意站点的位置。例如，您可以通过验证重定向URL，来完全禁止离站重定向行为。请参考如下代码段：

　　复制
　　export class LoginComponent {
　　
　　 // The username and password entered by the user in the login form.
　　 username = '';
　　 password = '';
　　
　　 // The destination URL to redirect the user to once they log in successfully.
　　 destinationURL = '/feed'
　　
　　 constructor(private authService : AuthService,
　　              private route       : ActivatedRoute,
　　              private router      : Router) { }
　　
　　 ngOnInit() {
　　    this.destinationURL = this.route.snapshot.queryParams['destination'] || '/feed';
　　 }
　　
　　 onSubmit() {
　　    this.authService.login(this.username, this.password)
　　      .subscribe(
　　        () => {
　　          // After the user has lgged in, redirect them to their desired destination.
　　          let url = this.destinationURL
　　
　　          // Confirm that the URL is a relative path - i.e. starting with a single '/' characters.
　　          if (!url.match(/^\/[^\/\\]/)) {
　　            url = '/feed'
　　          }
　　
　　          this.router.navigate([ url ])

　　当然，我们还有许多其他方法可以防止开放式重定向的发生。例如：对请求引用方予以检查、或使用页面索引进行重定向。不过，正因为验证URL相对比较困难，因此开放式重定向仍然是当代Web应用普遍存在的问题。

　　跨站请求伪造
　　跨站点请求伪造(Cross-Site Request Forgery，CSRF)是一种客户端技术，可用于攻击Web应用的其他用户。使用CSRF，攻击者可以发送虚假的、来自受害者的HTTP请求，去执行攻击者的危害性操作。例如，攻击者会在未经许可的情况下，更改受害者的密码、或从其银行账户里转账。

（编辑：ASP站长网）