Angular › Angular Security (XSS, Sanitization & CSP)

Why should you avoid storing sensitive information, like an authentication token, directly in an Angular app's local storage?

Beginner

Answer

Data kept in local storage remains accessible to any JavaScript running on the page, meaning a successful cross site scripting attack could potentially read and steal that token. Storing sensitive tokens in a properly configured cookie that JavaScript cannot access at all offers stronger protection.

// Less secure, readable by any JavaScript running on the page, including malicious code
localStorage.setItem('authToken', token);

// More secure, the browser sends this cookie automatically, but JavaScript cannot read its value
// (this cookie must be set by the server with the HttpOnly flag)

Real-world example A banking app avoids storing its authentication token in a place JavaScript can read, choosing instead to rely on a secure cookie set by the server, reducing the damage a successful cross site scripting attack could cause.

Common follow-ups: What does the HttpOnly flag on a cookie actually prevent JavaScript from doing?;What other common security practices should an Angular app follow alongside this one?

HTTP Client & Interceptors;Dependency Injection Providers & Injection Tokens