Sanitizing HTML using the Ionic DomSanitizer may not be effective in bypassing security for trusted resource URLs

Encountering an error message that says 

GET http://localhost:8100/null 404 (Not Found)
I've experimented with various DomSanitizer methods, but so far none of them have resolved the issue.

The function in my controller is as follows:

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';


constructor(public navCtrl: NavController, public navParams: NavParams,  public loadingCtrl: LoadingController,
private sanitizer: DomSanitizer) {}

 ionViewWillEnter() {
  let link = this.navParams.get('link'); // receives the link to be sanitized
  console.log(link); //confirmed working
  let url1 = this.sanitizer.bypassSecurityTrustResourceUrl(link);
  console.log(url1); //also functioning correctly
}

The iframe code I am using is as shown below:

<iframe [src]="url1" height="100%" width="100%"
  frameborder="0">
  </iframe>

My current setup includes - Ionic 3.20.0 npm 5.5.0

angulartypescriptionic-framework

Answer №1

Consider adjusting your lifecycle process. If you find that null or undefined values are being received for url1, try initializing it in either the constructor or the ionViewDidLoad() method. This approach has proven successful for me.

Answer №2

The "url1" you are using is not properly declared as public. This means that the html template will not be able to access it.

One solution could be:

public url1: any;
...
constructor(...)
...
ionViewWillEnter(){
...
    this.url1=this.sanitizer.bypassSecurityTrustResourceUrl(link);
}

Answer №3

Introduce the variable named url with a data type of "TrustResourceUrl"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mapping an HTTP object to a model

Currently facing an issue with mapping an http object to a specific model of mine, here is the scenario I am dealing with: MyObjController.ts class MyObjController { constructor ( private myObj:myObjService, private $sco ...

javascriptangulartypescriptlodash

Yep, identifying InferType optional attributes

Here's an example of a Yup schema I created to fetch entities known as Parcels: export const FindParcelsParamsSchema = Yup.object({ cursor: Yup.number().optional(), pageSize: Yup.number().positive().integer().optional(), }); All fields are option ...

typescriptyup

Troubleshooting a problematic dependency in Angular with the ngx-favicon package

Could someone please clarify why I am encountering issues when trying to run npm install ngx-favicon? npm install ngx-favicon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi ...

node.jsangularnpm

Exploring the world of Typescript, mastering tests, and diving deep into debugging

As a newcomer to Angular 2 and TypeScript, I recently created a basic application using the Angular CLI. However, I've encountered a gap in my understanding regarding how TypeScript code in VS Code translates into a functional app in a web browser. I ...

angulardebuggingtestingvisual-studio-codekarma-jasmine

TS2688 Error: Type definition file for 'tooltip.js' not found

Why am I getting an 'undefined' error when trying to import the Tooltip class from the npm tooltip.js package in my TypeScript file? ...

javascripttypescriptnpm

Utilize TypeScript to narrow down function parameters within a callback by evaluating other parameters

I'm currently working with traditional node callbacks. For example: myFunction('foo', (err: Error|null, data?: Buffer) =>{ if (err) { // typeof err is Error // typeof data is Buffer|undefined } else { // typeof err is nul ...

node.jstypescript

Contrast between sourcing a file from the current directory versus from the node_modules folder

Why does the typescript compiler accept importing from a JS file in the local directory but raises an error when importing from node_modules? Code: import { t2 } from "./t1.js" t2.hello(); import { mat4 } from "./node_modules/gl-matrix/esm ...

javascripttypescript

Angular issue: Unable to scroll to top after route change and loading a new component

In the process of developing a simple Angular application, I encountered an issue. When navigating from my home page to the services page, scrolling down, and then returning to the home page, the scroll position is always set to the bottom of the page. My ...

angulargoogle-chromescroll

Issue with Ionic Capacitor React & Typescript build process for Firebase Functions

Recently, I've been working on a cutting-edge Ionic Capacitor React application that utilizes Typescript with a Firebase backend. While everything has been running smoothly so far, I encountered some challenges when trying to build Firebase Functions. ...

reactjstypescriptionic-frameworkgoogle-cloud-functionscapacitor

Receive a list of articles based on your subscription status

I am looking to create a filter that can retrieve subscription records Entity 'Subscription' export class Subscription { @PrimaryColumn() id: string; @Column('uuid') userId: string; @Column('uuid') targetUserId: s ...

sqltypescriptpostgresqltypeorm

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

I am currently working on a one-page website project to enhance my Angular skills, and I'm facing a challenge with animating multiple DOM elements using a single animation. Defining the animation for each element individually seems like a cumbersome a ...

javascriptangulartypescriptangular-animationsangular13

We were unable to locate the module '@reactflow/core' or its associated type declarations

After forking reactflow, I attempted to make some modifications but encountered a type error even without making any changes. https://i.sstatic.net/EyTZE.jpg My next step was to try "pnpm i @types/reactflow," but it did not resolve the issue. ...

javascripttypescriptnpmtypes

Tips for retrieving the body of a response in string format

My project involves an HTTP service that sends requests to the server and receives responses. Sometimes, different errors occur on the server during development which do not always return JSON. In such cases, I need to retrieve the response body as a strin ...

ajaxangularrxjs

Issue: Module "expose?Zone!zone.js" could not be located

Just started experimenting with Angular 2 and encountering an issue when importing zone.js as a global variable: https://i.stack.imgur.com/gUFGn.png List of my packages along with their versions: "dependencies": { "angular2": "2.0.0-beta.3", "es ...

javascripttypescriptangularwebpack-dev-server

Issue: XHR failure (404 Not Found) while attempting to load angular2/http

I'm currently utilizing angular-cli for my Angular2 application. Whenever I attempt to load angular2/http in my Components/Services, no errors are displayed in the cli terminal. However, the browser's console shows the following message - GET ...

angularangular2-httpangular-cli

Filterable Select Dropdown in Angular Material

Currently, I am attempting to build a basic select list using the Angular Material List Module. However, I am encountering an issue when trying to integrate this with a filter. While I have managed to implement this functionality, I face difficulty in fil ...

angulartypescript

Using Angular Material to create a data table with a fixed footer and paginator feature

I am facing a challenge with displaying the sum of rows data in the footer section of an Angular Material Table that has fixed footer and header, as well as a paginator. How can I calculate the sum of rows data to show in the footer? https://i.sstatic.net/ ...

angularangular-material

tips for accessing form data in Angular 4 when dealing with an array of objects

I've encountered an issue with my Angular 4 form code. It's not working and I'm getting the following error: TypeError: Cannot read property '0' of undefined.. Can anyone help me troubleshoot this problem? <form (ngSubmit)="pro ...

angularangular-ngmodel

methods to ensure a preselected value remains in use within mat-select in the context of Angular

In my current project, I've incorporated a unique mat-select component. Here's the corresponding code: <div class="col-md-6"> <mat-form-field> <mat-select placeholder="Select Job" formControlName="job_instruc ...

angularangular5angular-components

Having trouble retrieving the date value from a datepicker in Angular ngForm

I am struggling to fetch a value from the mat-datepicker in my Angular project. Whenever I try, it returns as undefined. I have implemented ngForm and ngModel, but I seem to have made a mistake somewhere. <form #f="ngForm" (ngSubmit)="registerClient(f. ...

angularangular-materialangular-material2mat-datepicker