javascript / intermediate
Snippet
Safely Bypassing Security Trust for Embedded Iframes via DomSanitizer
Angular automatically sanitizes URLs bound to resource contexts like iframe `src` attributes to prevent XSS attacks. When embedding dynamic third-party resources, `DomSanitizer.bypassSecurityTrustResourceUrl` explicitly marks validated URLs as safe after applying strict origin verification checks.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Pipe, PipeTransform, inject } from '@angular/core';import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Pipe({name: 'safeMediaUrl',standalone: true})export class SafeMediaUrlPipe implements PipeTransform {private readonly sanitizer = inject(DomSanitizer);private readonly trustedOrigin = 'https://trusted-provider.example.com/';transform(rawUrl: string): SafeResourceUrl | null {if (!rawUrl || !rawUrl.startsWith(this.trustedOrigin)) {console.warn(`Untrusted media URL blocked: ${rawUrl}`);return null;}return this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);}}
angular
Breakdown
1
private readonly sanitizer = inject(DomSanitizer);
Injects Angular's built-in DomSanitizer service using functional dependency injection.
2
if (!rawUrl || !rawUrl.startsWith(this.trustedOrigin)) {
Validates the URL against an explicit trusted origin whitelist before bypassing security.
3
return this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
Instructs Angular's security mechanism that this specific resource URL is safe to load in an iframe.