XSS защита в шаблонах

Backbone.js предоставляет легковесный каркас для построения клиентских приложений, в котором важную роль играют шаблоны для отображения данных в представлениях (Views). Без должной фильтрации и экранирования данных существует высокий риск межсайтового скриптинга (XSS). Понимание того, как Backbone.js работает с шаблонами и как реализовать защиту, критично для безопасной разработки.

1. Основы работы шаблонов в Backbone.js

Backbone.js не навязывает конкретный шаблонизатор, однако в большинстве проектов используются:

  • Underscore.js templates (_.template)
  • Handlebars.js
  • Другие сторонние движки

Пример простого шаблона Underscore:

var template = _.template("<h1><%= title %></h1>");
var html = template({ title: "<script>alert('XSS')</script>" });

В этом случае <%= %> автоматически экранирует HTML, преобразуя специальные символы:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &#39;

Это предотвращает выполнение вставленного скрипта. Ключевое различие между <%= %> и <%- %>:

  • <%= %> — экранирование HTML (по умолчанию безопасно)
  • <%- %> — вставка как HTML без экранирования (опасно при вставке внешних данных)

2. Практики безопасного вывода данных

Экранирование данных: Любая информация, поступающая от пользователя или внешних источников, должна выводиться через <%= %>.

Пример безопасного вывода:

var template = _.template("<p>Имя пользователя: <%= userName %></p>");
var html = template({ userName: userInput }); // userInput экранируется

Опасная вставка HTML: Использование <%- %> может быть оправдано только для доверенного контента:

var template = _.template("<div><%- trustedHTML %></div>");

Любой ввод от пользователя в этом случае должен быть тщательно фильтрован перед вставкой.

3. Защита динамических атрибутов и событий

XSS может проявляться не только в текстовом контенте, но и в атрибутах HTML. Пример потенциально уязвимого кода:

var template = _.template('<a href="<%= url %>">Ссылка</a>');

Если url содержит "jav * ascript:alert('XSS')", браузер выполнит скрипт. Безопасная практика:

  • Проверять или фильтровать URL.
  • Ограничивать схемы (http://, https://).
  • Использовать библиотеку для санитизации URL, например DOMPurify.

Аналогично для событий:

var template = _.template('<button oncl ick="<%= clickHandler %>">Нажми</button>');

Необходимо избегать динамического внедрения JS в атрибуты — события лучше привязывать через Backbone.js методы events в View:

var MyView = Backbone.View.extend({
    events: {
        "click button": "onClick"
    },
    onClick: function() {
        alert('Нажали кнопку');
    }
});

4. Санитизация и библиотеки

Для дополнительной защиты рекомендуется использовать библиотеки для санитизации HTML:

  • DOMPurify — очищает HTML, удаляя потенциально опасные теги и атрибуты.
  • sanitize-html — позволяет контролировать, какие теги и атрибуты разрешены.

Пример интеграции DOMPurify с Backbone:

var template = _.template("<div><%= content %></div>");
var cleanHTML = DOMPurify.sanitize(userInput);
var html = template({ content: cleanHTML });

5. Рендеринг вложенных шаблонов

В сложных приложениях часто используются вложенные Views. Важно:

  • Каждый дочерний View должен получать очищенные данные.
  • Никогда не передавать сырые пользовательские данные через <%- %> без предварительной санитизации.

Пример:

var ChildView = Backbone.View.extend({
    template: _.template('<span><%= name %></span>'),
    render: function() {
        this.$el.html(this.template({ name: DOMPurify.sanitize(this.model.get('name')) }));
        return this;
    }
});

6. Дополнительные меры безопасности

  1. CSP (Content Security Policy) — ограничение выполнения скриптов из ненадёжных источников.
  2. HTTPOnly cookies — предотвращение кражи данных через XSS.
  3. Регулярные проверки и тестирование — использование автоматизированных инструментов для обнаружения XSS.

Безопасная работа с шаблонами Backbone.js строится на принципах:

  • Экранирование данных при выводе (<%= %>).
  • Санитизация внешнего контента.
  • Избегание динамического JS в атрибутах и событиях.
  • Использование проверенных библиотек для рендеринга HTML.

Такая системная практика снижает риск XSS до минимального уровня, делая клиентское приложение Backbone.js безопасным и устойчивым к атакующим воздействиям.

Оглавление