Что происходит со скриптами внутри интерполяции Angular?
У меня есть переменная test = '<script>alert()</script>'.
Я поместил эту переменную в компонент Angular, используя интерполяцию <div>{{ this.test }}</div>.
Затем он просто отображался как обычный текст на странице, например: <script>alert("test")</script>
Вопросы:
- Почему значение не очищается Angular? (например, для [innerHtml] будут удалены теги «script»). Из документов Angular: «Когда значение вставляется в DOM из привязки шаблона или интерполяции, Angular очищает и избегает ненадежных значений».
- Если значение не очищено - почему приложение не запускает скрипт?
Спасибо, но как браузер понимает, что он не должен интерпретировать обычный текст как HTML, если он имеет правильные теги html? Как отличить одно от другого? (теги, кажется, не закодированы)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Angular автоматически очищает значения, чтобы предотвратить межсайтовый скриптинг. Это удалит небезопасный код.
В некоторых сценариях может потребоваться отключить очистку. Для этих случаев использования Angular предоставляет сервис DomSanitizer, который вы можете использовать для отключения дезинфекции. Обязательно ознакомьтесь с XSS и потенциальными рисками, прежде чем использовать этот сервис.
Да, это правильно, и поэтому я не понимаю, почему это не очищает значение, когда мы используем интерполяцию.
Две вещи здесь Interpoaltion и InnerHtml.
Интерполяцию можно использовать только для отображения простого текстового содержимого, а не HTML.
Пример:
<p>Hello, {{ name }}!</p>
Вы должны использовать [innerHtml] только в том случае, если вы доверяете источнику контента или должным образом очистили данные с помощью службы DomSanitizer для предотвращения XSS-атак.
Пример:
<div [innerHtml] = "htmlContent"></div>
В вашем случае, когда вы используете интерполяцию {{ this.test }} для отображения переменной, Angular обрабатывает значение как обычный текст и не выполняет никакой автоматической очистки, в результате чего теги <script> отображаются на странице как обычный текст.
С другой стороны, когда вы используете привязку [innerHtml], Angular обрабатывает значение как содержимое HTML и автоматически очищает его с помощью службы DomSanitizer, чтобы предотвратить любые вредоносные сценарии или потенциальные угрозы безопасности. Вот почему теги <script> удаляются при использовании [innerHtml].
Если вы хотите отобразить содержимое переменной в виде HTML с надлежащей очисткой, вам следует использовать привязку [innerHtml] и очистить значение с помощью службы DomSanitizer. Вот пример того, как вы можете сделать это в своем компоненте:
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-your-component',
template: '<div [innerHtml] = "sanitizedTest"></div>'
})
export class YourComponent implements OnInit {
test = '<script>alert("test")</script>';
sanitizedTest: SafeHtml;
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
// Sanitize the value before binding it to the template
this.sanitizedTest = this.sanitizer.bypassSecurityTrustHtml(this.test);
}
}
Спасибо за подробный ответ! Но как браузер понимает, что <script>alert("test")</script> из интерполяции является обычным текстом и не должен отображаться как html?
Angular автоматически очистит значение свойства и отобразит его как обычный текст в представлении <script>alert("test")</script> , теги <script> экранируются как < и >, что предотвращает их интерпретацию как теги HTML и выполнение как скрипты.
Теперь понял, спасибо!
{{ this.test }}всегда возвращает текст, а не код HTML.