Как передать HTML в виде строки и обойти безопасность?

Я хочу использовать ionic-alert-controller, чтобы показать сообщение пользователю. Это сообщение имеет форматированный текст и может содержать ссылки, что на самом деле разрешено предупреждением и работает как чудо для большинства ссылок.

Однако (когда ссылка является ссылкой на другое приложение) Angular иногда считает их небезопасными, что делает ссылки не кликабельными. Как я могу предотвратить такое поведение? Предупреждение принимает только строку как сообщение, а не SafeHTML.

this.a : string = getRichTextFromServer();

// EXAMPLE
// this.a = `<a href="www.google.de">works like a charm</a>
// Hello Hello <b>Example Text</b>
// <a href="sd-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)
      )
    });

Что я могу здесь сделать?

РЕДАКТИРОВАТЬ: HTML (в моем примере, хранящийся в "a") динамически загружается из серверной части и поэтому неизвестен во время компиляции. Поэтому редактирование его для преобразования RichText в синтаксис Angular во время выполнения кажется довольно хакерским.


ionic-framework angular ionic3 ionic2
person fortuneNext    schedule 14.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

привет, я вчера ответил на это здесь: Как привязать объект к iframe src

можно сделать дудку и использовать домсанитайзер

нравится

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);
  }
}

затем добавьте свой канал в модуль приложения

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

в html вы можете использовать это так (url - это ваш небезопасный URL)

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

Если это поможет, отметьте мой ответ как правильный, спасибо!

person xzesstence    schedule 14.03.2019
comment
Итак, мне нужно было бы отредактировать мою HTML-строку, выполнив поиск любых URL-адресов и заменив их угловым выражением pipe? - person fortuneNext; 14.03.2019
comment
канал - самый простой способ для этой цели, да url = небезопасный URL-адрес, пожалуйста, не забудьте отметить ответ;) - person xzesstence; 14.03.2019
comment
Хммм, в этом случае это скорее обходной путь, чем решение ... но, возможно, решения нет, посмотрим, найдет ли кто-нибудь его :) - person fortuneNext; 14.03.2019
comment
его нет обходного пути, трубы - это угловатый путь, который вы должны пойти;) - person xzesstence; 14.03.2019
comment
Ладно, может здесь недоразумение. Ваше предложение потребует, чтобы я напрямую изменил свой HTML (в моем примере кода переменная a), который я не знаю во время компиляции, поскольку он поступает из внешних ресурсов. Мне нужно было бы проанализировать HTML и программно заменить любой найденный URL-адрес конвейером, что довольно взломано. Это будет преобразование простого RichText в синтаксис Angular во время выполнения. Я вижу, что не уточнил этот момент в своем первоначальном вопросе, и обновлю его соответствующим образом! - person fortuneNext; 14.03.2019
comment
Я думаю, вы думаете, что в этом случае слишком сложно ... url - это переменная, поэтому где-то в вашем контроллере вы получаете данные из своих внешних ресурсов, как в запросе на получение. с помощью ng-for вы должны иметь возможность перебирать свои данные и заменять URL-адрес каналом (на ваш взгляд). это основная угловая операция. Возможно, вам стоит глубже взглянуть на набор функций angular. angular.io/tutorial/toh-pt6 Оформить заказ на компонент сведений о героях и компонент поиска героев на этом сайте - person xzesstence; 14.03.2019
comment
Насколько URL является переменной? У меня нет URL-адреса в переменной, у меня есть richtext-html в переменной, которая в какой-то момент может содержать или не содержать URL-адреса. - person fortuneNext; 14.03.2019
comment
извините, я не заметил, что вы получаете только строку, а не массив ... ну, тогда вы можете определять URL-адреса, используя шаблон регулярного выражения внутри строки this.a: string = getRichTextFromServer (); var regpat = / (https?: \ / \ / [^ \ s] +) / g; var resultarray = this.a.match (regpat); resultarray - это массив, содержащий все URL-адреса из richtext, возможно, вам следует опубликовать, как выглядит ваше представление и что вы собираетесь делать с вашим Richtext - person xzesstence; 14.03.2019
comment
Позвольте нам продолжить это обсуждение в чате. - person xzesstence; 15.03.2019