Самое фундаментальное правило безопасности при использовании Vue — никогда не использовать ненадежный контент в качестве шаблона компонента . Это эквивалентно разрешению произвольного выполнения JavaScript в вашем приложении — и, что еще хуже, может привести к нарушениям работы сервера, если код выполняется во время рендеринга на стороне сервера. Пример такого использования:

Шаблоны Vue компилируются в JavaScript, и выражения внутри шаблонов будут выполняться как часть процесса рендеринга. Хотя выражения оцениваются в соответствии с конкретным контекстом рендеринга, из-за сложности потенциальных глобальных сред выполнения непрактично для такой среды, как Vue, полностью защитить вас от потенциального выполнения вредоносного кода без нереальных затрат на производительность. Самый простой способ вообще избежать этой категории проблем — убедиться, что содержимое ваших шаблонов Vue всегда надежно и полностью контролируется вами.

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

если userProvidedString содержится:

тогда он будет экранирован следующим HTML:

тем самым предотвращая внедрение сценария. Это экранирование осуществляется с использованием встроенных API-интерфейсов браузера, таких как textContent, поэтому уязвимость может существовать только в том случае, если уязвим сам браузер.

Аналогично, привязки динамических атрибутов также автоматически экранируются. В этом шаблоне это означает:

если userProvidedString содержится:

тогда он будет экранирован следующим HTML

тем самым предотвращая закрытие атрибута title для внедрения нового произвольного HTML. Это экранирование осуществляется с использованием встроенных API-интерфейсов браузера, таких как setAttribute, поэтому уязвимость может существовать только в том случае, если уязвим сам браузер.

В любом веб-приложении разрешение исполнения неочищенного, предоставленного пользователем контента в виде HTML, CSS или JavaScript потенциально опасно, поэтому его следует избегать, где это возможно. Однако бывают случаи, когда некоторый риск может быть приемлемым.

Например, такие сервисы, как CodePen и JSFiddle, позволяют выполнять предоставленный пользователем контент, но в контексте, где это ожидается, и в некоторой степени изолированы внутри iframe. В тех случаях, когда важная функция по своей сути требует определенного уровня уязвимости, ваша команда должна сопоставить важность этой функции с наихудшими сценариями, которые допускает уязвимость.

Как вы узнали ранее, Vue автоматически экранирует содержимое HTML, предотвращая случайное внедрение исполняемого HTML-кода в ваше приложение. Однако в тех случаях, когда вы уверены, что HTML безопасен , вы можете явно визуализировать HTML-содержимое

Использование шаблона

Использование функции рендеринга:

Использование функции рендеринга с JSX:

В таком URL-адресе

Существует потенциальная проблема безопасности, если URL-адрес не был «обработан», чтобы предотвратить выполнение JavaScript с использованием javascript. Существуют библиотеки, такие как sanitize-url, которые помогут в этом, но учтите: если вы когда-либо выполняли очистку URL-адресов во внешнем интерфейсе, у вас уже есть проблема с безопасностью. URL-адреса, предоставленные пользователем, всегда должны обрабатываться вашим сервером еще до того, как они будут сохранены в базе данных. Тогда проблема будет решена для каждого клиента, подключающегося к вашему API, включая собственные мобильные приложения. Также обратите внимание, что даже при использовании очищенных URL-адресов Vue не может гарантировать, что они ведут в безопасные места назначения.

Глядя на этот пример

Предположим, что он sanitizedUrl был очищен, так что это определенно реальный URL-адрес, а не JavaScript. С помощью userProvidedStyles. злоумышленники по-прежнему могут использовать CSS для «щелкания», например, оформляя ссылку в прозрачное поле над кнопкой «Войти». Тогда, если https://user-controlled-website.com/ он создан так, чтобы напоминать страницу входа в ваше приложение, они могли бы просто захватить реальную информацию для входа пользователя.

Вы можете себе представить, как разрешение предоставления пользовательского контента для styleэлемента создаст еще большую уязвимость, предоставив этому пользователю полный контроль над стилем всей страницы. Вот почему Vue предотвращает рендеринг тегов стиля внутри шаблонов, таких как

Чтобы обеспечить полную безопасность ваших пользователей от кликджекинга, мы рекомендуем разрешать полный контроль над CSS только внутри изолированного iframe. В качестве альтернативы, предоставляя пользовательский контроль через привязку стиля, мы рекомендуем использовать его объектный синтаксис и разрешать пользователям предоставлять значения только для определенных свойств, которыми они могут безопасно управлять, например

Мы настоятельно не рекомендуем выполнять рендеринг scriptэлемента с помощью Vue, поскольку шаблоны и функции рендеринга никогда не должны иметь побочных эффектов. Однако это не единственный способ включения строк, которые во время выполнения будут оцениваться как JavaScript.

Каждый элемент HTML имеет атрибуты со значениями, принимающими строки JavaScript, такие как onclick, onfocus и onmouseenter<>/b>. Привязка предоставленного пользователем JavaScript к любому из этих атрибутов событий представляет собой потенциальную угрозу безопасности, поэтому ее следует избегать.