{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При разработке веб-приложения возникают ситуации, когда необходимо добавить на страницу пользовательский HTML-код. Например, при использовании редактора rich-text мы можем захотеть отобразить HTML, сохраненный в базе данных.","type":"unstyled","key":"fc56c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако в фреймворке Angular применяются стандартные меры безопасности, которые могут затруднить эту задачу. Если попытаться использовать функцию innerHTML DOM для добавления HTML на страницу, вы увидите сам HTML-код, а не его отображение.","type":"unstyled","key":"19b60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом руководстве мы рассмотрим встроенные меры безопасности Angular, которые предотвращают прямую вставку кода, объясним, почему они важны, и узнаем, как можно безопасно вставлять HTML-содержимое в DOM, если это действительно необходимо.","type":"unstyled","key":"6bev8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, вы работаете над проектом на Angular и хотите внедрить некоторый HTML-контент в DOM .Свойство innerHTML DOM позволяет разработчикам динамически внедрять HTML-контент в DOM.","type":"unstyled","key":"feeqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что innerHTML не является специфической директивой Angular или чем-то подобным, это стандартная функциональность DOM.","type":"blockquote","key":"anb0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На первый взгляд можно представить такое решение:","type":"unstyled","key":"8k1g1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"de147"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export class AppComponent { htmlContent = \"

Hello, World!

\";}","type":"blockquote","key":"fu7r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблема здесь в том, что Angular не будет рендерить это как тег h1!","type":"unstyled","key":"c0bhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо этого вступят в силу механизмы экранирования символов шаблона, и мы увидим сам код, отображаемый на странице, как если бы мы использовали редактор кода:","type":"unstyled","key":"1s62a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Hello, World!

","type":"unstyled","key":"f2v1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуем разобраться, почему происходит именно так:","type":"unstyled","key":"6fde9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование innerHTML в Angular","type":"header-three","key":"7fqff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проблема заключается в том, что Angular по умолчанию применяет встроенные механизмы защиты от внедрения кода, также известные как механизмы защиты от XSS или межсайтового скриптинга.","type":"unstyled","key":"281ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию Angular считает, что любой текст, который мы передаем в шаблон, является небезопасным, и будет соответствующим образом экранировать его в зависимости от контекста, в котором мы используем текст.","type":"unstyled","key":"7ltkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы пытаемся использовать HTML-код в шаблоне, Angular попытается экранировать текст в соответствии с правилами HTML, если это CSS, он будет экранировать код согласно правилам CSS и так далее. В приведенном выше примере Angular обнаружит, что мы пытаемся внедрить текст в контекст HTML и любой символ текста, переданный в DOM, будет экранирован с использованием правил HTML.","type":"unstyled","key":"8bcdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так, например, символ “<” будет экранирован и превращен в “<”, и так далее. Это приведет к тому, что символ “<” будет отображаться на экране вместо того, чтобы быть интерпретированным как код.","type":"unstyled","key":"6vav3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это может показаться неожиданным при первом взгляде, но на самом деле это хорошо с точки зрения безопасности. Этот механизм защищает наше приложение от множества различных видов атак безопасности, связанных с внедрением скриптов. Иногда есть веские причины желать обойти защиту, например, в случае нашего редактора rich-text.","type":"unstyled","key":"fkerq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обход экранирования","type":"header-three","key":"514lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сервис DomSanitizer в Angular предоставляет различные методы обхода проверок безопасности для доверенных значений.","type":"unstyled","key":"dq1me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот как вы можете его использовать:","type":"unstyled","key":"94p5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Импортируйте DomSanitizer из пакета @angular/platform-browser в компоненте, где вам нужно обойти экранирование.","type":"ordered-list-item","key":"7vd44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте DomSanitizer в конструктор компонента, чтобы он был доступен для использования внутри компонента.","type":"ordered-list-item","key":"8ukd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В зависимости от типа содержимого используйте один из методов чтобы обойти ограничения:","type":"ordered-list-item","key":"1gg7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bypassSecurityTrustHtml для HTML.","type":"unordered-list-item","key":"9hv3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bypassSecurityTrustStyle для стилей.","type":"unordered-list-item","key":"d41pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bypassSecurityTrustScript для URL-адресов скриптов.","type":"unordered-list-item","key":"e3635"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bypassSecurityTrustUrl для URL-адресов/ресурсов.","type":"unordered-list-item","key":"32p14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bypassSecurityTrustResourceUrl для ресурсов, таких как источники iframe.","type":"unordered-list-item","key":"7rmq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим на примере:","type":"unstyled","key":"4cnd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@Component({ selector: 'app-unsafe-component', template: `

` })\nexport class UnsafeComponent {\n trustedHtml: any;\n\n constructor(private _sanitizer: DomSanitizer) {\n const unsafeHtml = '

Hello World!

';\n this.trustedHtml = this._sanitizer.bypassSecurityTrustHtml(sanitizedHtml);\n }\n}","type":"blockquote","key":"c5l9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4gf6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно отметить, что обходя экранирование Angular, вы берете на себя ответственность за то, чтобы содержимое действительно было безопасным для отображения как HTML.","type":"blockquote","key":"ce2o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получилось достаточно много кода. Чтобы упростить можно создать свой Pipe","type":"unstyled","key":"av40o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SafeHtml Pipe","type":"header-three","key":"e5i33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cоздадим Pipe, который будет очищать HTML-содержимое, которое принимает. Он будет возвращать очищенное HTML-содержимое вызывающему объекту для вставки в DOM. Чтобы каждый раз не импортировать DomSantitizer, пайп будет использовать его под капотом:","type":"unstyled","key":"fudsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@Pipe({ name: 'safeHtml', standalone: true })\nexport class SafeHtmlPipe {\n constructor(private sanitizer: DomSanitizer) {\n }\n\n transform(html) {\n return this.sanitizer.bypassSecurityTrustHtml(html);\n }\n}","type":"blockquote","key":"bds83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример использования:","type":"unstyled","key":"52b84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@Component({ \nstandalone: true, \nimports: [SafeHtmlPipe], \ntemplate: `

` })\nexport class TestComponent {}","type":"blockquote","key":"cqbdu"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":8,"offset":66}],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":1,"offset":18,"style":"BOLD"},{"length":18,"offset":20,"style":"BOLD"},{"length":12,"offset":50,"style":"BOLD"},{"length":8,"offset":66,"style":"BOLD"}],"text":"Больше материалов с хорошей подсветкой синтаксиса в моем блоге на teletype","type":"unstyled","key":"737kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"CvZ4PRO1pPd7kSvJSztD"}],"entityMap":{"0":{"data":{"href":"https://osinpaul.ru/","url":"https://osinpaul.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}