Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context

Question

I am getting the following error:

Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context

Could it be related to not having the media item straight away on startup? Or is it related to the URL not being safe? I am trying to sanitize it.

export class HomeComponent {

  sanitizer: DomSanitizationService;
  errorMessage: string;
  activeMedia: MediaItem = new MediaItem(0, '', '', '', '', '', '');

  constructor(
    private mediaStorage: MediaStorageService, 
    private harvesterService: HarvesterService, 
    sanitizer: DomSanitizationService) {

    this.sanitizer = sanitizer;
    // Initial call - 
    harvesterService.getMediaItems(10, 'type', 'category');
    let subscription = harvesterService.initialMediaHarvestedEvent.subscribe(() => {
      this.activeMedia = mediaStorage.mediaList[0];
      let newURL = this.activeMedia.URL + '?rel=0&autoplay=1';
      newURL = newURL.replace('watch?v=', 'v/');
      this.activeMedia.URL = newURL; //sanitizer.bypassSecurityTrustUrl(newURL);
      console.log(newURL);
    });
  }

  cleanURL(oldURL: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustUrl(oldURL);
  }
}

The template code is:

<div class="row" >
    <iframe 
      id="video"  
      class="video" 
      src="{{ cleanURL(activeMedia.URL) }}" 
      frameborder="0" 
      allowfullscreen>
    </iframe>
</div>

Pete · Accepted Answer · 2016-10-04 19:02:06Z

150

UPDATED: After changing the

 src="{{cleanURL(activeMedia.URL)}}"

to:

 [src]="cleanURL(activeMedia.URL)"

I'm getting: ORIGINAL EXCEPTION: Error: Required a safe ResourceURL, got a URL

which is solved with changing the code within the cleanURL method to:

 return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);

Instead of:

 return this.sanitizer.bypassSecurityTrustUrl(oldURL);

answered Oct 4, 2016 at 19:02

Pete

2,5054 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Csaba Over a year ago

I've managed to show the PDF with this solution, however, the cleanURL() method runs multiple times, resulting in flickering of the pdf.

Jacek Pietal Over a year ago

dont run as function, keep the value persistent no evaluated

Trajche Shoposki · Accepted Answer · 2016-10-04 19:06:31Z

0

Try with this:

cleanURL(oldURL: string): string  {
 return this._sanitationService.sanitize(SecurityContext.URL, oldURL);
}

answered Oct 4, 2016 at 19:06

Trajche Shoposki

2212 silver badges7 bronze badges

Comments

Meryan · Accepted Answer · 2022-05-19 06:43:50Z

The accepted answer causes Angular to keep re-evaluating/refreshing the page thru its change detection mechanism. The side-effect in my case is that I could not navigate to other pages linked to my root help page (It gets stuck in the root help).

So yes use DomSanitizer.bypassSecurityTrustUrl(oldURL) @Pete but also ensure it does not get re-evaluated as pointed out by @Jacek Pietal. Here is my hack at it :) it might help the next person...

More info on XSS (Preventing Cross Site Scripting) here https://angular.io/guide/security#xss

<ion-header>
    <ion-navbar>
        <ion-title>
            Help
        </ion-title>
    </ion-navbar>
</ion-header>

<!--https://ionicframework.com/docs/api/components/fab/FabButton/ -->
<!--https://ionicframework.com/docs/components/#fabs -->
<!--https://forum.ionicframework.com/t/round-image-on-item-thumbnail/20230/4 -->
<!--http://ionicframework.com/docs/components/#advanced-cards -->

<ion-content padding>
    <!-- https://forum.ionicframework.com/t/opening-a-local-html-page-in-an-iframe/123842 -->
    <iframe class="HelpPage" [src]="PageURL" ></iframe>

</ion-content>


//
//----------------------------------------------------------------------
// FRAMEWORKS IMPORTS
//----------------------------------------------------------------------
import { Component } from '@angular/core' // 20210318
import { DomSanitizer } from '@angular/platform-browser' // 20220518
//
//
//----------------------------------------------------------------------
// THIS PROJECT IMPORTS
//----------------------------------------------------------------------
import { Globals } from '../../components/ACS/Globals'


//----------------------------------------------------------------------
/**
 * # Help Page
 * - 20210318
 */
@Component({
    selector: 'HelpPage',
    templateUrl: 'HelpPage.html'
})
export class HelpPage {

    constructor(
        private DomSanitizer: DomSanitizer,
        
    ) {
        let URL = Globals.AppSiteHelpRoot + "index.html"
        this.PageURL_ = this.DomSanitizer.bypassSecurityTrustResourceUrl(URL)
    }

    private PageURL_
    /** - 20220518 */
    get PageURL() {
        return this.PageURL_
    }

}

Collectives™ on Stack Overflow

Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related