Angular Security

Security protects your visitors and their data from attackers. Angular includes strong safety features by default, but developers still make choices that open or close doors. The most common web threats and the habits that keep your Angular application safe.

The House Safety Idea

A house has a lock on the front door, a lock on the windows, and a rule about who gets a key. One lock alone does not protect the family. Web security works the same way. You combine several small protections, and each one covers a different weakness.

 Visitor input
      |
      v
+------------------+   +------------------+   +------------------+
| Angular cleans   |-> | Server checks    |-> | Data is stored   |
| unsafe content   |   | login and rules  |   | safely           |
+------------------+   +------------------+   +------------------+
   Layer 1                 Layer 2                Layer 3

Cross-Site Scripting

Cross-site scripting, often called XSS, happens when an attacker places harmful code into your page. A comment box that shows raw text from visitors is a typical target. The harmful code then runs in other visitors' browsers.

Angular treats all values as untrusted. When you show a value with curly braces, Angular converts special characters into harmless text.

<p>{{ userComment }}</p>

If a visitor types a script tag, the page prints it as plain text and does not run it.

Avoid Unsafe Shortcuts

Angular offers methods that skip its cleaning, such as bypassSecurityTrustHtml. Use them only for content that you wrote and control. Never use them on text from visitors, search results, or outside servers.

// Risky: skips Angular protection
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(userInput);

The innerHTML binding also deserves care. Angular cleans the value before it shows, and that protection should stay in place.

Cross-Site Request Forgery

Cross-site request forgery, known as CSRF, tricks a logged-in visitor into sending a request they did not intend. The attacker relies on the browser sending login cookies automatically. Servers defend against it with a secret token for each session. Angular reads the token from a cookie named XSRF-TOKEN and sends it back in a header named X-XSRF-TOKEN. Your server must create and verify the token for this protection to work.

Protect Pages with Guards

Route guards hide pages from visitors who have not logged in. A guard improves the experience, but it does not replace server checks. Anyone can read the code that runs in their own browser. The server must verify permission on every request for private data.

Handle Tokens Carefully

A login token proves who the visitor is. Treat it like a house key. Prefer cookies marked HttpOnly and Secure because scripts cannot read them. Local storage is easy to use, but any injected script can read it. Set short expiry times so a stolen token stops working soon.

Use HTTPS Everywhere

HTTPS encrypts traffic between the browser and the server. Without it, anyone on the same network can read passwords and personal details. Serve your whole application over HTTPS, and redirect plain HTTP requests.

Keep Packages Updated

Your project depends on many packages written by other people. Old versions can contain known weaknesses. Run the audit command regularly and update packages when fixes appear.

npm audit
ng update

Never Store Secrets in Angular Code

Everything in an Angular application downloads to the visitor's browser. Anyone can read it. Never place private API keys, database passwords, or admin secrets in your code or environment files. Keep secrets on the server, and let the server call private services for you.

Security Checklist

Practice Exercise

Build a comment page that shows text typed by the visitor. Type a line that contains an HTML tag and confirm that the page prints it as text. Then open your project folder, run the audit command, and read the report. Note each warning and look up its fix.

Key Points

• Angular cleans values in templates to block harmful scripts.
• Avoid bypass methods on any visitor content.
• Guards improve the experience, and the server enforces real permission.
• Use HTTPS, secure token storage, and updated packages.
• Keep secrets out of browser code.