Security

AngularDart has built-in support for security. This guide covers common security concerns and how AngularDart helps protect your application.

Cross-Site Scripting (XSS)

XSS attacks allow an attacker to inject malicious code into your application. AngularDart treats all values as untrusted by default.

Interpolation is safe

AngularDart automatically escapes interpolated values:

<!-- If user.name contains <script>alert('xss')</script>,
     it will be displayed as text, not executed -->
<p>Hello {{ user.name }}</p>

Property binding is safe

AngularDart sanitizes values in property bindings:

<!-- URLs are sanitized to prevent javascript: attacks -->
<a [href]="userProvidedUrl">Link</a>

<!-- Styles are sanitized -->
<div [style.background-image]="userProvidedStyle">Content</div>

innerHtml requires sanitization

When using innerHtml, AngularDart sanitizes the HTML to remove dangerous content:

<div [innerHtml]="htmlContent"></div>

// This will be sanitized - <script> tags will be removed
String htmlContent = '<p>Safe content</p><script>alert("xss")</script>';

Trusted HTML content

If you need to render HTML that you fully trust (e.g., from a markdown renderer or a CMS), you can use the built-in SafeHtml type or the SafeHtmlDirective:

Using SafeHtml type

import 'package:angulardart/angulardart.dart';

@Component(
  selector: 'trusted-content',
  template: '<div [innerHtml]="trustedHtml"></div>',
)
class TrustedContentComponent {
  late final SafeHtml trustedHtml;

  TrustedContentComponent() {
    trustedHtml = SafeHtml.trusted(
      '<p>This HTML is trusted and will not be sanitized.</p>'
    );
  }
}

Using SafeHtmlDirective

import 'package:angulardart/angulardart.dart';

@Component(
  selector: 'trusted-content',
  template: '<div [safeHtml]="trustedHtml"></div>',
  directives: [SafeHtmlDirective, DocContentLinksDirective],
)
class TrustedContentComponent {
  String trustedHtml = '<p>This HTML is trusted and will not be sanitized.</p>';
}

Warning: Only bypass sanitization for content you fully trust. This can expose your users to XSS attacks.

Content Security Policy (CSP)

A CSP header tells the browser which sources of content are allowed. Configure your server to send appropriate CSP headers.

Example CSP header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com

Trusted Types

AngularDart supports the Trusted Types API for additional DOM XSS protection.

HTTP Security

Use HTTPS

Always serve your application over HTTPS in production.

Validate and sanitize server responses

Never trust data from the server. Always validate and sanitize:

Future<void> loadData() async {
  final response = await http.get(Uri.parse('/api/data'));
  final data = jsonDecode(response.body);

  // Validate the data structure
  if (data is! Map) throw FormatException('Invalid response');

  // Sanitize string values
  final name = sanitizeString(data['name'] as String?);
}

Dependency Security

Keep dependencies updated

Regularly update your dependencies to patch security vulnerabilities:

dart pub upgrade
dart pub outdated

Audit dependencies

Check for known vulnerabilities:

dart pub deps

Best Practices

1. Never trust user input - Always validate and sanitize
2. Use AngularDart's built-in sanitization - Don't bypass it unless absolutely necessary
3. Implement CSP headers - Restrict content sources
4. Use HTTPS - Encrypt all traffic
5. Keep dependencies updated - Patch vulnerabilities
6. Validate server responses - Don't trust the server blindly
7. Use Content Security Policy - Restrict script sources
8. Avoid eval() - Never use eval() or dynamic code execution
9. Sanitize URLs - Validate URLs before navigation
10. Report security issues - File issues on GitHub for security bugs