影响Angular和React应用的常见六大问题

发布时间：2022-06-07 15:56:41 所属栏目：安全来源：互联网

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

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

下面，我将和您一起讨论影响Angular和React应用的如下六种最常见的漏洞，以及如何发现和预防它们：
@NgModule({
    imports: [RouterModule.forRoot([

        // These paths are available to all users.
        { path: '', component: HomeComponent },
        { path: 'features', component: FeaturesComponent },
        { path: 'login', component: LoginComponent },

        // These routes are only available to users after logging in.
        { path: 'feed', component: FeedComponent, canActivate: [ AuthGuard ]},
        { path: 'profile', component: ProfileComponent, canActivate: [ AuthGuard ]},

        // This is the fall-through component when the route is not recognized.
        { path: '**', component: PageNotFoundComponent}

])],

    exports: [RouterModule]

})

export class AppRoutingModule {}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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

复制
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)
    }
    return this.http.get<User>('/api/auth', {
      responseType: 'json'
    }).pipe(
      tap({
        next: user => {
          // If we get a user definition from the server it indicates this user is logged in.
          this.user     = user
          this.loggedIn = true
        },
        error: error => {
          // A 401 response from the server indicates this user is not logged in.
          this.user     = null
          this.loggedIn = false
        }
      }),
      catchError(() => {
        return of(null)
      })
    )
  }
}
export interface User {
    username: string
    role:     string
}

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

浅析信息安全风险评估	几个机器身份管理的优
Kubernetes的零信任基	常用恶意软件剖析方法