Posted on Jan 10, 2022 • Edited on Jan 10, 2023 • Originally published at codever.dev

How to disable Angular's build-in sanitization for an URL

Project: codever - File: backup-bookmarks-dialog.component.ts

On Codever you can backup your bookmarks and snippets. When backing up you are presented a dialog where you can choose to display the items in browser. For that we use a blob URL we know for sure it is safe.

To not get the unsafe prefix in your generated html I use the DomSanitizer and its method bypassSecurityTrustUrl as shown in the example below:

export class BackupBookmarksDialogComponent implements OnInit { backupType: string; // 'bookmarks' | 'snippets'; blobUrl: any; sanitizedBlobUrl: any; filename: string; constructor( private dialogRef: MatDialogRef<BackupBookmarksDialogComponent>, private router: Router, @Inject(MAT_DIALOG_DATA) data, private sanitizer: DomSanitizer ) { this.sanitizedBlobUrl = this.sanitizer.bypassSecurityTrustUrl(data.blobUrl); this.blobUrl = data.blobUrl; this.backupType = data.backupType; const currentDate = new Date(); this.filename = `${this.backupType}_${currentDate.toISOString()}.json`; }

In the html component the sanitizedBlogUrl is injected in the href attribute of the a html element

 <a [href]="sanitizedBlobUrl" [download]="filename" type="button" class="btn btn-primary btn-sm mr-2" (click)="download()"><i class="fas fa-download"></i> Download </a>