Tracks on video tag always show "Unsafe attempt to load URL from a frame with URL

Hey there,
got some strange issue with <track>-Tag in a video.

The template/component code is like that:

<video >
<track label="Deutsch" kind="subtitles" srclang="de" [src]="this.ut_url">

And I tried all the Angular DOM-Functions,… but always got the same error.

Unsafe attempt to load URL from frame with URL http://localhost/tabs/tab1. Domains, protocols and ports must match.

Any ideas how I can fix that? I need to show subtitles in a video if they are available.

public sanitizeURL(url) {
    console.log('CAll OF SANITIZE URL');
    // return this.DOMSANI.bypassSecurityTrustHtml(url); // NO!
    // return this.DOMSANI.bypassSecurityTrustResourceUrl(url); // NOT!
    // return this.DOMSANI.bypassSecurityTrustUrl(url); // NO WAY
   // return this.DOMSANI.bypassSecurityTrustScript(url); // Still no way. omg
<track label="Deutsch" kind="subtitles" srclang="de" [src]="sanitizeURL()">
public sanitizeURL() {
    console.log('CAll OF SANITIZE URL');
  return this.DomSanitizer.bypassSecurityTrustUrl(this.ut_url)

You can try this.

Hey there,
thanks. But it has the same effect.

I found the solution. Had to add this attribute to the video-tag:


As described here:

src Address of the track (.vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the or parent element of the track element has a crossorigin attribute.

1 Like