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 ?
Maybe trivial, but did you add the pipe in your module’s declaration, e.g. in app.module.ts
?
@NgModule({
declarations: [
...,
EscapeHtmlPipe,
...
})
yes i had this in app.module.ts
exactly same as example.
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 ?
Where do you use your pipe Something like
{{ pageContent| keepHtml }}
i am using in my .html like
<ion-card padding class="cardround" [innerHTML]="pagecontent | keepHtml" ></ion-card>
I would try it so
<ion-card padding class="cardround">
{{ pageContent| keepHtml }}
</ion-card>
it says
SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss)
if i use {{ pageContent| keepHtml }}
sonuyadav:
getting error
What error are you getting?
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 }}
Post your page module. If it doesn’t look like this , that’s probably the source of the problem.
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
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.
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.