1

Доброго времени,

пытаюсь сделать приложение с помощью Angular2.

Маршрутизация:

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'first/:id', component: FirstComponent}
];

То есть, при переходе по адресу site/first/... управление переходит к компоненту FirstComponent и он может извлечь параметр id. При запросе на site/first/item параметр id будет равен "item" и так далее.

В зависимости от этого параметра компонент с помощью сервиса посылает запрос на сервер для получения данных. На основе параметра id формируется адрес запроса. То есть в данном случае запрос будет на item.html. Данные - это кусок html-кода, который будет вставлен на определенное место в шаблоне.

Вопрос: как мне получить эти данные именно в виде html. Пока получается только строку получить, и на страницу она вставляется прям вместе с тегами.

Сервис, запрашивающий нужный файл:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class HttpService{

    constructor(private http: Http){ }

    getData(address: string){
        return this.http.get(address);
    }
}

Вот так я получаю данные в компоненте:

this.httpService.getData('data.html').subscribe((data: Response) => this.code=data.text());

Я так понимаю, что дело в используемом методе text(), из-за него возвращается строка. Как мне правильно получить данные в виде html, если в запрашиваемом файле они именно в виде простой html-разметки?

Нужно ли воспользоваться каким-то другим методом класса Response (о котором я не знаю) или как-то обработать полученную строку (каким образом?) или использовать json (то есть исходные данные нужно будет как-то привести к этому формату?)

Подскажите, пожалуйста :) Спасибо за ответы!

1
  • как это вставляется на страницу?
    – Grundy
    Commented 2 дек. 2016 в 13:16

1 ответ 1

1

При вставке переменной через интерполяцию {{}} или присвоении innerHTMLпо умолчанию HTML будет экранирован, по причинам безопасности.

Подробно тут: https://angular.io/docs/ts/latest/guide/security.html

Interpolated content is always escaped—the HTML is not interpreted, and the browser displays angle brackets in the element's text content.

For the HTML to be interpreted, you must bind it to an HTML property such as innerHTML. But binding a value that an attacker might control into innerHTML normally causes an XSS vulnerability.

Соответственно чтобы обойти это надо пометить, что вы доверяете этому коду, но это потенциальная дыра.

constructor(private sanitizer: DomSanitizer) {}
...

this.httpService.getData('data.html').subscribe((data: Response) => this.code=sanitizer.bypassSecurityTrustHtml(data.text()));
1
  • На странице, на которую вы меня отправили, нашла вот эту прелесть: <p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p> html-форматирование сохраняется, а скрипты игнорируются) Спасибо огромное! Всю голову сломала))
    – Furry Cat
    Commented 2 дек. 2016 в 20:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.