34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
// #docplaster
|
||
|
|
// #docregion
|
||
|
|
import { Component } from '@angular/core';
|
||
|
|
import { DomSanitizationService, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'bypass-security',
|
||
|
|
templateUrl: 'app/bypass-security.component.html',
|
||
|
|
})
|
||
|
|
export class BypassSecurityComponent {
|
||
|
|
dangerousUrl: SafeUrl;
|
||
|
|
videoUrl: SafeResourceUrl;
|
||
|
|
|
||
|
|
// #docregion trust-url
|
||
|
|
constructor(private sanitizer: DomSanitizationService) {
|
||
|
|
// javascript: URLs are dangerous if attacker controlled. Angular sanitizes them in data
|
||
|
|
// binding, but we can explicitly tell Angular to trust this value:
|
||
|
|
this.dangerousUrl = sanitizer.bypassSecurityTrustUrl('javascript:alert("Hi there")');
|
||
|
|
// #enddocregion trust-url
|
||
|
|
this.updateVideoUrl('PUBnlbjZFAI');
|
||
|
|
}
|
||
|
|
|
||
|
|
// #docregion trust-video-url
|
||
|
|
updateVideoUrl(id: string) {
|
||
|
|
// Appending an ID to a YouTube URL is safe.
|
||
|
|
// Always make sure to construct SafeValue objects as close as possible to the input data, so
|
||
|
|
// that it's easier to check if the value is safe.
|
||
|
|
this.videoUrl =
|
||
|
|
this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id);
|
||
|
|
}
|
||
|
|
// #enddocregion trust-video-url
|
||
|
|
}
|
||
|
|
// #enddocregion
|