SanitizeHtml Pipe not working


#1

Working with ionic 3 lazy loading Sanitize Html Pipe, but getting error

The pipe 'keepHtml' could not be found ("n-content>
	<div  padding class="pageheading">Contact Us</div>
	<ion-card padding class="cardround" [ERROR ->][innerHTML]="pagecontent | keepHtml" >

	</ion-card>

My Pipe code:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

using in html:
<ion-card padding class="cardround" [innerHTML]="pagecontent | keepHtml" ></ion-card>

as per this example https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079

What is wrong with this ?


#2

Maybe trivial, but did you add the pipe in your module’s declaration, e.g. in app.module.ts?

@NgModule({
  declarations: [
    ...,
    EscapeHtmlPipe,
    ...
})

#3

You can try this


#4

yes i had this in app.module.ts exactly same as example.


#5

This seems to working but still can’t bypass my html bypassSecurityTrustHtml

<ion-list>
 <ion-item>
   <ion-icon name="mail" item-start></ion-icon>
     contact@test.com
 </ion-item>
 <ion-item>
   <ion-icon name="call" item-start></ion-icon>
     1-800-000-0000 (Toll free) 
 </ion-item>
 <ion-item>
   <ion-icon name="call" item-start></ion-icon>
     0000-6666
 </ion-item

On html page icons are missing and list view not working. any suggestion ?


#6

Where do you use your pipe Something like

{{ pageContent| keepHtml }}

#7

i am using in my .html like
<ion-card padding class="cardround" [innerHTML]="pagecontent | keepHtml" ></ion-card>


#8

I would try it so

<ion-card padding class="cardround">
    {{ pageContent| keepHtml }}
</ion-card>

#9

it says
SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss) if i use {{ pageContent| keepHtml }}


#10

What error are you getting?


#11

initially i was getting The pipe 'keepHtml' could not be found later i update code as per suggestion by @Jacktoolsnet and after that now getting

SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss) if i use {{ pageContent| keepHtml }}


#12

Post your page module. If it doesn’t look like this, that’s probably the source of the problem.


#13

here it is

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactUsPage } from './contact-us';
import { Pipes } from '../../pipes/pipe';

@NgModule({
  declarations: [
    ContactUsPage,
  ],
  imports: [
    IonicPageModule.forChild(ContactUsPage),
    Pipes
  ],
  exports: [
    ContactUsPage
  ]
})
export class ContactUsPageModule {}

i am following example https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079


#14

Don’t follow random tutorials. You’ll just get errors.

Your page doesn’t care what a Pipe is. Only your Pipe cares what a Pipe is. So you don’t import Pipe into your page. Import the actual pipe module you build into the page. Like the MsToMinsPipeModule in the official Ionic project I linked you to.


#15

I’m really hesitant to comment, because I think it’s a significant security risk to attempt what is being attempted here in the first place.

So I really hope that anybody reading this will take that to heart and come up with a safer and more idiomatic way of dealing with things.

That being said, read this. There is a difference between binding and interpolation when non-strings are involved, and it affects sanitization.