Course Progress 86%

AngularJS Security

← AngularJS Custom Filters AngularJS Error Handling →

AngularJS एक powerful framework है, लेकिन अगर security concepts को सही से समझकर implement न किया जाए तो application vulnerable हो सकती है। AngularJS security का main goal यह है कि user input, data binding और server communication को सुरक्षित रखा जाए ताकि XSS, CSRF और अन्य common attacks से बचा जा सके।

इस chapter में आप सीखेंगे:

  • AngularJS में security क्यों जरूरी है
  • XSS (Cross-Site Scripting) क्या है और AngularJS कैसे protect करता है
  • $sce (Strict Contextual Escaping) क्या है
  • CSRF protection कैसे काम करता है
  • Best practices for secure AngularJS applications

AngularJS में Security क्यों जरूरी है

Web applications में:

  • User input dynamic होता है
  • Data server से आता-जाता रहता है
  • HTML dynamically render होती है

अगर input sanitize न किया जाए तो attacker malicious script inject कर सकता है, जिससे:

  • User data चोरी हो सकता है
  • Session hijack हो सकता है
  • Application compromise हो सकती है

Cross-Site Scripting (XSS)

XSS attack में attacker malicious JavaScript code inject करता है जो browser में execute हो जाता है।

Example of dangerous input:

<script>alert('Hacked')</script>

अगर यह code page में execute हो गया तो application insecure है।

AngularJS XSS से कैसे बचाता है

AngularJS by default:

  • Expressions ({{ }}) को escape करता है
  • Unsafe HTML को automatically sanitize करता है

Example: Safe Data Binding

<p>{{ userInput }}</p>

Explanation

  • AngularJS userInput को HTML की तरह render नहीं करता
  • Script tags automatically escape हो जाते हैं
  • XSS attack block हो जाता है

ng-bind vs ng-bind-html

ng-bind (Safe)

<p ng-bind="message"></p>

Explanation

  • Plain text bind होता है
  • HTML render नहीं होती
  • Safe option है

ng-bind-html (Potentially Unsafe)

<p ng-bind-html="htmlContent"></p>

Explanation

  • HTML render होती है
  • Direct use करने से XSS risk हो सकता है
  • $sce के साथ use करना जरूरी है

$sce – Strict Contextual Escaping

$sce AngularJS की security service है जो unsafe content को explicitly trust या reject करती है।

Example: Trusted HTML

app.controller("myCtrl", function($scope, $sce) {
  $scope.htmlContent = $sce.trustAsHtml("<b>Hello AngularJS</b>");
});

<p ng-bind-html="htmlContent"></p>

Code Explanation

  • $sce.trustAsHtml() AngularJS को बताता है कि content safe है
  • AngularJS बिना error HTML render करता है
  • Developer responsibility होती है content safe होने की

Unsafe $sce Disable करना (Not Recommended)

app.config(function($sceProvider) {
  $sceProvider.enabled(false);
});

Explanation

  • Security पूरी तरह disable हो जाती है
  • XSS risk बहुत बढ़ जाता है
  • Production application में कभी use नहीं करना चाहिए

CSRF (Cross-Site Request Forgery)

CSRF attack में attacker user की identity का misuse करके unauthorized request भेजता है।

Example:

  • User logged-in है
  • Malicious site background में request भेज देती है

AngularJS CSRF Protection

AngularJS $http automatically CSRF token handle करता है।

Default Behavior

  • Cookie से token read करता है
  • Request header में send करता है

Example Configuration

app.config(function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'XSRF-TOKEN';
  $httpProvider.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';
});

Explanation

  • Server token cookie में set करता है
  • AngularJS हर request में token attach करता है
  • Unauthorized request reject हो जाती है

Avoid Dangerous Functions

AngularJS में कुछ functions risky हो सकते हैं अगर गलत तरीके से use किए जाएं:

  • eval()
  • ng-bind-html without $sce
  • User input directly DOM में inject करना

Secure Input Handling

Bad Practice

<input ng-model="userInput">
<div ng-bind-html="userInput"></div>

Explanation

  • User input directly HTML में render हो रहा है
  • XSS risk है

Good Practice

<div>{{ userInput }}</div>

Explanation

  • AngularJS automatically escape करता है
  • Secure output मिलता है

Content Security Policy (CSP)

AngularJS CSP mode support करता है जिससे inline scripts block हो जाते हैं।

<html ng-app="myApp" ng-csp>

Explanation

  • Inline JavaScript execute नहीं होती
  • XSS attacks reduce होते हैं
  • High-security environments में useful

Best Practices for AngularJS Security

  • User input को कभी blindly trust न करें
  • $sce का use carefully करें
  • Security disable न करें
  • CSRF tokens properly configure करें
  • Sensitive logic client-side पर न रखें

Summary

इस chapter में आपने सीखा:

  • AngularJS security का importance
  • XSS और CSRF attacks क्या हैं
  • AngularJS default security features
  • $sce और secure HTML binding
  • Secure AngularJS application बनाने के best practices
← AngularJS Custom Filters AngularJS Error Handling →
  • Home