DomSanitizer with a PipeTrasnform in ionic 3 vs ionic2


#1

I hv done this in ionic2:

import {Pipe} from '@angular/core';
import {DomSanitizationService} from '@angular/platform-browser';

@Pipe({
  name: 'pipeTextJa'
})
export class PipeTextJa {
  constructor(
    private sanitizer : DomSanitizationService
  ){};
  transform(value, args) {

    let lines = value.split("、");
    let newValue = lines.join("<br/>");
    return this.sanitizer.bypassSecurityTrustHtml(newValue);
  }
}

How could I reproduce the same in ionic3?
I tried sth similar here:

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


@Pipe({
  name: 'pipeTextJa'
})
export class PipeTextJa implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
  transform(value: any, args) {
    let lines = value.split("、");
    let newValue = lines.join("<br/>");
    value = newValue;
    //sanitize(context: SecurityContext, value: string) : string;
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

I hv seen the doc about DomSanitizer here from Angular.io:
https://angular.io/api/platform-browser/DomSanitizer

However I still dont get how it is implemented to the same situation I did.
How to add DomSanitizer to a pipe?


#2

import { DomSanitizer } from '@angular/platform-browser'; is the new way, I believe.


#3

thx I searched with the search bar on angula.io but perhaps there’s sth wrong with them. “sanitization” and nothing shows up.

But thanks to you, using “DomSanitizer” i find that page from google :relieved:


#4

hi @pliablepixels

I hv seen the doc about DomSanitizer here:
https://angular.io/api/platform-browser/DomSanitizer

However I still dont get how it is implemented to the same situation I did.
DomSanitizer is now a class?


#5

Not sure I understand your question. From what I understand, DomSanitizerService was simply renamed to DomSanitizer in later versions. the usage is the same (just a different name)


#6

This is working for me in ionic 3.4.2. I originally got the SafePipe code from @infoproducts in this great thread. I made some tweaks to get it to work in Ionic3. Note that I am using lazy loading. Here is my pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected _sanitizer: DomSanitizer) {
  }
  public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }
}

This is my pipe module. (I got errors with 3.4.2 without adding the module):

import { NgModule } from '@angular/core';
import { SafePipe } from './safe.pipe';
@NgModule({
  declarations: [
    SafePipe
    //other pipes
  ],
  imports: [
  ],
  exports: [
    SafePipe
    //other pipes
  ]
})
export class PipesModule { }

I then add the PipesModule to the imports of my page.module. Note also that you need to bind the pipe output to the innerHTML attribute of an element or you get errors, i.e.
<div [innerHTML]="unsafeString | safe:'html'"></div>


Dynamic images - evaluation of [src] in injected text
#7

I think what the problem is with me is that, I am doing some “re-arranging” work with the text, and I want to out put them as html.

for example here:

let lines = value.split("、");
    let newValue = lines.join("<br/>");
return this.sanitizer.bypassSecurityTrustHtml(newValue);

You think it would work if i do it the same like this?

public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    let lines = value.split("、");
    let newValue = lines.join("<br/>");
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(newValue);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(newValue);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(newValue);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(newValue);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(newValue);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }

#8

Might as well remove the case statement and just make the pipe specific for your needs, but as long as the string you compose is valid html I think you should be good.