angular-cn/public/docs/_examples/security/ts/app/bypass-security.component.ts

// #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
}