39 lines
1.3 KiB
TypeScript
39 lines
1.3 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: string;
|
|
trustedUrl: SafeUrl;
|
|
dangerousVideoUrl: string;
|
|
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 = 'javascript:alert("Hi there")';
|
|
this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
|
|
// #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.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
|
|
this.videoUrl =
|
|
this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
|
|
}
|
|
// #enddocregion trust-video-url
|
|
}
|