Bagaimana saya bisa meneruskan HTML sebagai string dan melewati Keamanan?

Saya ingin menggunakan ionic-alert-controller untuk menampilkan pesan kepada pengguna. Pesan ini berupa teks kaya dan mungkin berisi tautan, yang sebenarnya diizinkan oleh peringatan tersebut dan berfungsi dengan baik untuk sebagian besar tautan.

Namun (bila tautan tersebut merupakan tautan dalam ke aplikasi lain) Angular terkadang menganggapnya tidak aman, sehingga membuat tautan tersebut tidak dapat diklik. Bagaimana cara mencegah perilaku ini? Peringatan hanya menerima string sebagai pesan, tidak ada SafeHTML.

this.a : string = getRichTextFromServer();

// EXAMPLE
// this.a = `<a href="/idwww.google.de">works like a charm</a>
// Hello Hello <b>Example Text</b>
// <a href="/idsd-viewer://testlink">UNSAFE LINK</a>
// `;

// Some links are marked as unsafe
this.alertCtrl.create({
      message: this.a
    });
    
    
// Doesn't compile as message is only allowed to be a string
this.alertCtrl.create({
      message: this.domSan.bypassSecurityTrustHTML(this.a)
    });
    
// Gives error that function must be used with property binding
this.alertCtrl.create({
      message: this.domSan.bypassSecurityTrustHTML(this.a).toString()
    });
    
// Some links are marked as unsafe again
this.alertCtrl.create({
      this.ds.sanitize(SecurityContext.HTML,
        this.ds.bypassSecurityTrustHtml(a)
      )
    });

Apa yang bisa saya lakukan di sini?

EDIT: HTML (dalam contoh saya disimpan di "a") dimuat secara dinamis dari backend dan oleh karena itu tidak diketahui pada waktu kompilasi. Oleh karena itu, mengeditnya untuk mengonversi RichText ke Sintaks Angular saat runtime tampaknya cukup rumit.


ionic-framework angular ionic3 ionic2
person fortuneNext    schedule 14.03.2019    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

hai saya menjawabnya kemarin di sini: Cara mengikat objek ke iframe src

Anda dapat membuat pipa dan menggunakan domsanitizer

seperti ini

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

lalu tambahkan pipa Anda ke modul aplikasi

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

dalam html Anda dapat menggunakannya seperti ini (url adalah url Anda yang tidak aman)

<a href="/id{{url | safe}}">UNSAFE LINK</a>

Jika membantu tolong tandai jawaban saya sebagai benar, terima kasih!

person xzesstence    schedule 14.03.2019
comment
Jadi saya perlu mengedit string HTML saya dengan mencari URL apa pun dan menggantinya dengan ekspresi sudut pipa? - person fortuneNext; 14.03.2019
comment
pipa adalah cara termudah untuk itu, ya url = url yang tidak aman tolong jangan lupa tandai jawabannya ;) - person xzesstence; 14.03.2019
comment
Hmmm, dalam hal ini lebih merupakan solusi daripada solusi... tapi mungkin tidak ada solusi, mari kita lihat apakah ada yang memberikan solusi :) - person fortuneNext; 14.03.2019
comment
tidak ada solusinya, pipa adalah cara bersudut yang harus Anda tempuh;) - person xzesstence; 14.03.2019
comment
Oke, mungkin di sini ada kesalahpahaman. Proposal Anda mengharuskan saya untuk secara langsung mengubah HTML saya (dalam variabel contoh kode saya a) yang saya tidak tahu pada waktu kompilasi karena berasal dari sumber daya eksternal. Saya perlu mengurai HTML dan mengganti URL yang ditemukan dengan pipa secara terprogram, yang cukup rumit. Ini akan menjadi konversi dari RichText sederhana ke Sintaks Angular saat runtime. Saya melihat bahwa saya tidak memperjelas hal itu dalam pertanyaan awal saya dan memperbaruinya sesuai dengan itu! - person fortuneNext; 14.03.2019
comment
Saya kira Anda berpikir terlalu rumit dalam hal ini... url adalah variabel sehingga di suatu tempat di pengontrol Anda, Anda menerima data dari sumber daya eksternal seperti dalam permintaan dapatkan. dengan menggunakan ng-for Anda seharusnya dapat mengulang data Anda dan mengganti url dengan pipa (dalam pandangan Anda). ini adalah operasi sudut dasar. mungkin Anda harus melihat lebih dalam pada fitur sudut. angular.io/tutorial/toh-pt6 Lihat Komponen Detail Pahlawan dan Komponen Pencarian Pahlawan di situs ini - person xzesstence; 14.03.2019
comment
Sejauh mana URL merupakan variabel? Saya tidak memiliki URL apa pun dalam suatu variabel, saya memiliki richtext-html dalam variabel yang mungkin berisi atau tidak berisi URL di beberapa titik. - person fortuneNext; 14.03.2019
comment
maaf saya tidak melihat bahwa Anda hanya mendapatkan string, bukan array.. maka Anda dapat mendeteksi url dengan menggunakan pola regex di dalam string this.a : string = getRichTextFromServer(); var regpat = /(https?:\/\/[^\s]+)/g; var resultarray = this.a.match(regpat); resultarray adalah array yang menampung semua url dari richtext mungkin Anda harus memposting seperti apa tampilan Anda dan apa yang akan Anda lakukan dengan richtext Anda - person xzesstence; 14.03.2019
comment
Mari kita melanjutkan diskusi ini dalam chat. - person xzesstence; 15.03.2019