Button and href tag

try this [href]="‘tel’+item.phone"

I was having the same problem with ionic 5, href is just not working.
I was getting the HTML from an API and had to use it within an innerHTML.

I couldn’t use ion-button (because of the innerHTML) and had to fix it in another way.
This is my workaround (it is surely not the best way of doing it but it may help someone).

 export class ExampleComponent {
  aCounter = 0
  content = "<p><a href="google.ch">first url</a><a href="google.ch>second url</a></p>"

  constructor(private _iab: InAppBrowser) {}

  ngOnInit() {
    let regex = /<a/gi

    if (this.content) this.content = this.content.replace(regex, () => this.replaceA())
  }

  ngAfterViewInit(): void {
    if (this.aCounter > 0) {
      for (let i = 1; i <= this.aCounter; i++) {
        let a = document.getElementById(this.mainTitle + i)
        if (!a) {
          this.ngAfterViewInit()
          break
        } else {
          a.addEventListener('click', () => this.openBrowser(a.getAttribute('href')))
        }
      }
    }
  }

  replaceA(): string {
    this.aCounter++
    return `<a id="${this.mainTitle}${this.aCounter}"`
  }

  openBrowser(url: string) {
    this._iab.create(url, '_system')
  }
}
 <p [innerHTML]="content | safe: 'html'"></p>

There are reasons this is so hard - some involving performance, but most importantly security. I think you have one of two situations, both of which are bad:

  • you’ve written a backend that produces HTML
  • somebody else has written a backend that produces HTML and you have to blindly trust that there isn’t anything dangerous in it

So either way, I would urge you to reconsider HTML as a backend transfer format for Ionic apps. Use JSON instead and something like this skeleton idiom to render it.

1 Like

Thx for your answer.
I’m using the tinymce editor and only a, strong and p are accepted. Rest get sanitized when editing. And is then send as a string to the server.

This editor can only be filled by trusty people.

Does it still seems to be dangerous?

If yes I’ll be glad to try your solution

It’s less dangerous than many designs I’ve seen here, but <a href="javascript:ruh_roh()"> can still wreak havoc.

1 Like

Thx, I’ve also tested with the onclick event listener on a p tag and confirm that this is also working. (should be escaped by tinymce, but I thought that a malicious user could send it directly from e.g. postman.

Now I’m wondering why Ionic is disabling href since any other event listener are working. But I may be off-topic