Security Best Practices in AngularJS

अब हम AngularJS के एक सबसे ज़रूरी और serious chapter पर आए हैं:

🔐 Security Best Practices in AngularJS

(अपनी AngularJS App को Hackers से कैसे बचाएं?)

---

🤔 क्यों AngularJS में Security की ज़रूरत है?

AngularJS front-end framework है, लेकिन फिर भी:

• Data leakage
• Cross-Site Scripting (XSS)
• Untrusted API Calls
• DOM Injection
  …जैसी vulnerabilities को अगर सही से handle न किया जाए, तो आपकी app और users दोनों को नुकसान हो सकता है।

---

🔑 Security की Core Guidelines:

🔴 खतरा	🔒 बचाव
XSS (Script Injection)	Trust ना करें user input को
Unsecured APIs	Token-based Auth का use करें
CSRF	Server-side protection implement करें
Clickjacking	Proper headers set करें (X-Frame-Options)

---

✅ 1. Never Trust User Input ❌

User जो भी form या input field में डाले, उसे sanitize किए बिना template में directly bind न करें।

Bad:

<p ng-bind-html="user.bio"></p> <!-- Untrusted input -->

Better:

app.controller('MainCtrl', function($scope, $sce) {
  $scope.user = {};
  $scope.user.bio = $sce.trustAsHtml('<p>This is safe</p>');
});

🔐 $sce = Strict Contextual Escaping
➡️ ये AngularJS को बताता है कि कौन सा data safe है।

---

✅ 2. Avoid ng-bind-html unless absolutely necessary

अगर आपको इसे use करना ही है, तो:

• Input को sanitize करें
• Trusted HTML source का use करें

---

✅ 3. Use $http Headers with Caution

Never trust any external API blindly.

Example (with token):

$http({
  method: 'GET',
  url: '/api/data',
  headers: {
    'Authorization': 'Bearer ' + token
  }
});

---

✅ 4. Prevent XSS in Templates

Avoid this:

<div>{{ user.input }}</div> <!-- Auto escapes normally, but be careful -->

AngularJS auto-escapes {{ }} expressions, but DOM manipulation or unsafe HTML can break this.

Avoid direct DOM changes using jQuery or innerHTML.

---

✅ 5. Disable Debug Info in Production

app.config(function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

🔐 इससे कोई user browser से Angular internals inspect नहीं कर सकेगा।

---

✅ 6. Sanitize All HTML Inputs

Use ngSanitize module to filter out malicious scripts from user content.

Step 1: Include it

<script src="angular-sanitize.min.js"></script>

Step 2: Declare dependency

angular.module('myApp', ['ngSanitize']);

Step 3: Use ng-bind-html safely

<div ng-bind-html="trustedHtml"></div>

HTML should be sanitized or passed via $sce.trustAsHtml() only if it’s safe.

---

✅ 7. Secure Your API with Token Auth / OAuth

Make sure your API uses:

• JWT Token Auth
• Access Control headers
• HTTPS only
• Rate limiting

---

✅ 8. Use CSP (Content Security Policy)

Server से यह header भेजें:

Content-Security-Policy: default-src 'self'

➡️ इससे unauthorized scripts (XSS) को load होने से रोका जा सकता है।

---

✅ 9. Prevent Clickjacking

Header set करें:

X-Frame-Options: DENY

➡️ कोई और site आपकी app को iframe में embed नहीं कर पाएगी।

---

✅ 10. Keep AngularJS Updated (if using 1.x)

AngularJS के पुराने versions में कई known vulnerabilities हैं।
➡️ Use the latest v1.8.3

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में XSS से बचने के लिए कौन सा service use होता है?
2. $sce.trustAsHtml() का use कब करना चाहिए और क्यों?
3. क्या AngularJS में CSRF protection है? अगर नहीं, तो कहां implement करना चाहिए?

---

✅ आपने क्या सीखा?

• AngularJS में common security threats और उनसे बचाव
• $sce, ngSanitize, $http headers का safe use
• Secure API integration (JWT, HTTPS)
• Debug info disable, CSP headers, and X-Frame protection
• DOM access और input sanitization क्यों जरूरी है

---

🎯 अब आप एक secure AngularJS app बना सकते हैं जो user के data और आपकी backend logic को safe रखे — बिना performance या flexibility खोए।