Лучшие практики безопасности

Shepherd.js — библиотека для создания интерактивных пользовательских туров на веб-страницах. Несмотря на удобство, интеграция Shepherd требует соблюдения правил безопасности, чтобы минимизировать риски XSS, утечек данных и некорректного поведения интерфейса.

Подключение библиотеки следует выполнять только через проверенные источники, предпочтительно через официальные CDN или локально размещённые файлы. Использование непроверенных пакетов повышает вероятность внедрения вредоносного кода.

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

Экранирование и безопасный контент

Все тексты, отображаемые в подсказках (text, title), должны быть безопасными. Встроенный HTML следует использовать только при полном контроле над содержимым. Любой динамический текст, получаемый из внешних источников, должен проходить экранирование:

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, (match) => {
    const escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
    return escapeMap[match];
  });
}

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    text: escapeHtml(userInput),
    classes: 'shepherd-theme-arrows'
  }
});

Минимизация прав и ограничение действий

Шаги Shepherd.js могут включать кнопки с колбэками (action). Для безопасной интеграции важно:

  • Избегать выполнения произвольного кода через eval или динамическое создание функций.
  • Ограничивать действия кнопок только проверенными методами или заранее определёнными функциями.
  • Не передавать пользовательский ввод напрямую в параметры функций без валидации.
tour.addStep({
  id: 'example-step',
  text: 'Нажмите кнопку, чтобы перейти к следующему шагу',
  buttons: [
    {
      text: 'Далее',
      action: () => tour.next()
    }
  ]
});

Контроль DOM и селекторов

Shepherd.js использует селекторы для привязки подсказок к элементам страницы. Несоблюдение правил безопасности может привести к манипуляции DOM злоумышленником:

  • Проверять, что элементы существуют на странице перед созданием шага.
  • Использовать строгие CSS-селекторы, исключающие возможность выбора нежелательных элементов.
  • В динамических интерфейсах обрабатывать ошибки, если элемент не найден.
const targetElement = document.querySelector('#important-button');
if (targetElement) {
  tour.addStep({
    id: 'button-step',
    text: 'Нажмите на кнопку',
    attachTo: { element: targetElement, on: 'bottom' }
  });
}

Ограничение взаимодействия с внешними ресурсами

Shepherd.js сам по себе не делает сетевых запросов, но подсказки могут содержать контент, загружаемый из внешних источников. Для безопасности:

  • Не вставлять внешние скрипты или iframe без строгой необходимости.
  • Использовать Content Security Policy (CSP) для ограничения источников контента.
  • Проверять URL изображений или других ресурсов перед использованием.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://trusted-cdn.com;">

Логирование и обработка ошибок

Shepherd.js предоставляет события (show, hide, cancel, complete) для контроля работы тура. Важно логировать критические события и безопасно обрабатывать исключения:

tour.on('cancel', () => {
  console.warn('Тур прерван пользователем');
});

tour.on('show', (step) => {
  try {
    console.log(`Показан шаг: ${step.id}`);
  } catch (error) {
    console.error('Ошибка при отображении шага:', error);
  }
});

Поддержка актуальной версии

Регулярное обновление Shepherd.js минимизирует уязвимости. Новые версии исправляют баги безопасности, оптимизируют обработку DOM и предотвращают XSS-риски.

  • Подключать обновления только с официальных источников.
  • Проверять изменения в changelog перед обновлением, особенно если используются кастомные шаги и колбэки.

Резюме практик

  1. Использовать официальные CDN или локальные файлы библиотеки.
  2. Экранировать весь динамический контент перед вставкой в шаги.
  3. Ограничивать действия кнопок только безопасными функциями.
  4. Проверять селекторы и наличие элементов DOM.
  5. Минимизировать внешние ресурсы и применять CSP.
  6. Логировать события тура и безопасно обрабатывать ошибки.
  7. Регулярно обновлять библиотеку до последних версий.

Эти меры обеспечивают безопасное использование Shepherd.js в сложных интерфейсах, снижая риск XSS, неконтролируемых действий и потенциальной компрометации данных.

Оглавление