在前端存储令牌和敏感信息的安全方法(Angular 8)

Question

我正在使用 Angular 8，我想使用 cookie 存储我的访问令牌和一些令牌。

所以我尝试将我的令牌存储在 cookie 中，我第一次工作，但在我看到当我想注销并清除我的 cookie 时，它们不会一直删除，并且出现了一些 401 状态(未授权(的错误。我正在使用ngx-cookie-service。您知道存储令牌的好方法和安全方法吗？这是我的身份验证服务：

public login(username: string, password: string) {
this.username = username;
this.password = password;
const params = new URLSearchParams();
params.append('username', username);
params.append('password', password);
params.append('grant_type', 'password');
const headers = new HttpHeaders({
'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
Authorization: 'Basic ' + btoa('Andricebrain:Aqwzsx1995')
});
const options = {
headers
};
this.httpClient
.post(
environment.baseUrlOauth + '/oauth/token',
params.toString(),
options
)
.subscribe(
data => {
this.getAuthorities(data);
console.log(data);
// this.router.navigate(['/home']);
},
error => {
this.toastr.error('Erreur', 'Login ou mot de passe incorrect');
}
);
}

getAuthorities(token): boolean {
const headers = new HttpHeaders({
'Content-type': 'application/json; charset=utf-8',
Authorization: 'Basic ' + btoa('Andricebrain:Aqwzsx1995')
});
const options = {
headers
};
this.httpClient
.get(
environment.baseUrlOauth +
'/oauth/check_token?token=' +
token.access_token,
options
)
.toPromise()
.then(
data => {
console.log(token);
this.saveToken(token, data);
// return true;
},
error => {
console.log(error);
alert('Error : get authorities');
// return false;
}
);
return false;
}
saveToken(token, check) {
const expireDate = new Date().getTime() + 1000 * token.expires_in;
this.cookie.set('access_token', token.access_token, expireDate);
this.cookie.set('refresh_token', token.refresh_token);
this.cookie.set('authorities', check.authorities);
this.cookie.set('user', JSON.stringify(check.user[0]));
this.authorities = check.authorities;
this.user = check.user[0];
this.router.navigate(['/home']);
}
// TokenInterceptorService
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
tap((ev: HttpEvent<any>) => {
if (ev instanceof HttpResponse) {
// console.log('processing response', ev);
// if (ev.status === 200) {
//   this.toastr.success('L'opération s'est bien passée :-)', 'Succès');
// }
//
// if (ev.status === 201) {
//   this.toastr.success('Votre objet a bien été créé :-)', 'Succès');
// }
}
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
if (error.error.error === 'invalid_token') {
// TODO: Token refreshing
// this.toastr.info('Nous tentons de vous reconnecter !', 'Reconnexion');
this.authService.refreshToken();
const token = this.cookie.get('access_token');
if (token) {
// this.toastr.info('Reconnexion', 'Nous avons presque réussi !');
req = req.clone({
setHeaders: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token
}
});
}
} else {
// Logout from account or do some other stuff
this.appService.logout();
}
if (error.error.error === 'unauthorized') {
// TODO: Token refreshing
// this.toastr.info('Vous ne pouvez pas accéder à cette ressource !', 'Accès Refusé');
}
}
/*
if (error.status === 409) {
this.toastr.error('Une donnée pose problème', 'Conflit');
}
if (error.status === 400) {
this.toastr.error('L'objet qui a été envoyé est mal construit !', 'Mauvaise requête');
}
*/
return throwError(error);
})
);
}

如果你能找到一个安全的解决方案，那就太好

了

Answer 1

在浏览器中存储令牌时，一个公认的答案是使用 JWT。 它们可以加密、签名或两者兼而有之。此外，它们在移动浏览器上比 cookie 效果更好。此库可以帮助您为您的角度应用程序获得正确的 JWT 设置。 https://github.com/auth0/angular2-jwt

您对 Cookie 的错误可能是由于它们未设置在正确的路径中。请记住，ngx-cookie 会将您的 cookie 设置在 URL 的当前路径上，您可能更愿意将它们设置在根目录。

cookieService.set( 'test', 'Hello World', 1, "/" );

好勇气！