Межсайтовый скриптинг является серьезной проблемой для всех веб-сайтов, и его необходимо предотвращать, чтобы сделать ваш сайт безопасным. Межсайтовый скриптинг или XSS — это когда кто-то вводит вредоносный код HTML/JS, который выполняется браузером и искажает ваш сайт. Это может произойти способами, которые мы не можем себе представить, и требует предотвращения как со стороны Frontend, так и со стороны Backend. Давайте посмотрим, как это происходит.

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

Уязвимость Vue.js из-за директивы v-html

XSS в Vue.js можно легко реализовать, внедрив HTML-код в места, где санация данных не действует, и, кроме того, когда данные отображаются на экране, данные должны пройти санитизацию, иначе это приведет к порче сайта. Теперь давайте взглянем на несколько примеров, которые могут привести к потенциальной проблеме сайта, если их не очистить должным образом.

Мы будем ссылаться на последнюю статью Vue.js, где мы имеем дело с директивой v-html для рендеринга данных Raw HTML в div. Мы будем использовать fiddle для запуска некоторых образцов вредоносного HTML-кода, а затем запускать его на JSFiddle.

  1. Простой пример, когда мы вводим события на веб-сайт, может быть следующим:
  • ‹a onmouseover=alert(document.cookie)›Попробуйте щелкнуть МНЕ!!!‹/a›
  1. При вводе этих данных в наш редактор, который мы создали ранее, мы обнаруживаем, что DOM отображает данные в ‹div› , теперь, просто зависая над ним, появляется всплывающее предупреждение, как показано на GIF ниже. Кроме того, вы можете скопировать и вставить приведенный выше код в Редактор JSFiddle, чтобы увидеть результат ниже.

  1. XSS, внедрение событий по ссылке
  2. В качестве альтернативы мы можем работать с изображениями и делать инъекции с помощью тега изображения. Это может привести к внедрению некоторых событий на основе браузера с использованием тега изображения. Это может быть вызвано загрузкой страницы. Итак, давайте посмотрим сценарий.
  • ‹img src="http://bit.ly/2eOLqwr onload=alert("ВЗЛОМАН")›
  1. Благодаря этому вы можете видеть, что Страница загружает изображение и при завершении загрузки выполняется этот скрипт. У вас может быть сложный код, который кто-то может внедрить в систему. Теперь давайте посмотрим на это в действии ниже. Или вы можете скопировать и вставить приведенный выше код в JSFiddle.

  1. XSS в Vue.js, вызванный загрузкой тегов изображения

Вот некоторые из способов, которыми вы можете внедрять скрипты на страницу. Образцы также показывают, как они работают на простом примере, где мы создали базовый Редактор HTML с использованием Vue.js.

Google Caja с вычисляемыми свойствами для предотвращения XSS

XSS можно легко предотвратить с помощью Google Caja, когда он используется вместе с Вычисляемыми свойствами. Вычисляемые свойства вместе с Google Caja могут помочь очистить HTML/JS/CSS. Итак, чтобы добиться этого, мы можем пойти дальше и просто немного изменить наш предыдущий редактор. Новый код Vue.js будет выглядеть следующим образом

ПРИМЕЧАНИЕ. Google Caja — это инструмент безопасности для дезинфекции входных значений из внешнего интерфейса. Это от Google, и это довольно эффективный инструмент. Он имеет различные дополнительные параметры, которые могут помочь реализовать сложные правила санитарии для любых входных данных.

var app = new Vue({
  el: '#app',
  data: {
    text: ''
  },
  computed: {
    sanitizeText: function() {
      return html_sanitize(this.text)
    }
  }
});

С помощью этого кода вы можете видеть, что sanitizeText — это вычисляемое значение, которое вычисляется непосредственно из текстового значения, вводимого пользователем в Textarea. Таким образом, HTML-шаблон будет выглядеть так, как показано ниже.

<div class="container" id="app">
  <h3>
Sample HTML Editor
</h3>
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
          <textarea id="editor" v-model="text"></textarea>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">HTML Output</h3>
        </div>
        <div class="panel-body">
          <div class="outputPanel" v-html="sanitizeText"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Просто чтобы показать вам, ребята, как это работает, вы можете взглянуть на GIF ниже, который показывает, как извлекаются выходные данные при использовании Caja. Мы показали, как весь тег привязки выглядит в отладчике Chrome. Когда вы проверите вычисленное значение, вы поймете, как Caja проанализировал значение, чтобы получить очищенное значение.

Google Caja для очистки XSS

Вывод

XSS или межсайтовые сценарии можно легко предотвратить, используя некоторую структуру, которая помогает очищать данные, которые вводятся любым пользователем. Это также приводит к защите веб-сайта с любой точки зрения, внешнего и внутреннего интерфейса. Мы вполне можем избежать XSS, используя Google Caja, и в Google Caja есть различные дополнительные параметры, которые мы можем использовать для дополнительной защиты сайта. вы, ребята, относительно других мер, которые вы, ребята, могли бы предпринять, чтобы предотвратить межсайтовый скриптинг на сайте при использовании Vue.js.

Вы можете найти все остальные руководства по Vue.js здесь.

Первоначально опубликовано в The Web Juice.