Как глобально отключить экранирование содержимого для привязки Angular 5

tl; dr;
Можно ли изменить поведение привязки angular {{ }}, чтобы оно не дезинфицировало / не экранировало значения?

Полный вопрос
У нас есть довольно большое приложение angular 5, поддерживаемое json REST API. REST API взаимодействует с гораздо более крупной системой и базой данных, которые были созданы в течение многих лет. Другие установленные приложения читают и записывают данные, и ключевым моментом является то, что данные, введенные пользователем из всех приложений, должны храниться в базе данных дословно, поскольку другим приложениям (устаревшим, не веб-приложениям) необходимо читать и записывать данные.

Это означает, что (хотя и нежелательно) REST API поддерживает POST и PUT с такими телами:

{
  "reportName" : "<a href=\"http://somewhere.bad\">My report</a>",
  "reportType" : "VEHICLE"
}

(это необходимо, потому что данные должны быть дословно записаны в базу данных, чтобы другие устаревшие не веб-приложения могли читать данные, введенные пользователем)

В настоящее время приложение angular является единственным клиентом REST API, но есть планы по раскрытию API, чтобы другой клиентский код, в том числе сторонние, мог его использовать.

В настоящее время REST API возвращает данные в том виде, в каком они были введены и сохранены:

{
  "reportName" : "<a href=\"http://somewhere.bad\">My report</a>",
  "reportType" : "VEHICLE"
}

Удобно, что приложение angular 5 очищает или экранирует (?) Значения перед рендерингом (привязкой?). Шаблон angular связывает значения следующим образом:

<div>{{report.reportName}}</div>

поэтому вывод на экран:

<a href = "http://somewhere.bad">My report</a>

что является желаемым поведением. (Простите за несомненно неправильное использование терминологии angular - я скорее бэкенд-разработчик!)

К сожалению, у нас был внешний тест на проникновение REST API, и они, что неудивительно, подняли проблемы типа XSS, с их рекомендацией, что REST API избегает содержимого на выходе. Их аргумент состоит в том, что безопасность не должна зависеть от клиента. В то время как angular очищает / ускользает из коробки, другой клиентский код может этого не делать. Имея это в виду, я сделал изменение на стороне сервера, чтобы строковые значения json экранировались в теле ответа:

{
  "reportName" : "&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;",
  "reportType" : "VEHICLE"
}

Но теперь, конечно, angular очищает / избегает амперсандов, поэтому на экране он отображается как:

&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;

т.е. привязка фактически выполнила:

<div>&amp;lt;a href=&amp;quot;http://somewhere.bad&amp;quot;&amp;gt;My report&amp;lt;/a&amp;gt;</div>

Я думаю, что нам нужно, чтобы angular доверял данным в ответе и отображал их дословно. т.е. если бы он интерполировал, а не привязал (опять же, простите мою терминологию!), он бы эффективно сделал это:

<div>&lt;a href=&quot;http://somewhere.bad&quot;&gt;My report&lt;/a&gt;</div>

что приведет к отображению на экране

<a href = "http://somewhere.bad">My report</a>

И это было бы нормально, потому что это текущее поведение. Он не был бы добавлен в DOM как интерактивный или исполняемый фрагмент разметки - это просто текст.

Есть ли глобальный способ сказать angular 5, что значениям доверяют? Проблема, которую мы имеем, конечно же, заключается в том, что, поскольку мы уже разработали приложение разумного размера, в шаблонах, вероятно, есть тысячи привязок стилей {{ }}, поэтому вместо того, чтобы идти дальше и менять этот синтаксис на что-то другое (я видел, как люди делали такие вещи, как <div innerHTML = "{{report.reportName}}"/> или использование каналов типа <div>{{report.reportName | safeHtml}}</div>) Я ищу более глобальный подход.

Любые идеи?

Вам придется использовать канал, вы не можете изменить поведение всей интерполяции ({{...}}) сразу. Если вы это сделаете, вам придется изменить сам фреймворк.

user4676340 10.08.2018 13:23

Я предпочитаю начальный подход. Отсутствие побега на клиенте может вызвать собственные уязвимости. Теперь безопасность клиента зависит от сервера. Если клиент использует несколько API-интерфейсов или переходит от одного к другому, они могут смешивать, следует ли экранировать данные или нет.

fgb 10.08.2018 14:45

Сервер не может надежно экранировать контент, потому что правильное экранирование зависит от контекста. То, что безопасно для контекста HTML, небезопасно для контекста JS или CSS. Любой клиент, у которого могут возникнуть проблемы с XSS из-за этого API, вероятно, имеет свои собственные уязвимости, не имеющие к нему никакого отношения.

fgb 10.08.2018 14:45
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
214
0

Другие вопросы по теме