影响Angular和React应用的常见六大漏洞

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
}

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 ])
        })
  }
}

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-CSRF-TOKEN'
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

@Component({
  selector: 'app-header',
  template: '<h1>' + (window.location.hash || 'Home') + '</h1>'
})
export class HeaderComponent {}

@Component({
  selector: 'app-header',
  template: '<h1>{{ title }}</h1>'
})
export class HeaderComponent {
  title = ''  
        
  ngOnInit() {
    this.title = window.location.hash || 'Home';
  }
}

// The configuration information we will retrieve from the server.
export interface Config {
  username     : string
  accessToken  : string
  role         : string
}
    
@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) {}
    
  // Retrieve configuration information from the server.
  getConfig() {
    return this.http.get<Config>('api/config')
      .pipe(
        catchError(this.handleError) 
      )
  }
    
  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      // A client-side or network error occurred. Handle it accordingly.
      log.error('An error occurred:', error.error)
    } else {
      // The server returned an unsuccessful response code.
      log.error(`Backend returned code ${error.status}, body was: `, error.error)
    }
        
    return throwError('An unexpected error occurred loading configuration.')
  }
}