Loading...
Loading...
ALWAYS use when working with Angular Security, XSS prevention, CSRF protection, Content Security Policy, or sanitization in Angular applications.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-securityimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) {}
getSafeHtml(html: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(html);
}// Only use when content is trusted
this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(userInput);
this.safeScript = this.sanitizer.bypassSecurityTrustScript(script);
this.safeStyle = this.sanitizer.bypassSecurityTrustStyle(style);
this.safeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);// Automatically uses XSRF-TOKEN cookie
http.get('/api/data').subscribe();
// Configure CSRF
provideHttpClient(
withXsrfConfiguration({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
})
)@Component({
template: `<div [innerHTML]="safeContent"></div>`
})
export class MyComponent {
// Angular sanitizes automatically
safeContent = '<p>Safe content</p>';
}// ❌ Dangerous
eval(userInput);
// ✅ Safe - use Angular's binding
{{ userInput }}<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">import { provideTrustedTypes } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideTrustedTypes()
]
};import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'escapeHtml' })
export class EscapeHtmlPipe implements PipeTransform {
transform(value: string): string {
return value
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
}export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = inject(AuthService).getToken();
if (token) {
const authReq = req.clone({
setHeaders: { Authorization: `Bearer ${token}` }
});
return next(authReq);
}
return next(req);
};export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
const router = inject(Router);
if (auth.isAuthenticated()) {
return true;
}
return router.createUrlTree(['/login']);
};