Angular Firebase Storage: unsafe value used in a resource URL context

Active3 hr before
Viewed126 times

7 Answers


ERROR Error: unsafe value used in a resource URL context,PS C:\Projects\Dev\Angular\ionic> ionic start my_ionic_app,? Starter template: sidemenu ? ,\my_ionic_app exists

Example_snippet/controller/utility/_storage.js/ If you are behind a firewall. . .
  If you are behind a firewall and need to configure proxy settings, see: https: //

     Error: connect ECONNREFUSED 13.33 .186 .68: 443 **
load more v

There is a problem in your code, Your gave local template name to iframe and you are using the same name for property binding

Example_snippet/controller/utility/_storage.js/ <iframe #originalUrl [hidden]=. . .
<iframe #originalUrl [hidden]="!showOriginalDoc" [src]="originalUrl"><span *ngIf="originalUrl===''">Original URL Not Available</span></iframe>
Step 2 continued with if(data.originalResearch.orig. . .
 if (data.originalResearch.originalUrl === null)
    this.originalUrl = '';
    this.originalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(data.originalResearch.originalUrl);
load more v

我正在尝试从Angular组件中的Firebase存储中呈现PDF文件,但出现以下错误:,I guess what you need is a safeUrl pipe (I say guess because that kind of errors needs investigation and debugging, I would say we could have say with more certainty if you'd provided stackblitz link)

Example_snippet/controller/utility/_storage.js/ ERROR Error: unsafe value used. . .
ERROR Error: unsafe value used in a resource URL context(see http: //
      at DomSanitizerImpl.push.. / node_modules / @angular / platform - browser / fesm5 / platform - browser.js.DomSanitizerImpl.sanitize(platform - browser.js: 1824) at setElementProperty(core.js: 21109) at checkAndUpdateElementValue(core.js: 21061) at checkAndUpdateElementInline(core.js: 21008) at checkAndUpdateNodeInline(core.js: 23359) at checkAndUpdateNode(core.js: 23325) at debugCheckAndUpdateNode(core.js: 23959) at debugCheckRenderNodeFn(core.js: 23945) at Object.eval[as updateRenderer](YearbookComponent.html: 2) at Object.debugUpdateRenderer[as updateRenderer](core.js: 23937)
Step 2 continued with <div class="flex-center-contai. . .
<div class="flex-center-container">
  <iframe id="viewframe" src="{{fileUrl | async}}" frameborder="0" height="100%" width="100%"></iframe>
Step 3 continued with import { Component, OnInit } f. . .
import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs';

  selector: 'app-yearbook',
  templateUrl: './yearbook.component.html',
  styleUrls: ['./yearbook.component.sass']
export class YearbookComponent implements OnInit {
  fileUrl: Observable<string | null>;
  constructor(private storage: AngularFireStorage) {
    const ref ='path/to/file.pdf');
     this.fileUrl = ref.getDownloadURL();

  ngOnInit() {}

load more v

Source: New feed Source Url unsafe value used in a resource URL context after using safe pipe,What to do i also have made the pipe function for to resolve but not working Can you suggest any advice for this code,This site uses Akismet to reduce spam, Learn how your comment data is processed

Example_snippet/controller/utility/_firebase.js/ import { Observable } from 'rx. . .
import { Observable } from 'rxjs';
import { FireStoreService } from './../Services/FireStore.service';
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

  selector: 'app-Episodes',
  templateUrl: './Episodes.component.html',
  styleUrls: ['./Episodes.component.css']
export class EpisodesComponent implements OnInit {
  constructor(private Fs: FireStoreService , private sanitizer: DomSanitizer) { }
  Episodes: Observable<any[]>;
  ngOnInit() {
    this.Episodes = this.Fs.getEpisodecode();
load more v

Ok, when you get this error you are probably trying to use url variable in you template, The most elegant way to fix this is use pipe to bypass security

Example_snippet/controller/utility/_firebase.js/ SecurityContext.NONE SecurityC. . .

Example_snippet/controller/utility/_firebase.js/ transform(url) { return . . .
  transform(url) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);

I'm trying to render a PDF file from Firebase storage in a component in Angular, but get the following error:,Please be sure to answer the question, Provide details and share your research!, Why would a company not allow applicants to ask questions during a job interview? , What is a plausible weapon to use for a race of angels?

Example_snippet/controller/utility/_firebase.js/ import { Pipe, PipeTransform }. . .
import {
} from '@angular/core';
import {
} from '@angular/platform-browser';

   name: 'safeUrl',
export class SafeUrlPipe implements PipeTransform {

   constructor(private domSanitizer: DomSanitizer) {}

   transform(url): SafeResourceUrl {
      return this.domSanitizer.bypassSecurityTrustResourceUrl(url);

load more v