AngularJS — Security

XSS Protection

AngularJS automatically sanitizes output:

<!-- Safe - automatically sanitized -->
<div>{{userInput}}</div>

<!-- Dangerous - use carefully -->
<div ng-bind-html="trustedHtml"></div>

Sanitization

app.filter('unsafe', function($sce) {
  return function(val) {
    return $sce.trustAsHtml(val);
  };
});

<div ng-bind-html="htmlContent | unsafe"></div>

CSRF Protection

// Configure CSRF token
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

Content Security

// Avoid ng-bind-html with untrusted content
// Use $sce.trustAsHtml() only when necessary

Input Validation

// Always validate on server
// Never trust client-side validation alone

Best Practices

Practice	Description
Sanitize output	Prevent XSS
Validate input	Prevent injection
Use HTTPS	Encrypt data
Store tokens securely	HttpOnly cookies
Implement CORS	Control access

Mini Practice

1. Sanitize user input
2. Use ng-bind-html safely
3. Add CSRF protection
4. Validate all input

Up Next

Congratulations! You've completed the AngularJS course.