Подключение через script-тег и CDN

Библиотека Crypto-JS может использоваться в браузере без сборщиков и установки npm-зависимостей. Самый простой способ подключения — через CDN с помощью обычного <script> тега. В этом случае библиотека загружается напрямую из сети и становится доступной через глобальный объект CryptoJS.

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

Минимальное подключение выглядит следующим образом:

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

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

console.log(CryptoJS);

Он содержит все основные модули: хеш-функции, HMAC, AES, encoders и вспомогательные утилиты.

Использование глобального объекта CryptoJS

После подключения через CDN вся функциональность доступна через CryptoJS без дополнительных импортов.

Пример хеширования строки

const hash = CryptoJS.SHA256("hello world").toString();

console.log(hash);

Методы хеширования возвращают объект WordArray, который обычно преобразуется в строку через .toString().

Подключение отдельных модулей

В некоторых случаях нет необходимости загружать всю библиотеку целиком. Crypto-JS позволяет подключать отдельные модули, что уменьшает размер загружаемых данных.

Пример подключения только AES

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/aes.min.js"></script>

После этого становятся доступны только функции, связанные с AES:

const encrypted = CryptoJS.AES.encrypt("secret text", "password").toString();

const decrypted = CryptoJS.AES.decrypt(encrypted, "password")
    .toString(CryptoJS.enc.Utf8);

Подключение нескольких модулей

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

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/sha256.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/hmac.min.js"></script>

Такой подход уменьшает общий размер загрузки по сравнению с полной версией.

Альтернативные CDN

Crypto-JS доступен через несколько популярных CDN-провайдеров.

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

unpkg

<script src="https://unpkg.com/crypto-js@4.2.0/crypto-js.min.js"></script>

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

Версионирование и фиксация зависимости

Использование CDN без фиксации версии может привести к изменению поведения кода при обновлении библиотеки. Поэтому всегда указывается конкретная версия:

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

Если версия не указана:

<script src="https://cdn.jsdelivr.net/npm/crypto-js/crypto-js.min.js"></script>

будет загружена последняя доступная сборка, что нежелательно в стабильных проектах.

Порядок загрузки скриптов

При подключении через <script> порядок имеет значение. Crypto-JS должен быть загружен до кода, который его использует:

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

<script>
    const hash = CryptoJS.MD5("data").toString();
    console.log(hash);
</script>

Если порядок нарушен, возникнет ошибка CryptoJS is not defined.

Работа с кодировками

Crypto-JS использует собственный тип данных WordArray. Для корректного преобразования строк применяются кодировщики:

const encrypted = CryptoJS.AES.encrypt(
    CryptoJS.enc.Utf8.parse("текст"),
    "key"
);

При декодировании:

const bytes = CryptoJS.AES.decrypt(encrypted, "key");
const originalText = bytes.toString(CryptoJS.enc.Utf8);

Особенности использования в браузере

При подключении через CDN библиотека работает полностью на клиентской стороне:

  • не требует сборки
  • не требует npm
  • не требует установки зависимостей
  • доступна сразу после загрузки скрипта

Однако криптографические операции выполняются в JavaScript, что может быть медленнее нативных реализаций в серверных средах.

Поддержка Content Security Policy

При использовании строгих CSP-политик необходимо разрешить загрузку скриптов с CDN-домена:

Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net;

Без этого браузер может заблокировать загрузку библиотеки.

Использование в старых и новых браузерах

Crypto-JS не требует современных возможностей JavaScript и работает в широком диапазоне браузеров. При подключении через CDN отсутствует необходимость транспиляции или полифилов.

Подключение в локальной HTML-структуре

Типичный пример минимальной страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>CryptoJS CDN</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

<script>
    const hash = CryptoJS.SHA1("example").toString();
    document.body.innerText = hash;
</script>

</body>
</html>
Оглавление