Подключение через CDN и прямую загрузку

Использование CDN (Content Delivery Network) — самый быстрый способ начать работу с библиотекой SJCL без необходимости скачивания файлов и настройки сборки проекта.

Подключение через <script>

Достаточно добавить ссылку на готовую сборку библиотеки в HTML-документ:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js"></script>

После загрузки скрипта объект sjcl становится доступным в глобальной области видимости:

<script>
  const hash = sjcl.hash.sha256.hash("hello");
  console.log(sjcl.codec.hex.fromBits(hash));
</script>

Особенности CDN-подключения

  • Мгновенный старт — отсутствует необходимость скачивания и хранения файлов
  • Кэширование браузером — ускоряет повторные загрузки
  • Зависимость от сети — при отсутствии интернета библиотека недоступна
  • Фиксированная версия — важно указывать конкретную версию, чтобы избежать неожиданных изменений

Пример с указанием версии:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js"></script>

Асинхронная загрузка

Для повышения производительности страницы можно использовать атрибут defer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js" defer></script>

Это гарантирует, что скрипт выполнится после загрузки HTML-документа.

Прямая загрузка библиотеки

Подход с прямой загрузкой предполагает скачивание файлов SJCL и подключение их локально.

Скачивание

Исходный код доступен в виде отдельных модулей или собранного файла. Чаще используется готовая минимизированная версия:

sjcl.min.js

Файл помещается в структуру проекта, например:

/project
  /js
    sjcl.min.js
  index.html

Подключение локального файла

<script src="js/sjcl.min.js"></script>

После этого библиотека доступна так же, как и при CDN-подключении:

const encrypted = sjcl.encrypt("password", "data");
console.log(encrypted);

Преимущества локального подключения

  • Независимость от внешних сервисов
  • Контроль над версией
  • Работа в офлайн-среде
  • Повышенная безопасность (нет сторонних источников)

Недостатки

  • Необходимость обновления вручную
  • Увеличение размера проекта
  • Отсутствие автоматического кэширования через CDN

Использование модульной сборки SJCL

SJCL может собираться с включением только необходимых компонентов. Это особенно важно для оптимизации размера.

Основные модули

  • sjcl.cipher — шифрование (AES)
  • sjcl.hash — хеш-функции (SHA-256 и др.)
  • sjcl.mode — режимы шифрования (CBC, CCM)
  • sjcl.codec — преобразование форматов (hex, base64)

Кастомная сборка

При необходимости можно использовать сборщик (например, через исходный репозиторий) и включить только нужные части:

./configure --with-aes --with-sha256 --with-ccm
make

Результатом будет оптимизированный файл:

sjcl.js

Проверка корректности подключения

После подключения библиотеки важно убедиться, что она работает корректно.

Базовая проверка

if (typeof sjcl !== "undefined") {
  console.log("SJCL загружена");
} else {
  console.error("Ошибка подключения SJCL");
}

Проверка функциональности

const bits = sjcl.hash.sha256.hash("test");
const hex = sjcl.codec.hex.fromBits(bits);

console.log(hex);

Ожидаемый результат — строка SHA-256 хеша.

Сравнение подходов

Критерий CDN Прямая загрузка
Скорость старта Высокая Ниже
Работа офлайн Нет Да
Контроль версии Частичный Полный
Безопасность Зависит от CDN Полный контроль
Кэширование Через CDN Через браузер

Рекомендации по выбору

  • Для прототипов и быстрых экспериментов — CDN
  • Для production-приложений — локальная версия
  • Для критичных систем — кастомная сборка с минимальным набором модулей

Типичные ошибки при подключении

Неправильный порядок скриптов

Если код использует sjcl до его загрузки:

<script>
  sjcl.encrypt("key", "data"); // ошибка
</script>
<script src="sjcl.min.js"></script>

Правильный порядок:

<script src="sjcl.min.js"></script>
<script>
  sjcl.encrypt("key", "data");
</script>

Использование устаревшей версии

Некоторые CDN могут содержать старые версии. Это приводит к отсутствию нужных функций или несовместимости.

Конфликт с другими библиотеками

Хотя SJCL не часто конфликтует с другими библиотеками, глобальная область видимости может быть загрязнена.

Интеграция с современными сборщиками

При использовании инструментов вроде Webpack или Vite возможны два подхода:

Подключение как внешней зависимости

import sjcl from './sjcl.min.js';

Использование через глобальный объект

Если библиотека подключена через <script>, доступ остается через window.sjcl.

Структура объекта sjcl

После подключения доступен глобальный объект:

sjcl = {
  cipher: {...},
  hash: {...},
  keyexchange: {...},
  mode: {...},
  misc: {...},
  codec: {...}
}

Это позволяет гибко использовать только необходимые части библиотеки без лишней нагрузки.

Минимальный пример использования после подключения

<script src="sjcl.min.js"></script>
<script>
  const password = "secret";
  const data = "Hello World";

  const encrypted = sjcl.encrypt(password, data);
  const decrypted = sjcl.decrypt(password, encrypted);

  console.log(encrypted);
  console.log(decrypted);
</script>

Данный пример демонстрирует полный цикл: шифрование и расшифровка данных средствами SJCL после корректного подключения библиотеки.

Оглавление