Электронная цифровая подпись на сайте при помощи КриптоПро ЭЦП Browser plug-in / Хабр

— linux

1. Данный пакет проверен на Ubuntu 16.04 x64, до установки необходимо убедиться, что установлены пакеты:
   lsb lsb-core alien unzip libssl-dev

2. Для установки запустить

Запуск примера на чистом JavaScript (только в Chrome)

1. Необходимо запустить локальный веб-сервер (на python или nodejs, etc)

Сборка проекта на примере веб-компонентов (Angular, TypeScript)

в разработке…

Angular (es modules typescript)

Запуск в режиме разработки:

Запуск в продакшн режиме:

npm run build
npm run serve

Cryptopro

Единое, асинхронное API для взаимодействия с КриптоПРО ЭЦП Browser Plug-In

Запуск режима разработки

Устанавливаем зависимости:

Во время работы с кодом необходим запущенный сборщик:

И пример, на котором можно тестировать изменения.
Удобнее всего тестировать на примере с тэгом script, тк он отвязан от фреймворков
и использует сборку в формате UMD из папки dist/, постоянно обновляемую пока работает
сборщик. Запускаем его таким образом:

После выполнения npm link ../../ в директории examples/script-tag/node_modules папка crypto-pro станет ярлыком,
указывающим на папку содержащую локально собранный пакет.

Запуск тестов

Тесты написаны с использованием Jest:

Зачем мне этот пакет?

КриптоПРО ЭЦП Browser Plug-In доступен в разных браузерах в двух версиях.
Асинхронной (в современных браузерах) и синхронной (в браузерах постарше).
С помощью этого пакета можно не писать реализацию под каждую версию плагина дважды.
И вместо этого
и этого
написать это (UMD):

или это (ES Modules Typescript):

Криптопро эцп browser plug-in

КриптоПро ЭЦП Browser plug-in предназначен для создания и проверки электронной подписи (ЭП)
на веб-страницах с использованием СКЗИ «КриптоПро CSP».

КриптоПро ЭЦП Browser plug-in позволяет подписывать различные типы данных:

электронный документ;
данные веб-формы;
файл, загруженный с компьютера пользователя;
текстовое сообщение и т.п.
С точки зрения бизнес-функций, плагин позволяет использовать ЭП:

на клиентских порталах;
в системах интернет-банкинга;
в электронных офисах с доступом через web и т.п.
Например: В онлайн-банке подтверждение операции по переводу средств усовершенствованной электронной цифровой подписью обеспечит гарантию того, что счетом распорядился владелец в конкретный (подтвержденный) момент времени и сертификат ключа подписи на момент совершения транзакции был действителен.

КриптоПро ЭЦП Browser plug-in позволяет создавать и проверять как обычную электронную подпись, так и усовершенствованную электронную подпись. Поскольку плагин является частью стандарта применения усовершенствованной электронной цифровой подписи, автоматически решаются задачи:

доказательство момента подписи документа и действительности сертификата ключа подписи на этот момент;
отсутствие необходимости сетевых (онлайн) обращений при проверке подписи;
архивное хранение электронных документов.
Создание и проверка подписи происходят на стороне пользователя.

КриптоПро ЭЦП Browser plug-in распространяется бесплатно.

Лицензия

MIT

Методы объекта cryptopro

*Методы getContainerCertificates и getAllContainerCertificates позволяют получить сертификаты из закрытых ключей, записанных на обыкновенную флэшку

Методы объекта сертификата

Сертификат предоставляет следущее API:

Миграция с версии 1 на 2

Внесены следующие изменения:

• Пакет собран в форматах:
  • UMD, в папке dist/, для подключения через тэг script. Объект window.cryptoPro доступен глобально.
  • ES Modules, в папке lib/, для использования с разными системами сборки.
    Методы API импортируются напрямую из npm пакета.
• В UMD версии переименован глобальный объект с window.CryptoPro на window.cryptoPro
• Переименованы общие методы:
• Убран метод signDataXML
• Переименованы методы сертификата:
• Результат методов сертификата getOwnerInfo и getIssuerInfo
  изменился с { descr, title, translated } на { description, title, isTranslated }
• Принципиальная реализация методов, обращающихся к Крипто ПРО не изменилась.
  Получение сертификатов, создание подписи, проверка корректности настроек работают по-прежнему.
• Убрана поддержка IE8 (Крипто ПРО его больше не поддерживает)
• Убрана поддержка КриптоПРО CSP версий ниже 4.0
• Убрана поддержка КриптоПРО ЭЦП browser plug-in версий ниже 2.0
• Доработана обработка ошибок, выбрасываемых из Крипто ПРО
• При написании кода будут работать автодополнения и подсказки
• Исправлена проблема работы библиотеки с UglifyJs
• Методы API доступны напрямую:

В версии 1:

В версии 2 (UMD):

В версии 2 (ES Modules):

Настройка плагина для firefox (до версии 52)

После настройки плагина на страницах, запрашивающих работу с ЭП в панели навигации, рядом с url будет кнопка,
позволяющая «разрешить и запомнить» использование установленного плагина.

Перезапустите Firefox, и убедитесь в наличии CryptoPRO Cades plugin (см. Menu -> Addons).

Ошибка параметр задан неверно. (0x80070057)

Если при попытке подписать сообщение с использованием PKCS#7 подписи падает такая ошибка, то читайте этот issue

Поддерживаемые скзи

КриптоПРО CSP (v4.0 ) рекомендуется использование только сертифицированных версий. Инструкция по установке:

КриптоПРО ЭЦП browser plug-in (v2.0.12438 ).

Инструкция по установке плагина в Linux. В Windows и OSX следуйте указаниям программы-установщика.

Инструкция по установке сертификатов в систему для Linux / OSX.

Проверка пакета перед публикацией в npm

Необходимо протестировать работу в заявленных браузерах, сделав это на локально запакованной версии пакета.
Для этого собираем пакет:

npm run package
mv package ..

Важно переместить папку package куда-нибудь выше для избежания конфликтов при линковке с текущим package.json.

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

Проверяем работу примеров в режимах разработки и продакшн.

После завершения экспериментов можно удалить глобальную ссылку из директории ../../../package таким образом:

Проверка работы примеров с react и angular

React и Angular используют версию сборки пакета в формате ES модулей из директории lib/.
Для их запуска необходимо сначала собрать пакет выполнив:

После этого из папки examples/angular или examples/react залинковать пакет:

И запустить пример в одном из двух режимов. В режиме разработки:

или в режиме продакшн:

npm run build
npm run serve

Тем, кто хочет помочь

Буду благодарен за расширение/улучшение/доработку API.
Вам будут полезны примеры,
предоставляемые Крипто ПРО.

Установка

Для NPM:

npm install crypto-pro-js

Для Yarn:

Для Bower:

bower install webmasterskaya/crypto-pro-js

Подключение пакета как UMD модуля через тэг script:

Подключение пакета как ES модуля с Typescript или JavaScript:

Список требуемых полифиллов (если необходимы, подключаются самостоятельно):

• Promise
• Array.prototype.find

Установка криптопро csp в linux / osx

Процесс установки в OSX незначительно отличается от Linux, поэтому описание приведено на примере дистрибутива семейства Debian (x64).

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

После загрузки КриптоПРО CSP для нужной платформы, распакуйте архив:

tar -xzvf linux-amd64_deb.tgz
chmod 777 -R linux-amd64_deb/

Запустите скрипт установки:

linux-amd64_deb/install.sh

Проверьте отсутствиеcprocsp-rdr-gui:

Установите дополнительно cprocsp-rdr-gui-gtk:

dpkg -i linux-amd64_deb/cprocsp-rdr-gui-gtk-64_4.0.0-4_amd64.deb

Дополнительная информация по установке

Установка криптопро эцп browser plugin в linux

Загрузите КриптоПРО ЭЦП browser plug-in и распакуйте его:

mkdir cades_linux_amd64
tar -xzvf cades_linux_amd64.tar.gz -C cades_linux_amd64

Сконвертируйте rpm в deb пакеты при помощи утилиты alien:

Установите пакеты:

dpkg -i cprocsp-pki-cades_2.0.0-2_amd64.deb
dpkg -i cprocsp-pki-plugin_2.0.0-2_amd64.deb

Проверьте наличие файлов плагина:

Установка сертификатов в linux

В OSX процесс схож с Linux.

Подключите USB носитель с ключевыми контейнерами и проверьте результат команды:

Скопируйте ключевой контейнер \.FLASH.sidorov на жесткий диск:

Наличие [ErrorCode: 0x00000000] в завершении каждой команды КриптоПРО говорит о ее успешном выполнении.

Проверьте наличие нового контейнера \.HDIMAGEsidor:

Установите личный сертификат:

Возможно в выводе вы ссылку на сертификат УЦ

При необходимости загрузите сертификат удостоверяющего центра и установите его командой:

После чего, при проверке установленного личного сертификата вы увидите PrivateKey Link: Yes:

/opt/cprocsp/bin/amd64/certmgr -list -store uMy

Электронная цифровая подпись на сайте при помощи криптопро эцп browser plug-in

return ('ActiveXObject' in window);

try {
    store = new ActiveXObject('CAdESCOM.store');
    status = true;
} catch (e) {
    status = false;
}

if (navigator.mimeTypes['application/x-cades']) {
    status = true;
} else {
    status = false;
}

chrome://flags/#enable-npapi

try {
    store = objSign.CreateObject('CAPICOM.store');
    status = true;
} catch (e) {
    status = false;
}

objSign = $('<object/>', {
    'id': 'cadesplugin',
    'type': 'application/x-cades',
    'css': {
        'visibility': 'hidden',
        'height': '0px',
        'width': '0px',
        'position': 'absolute'
    }
}).appendTo('body').get(0);

try {
    store.Open();
    status = true;
} catch (e) {
    status = false;
}

if ('Certificates' in store) {
    certs = store.Certificates;
}

if (certs.Count) {
    status = true;
} else {
    status = false;
}

cert.GetInfo(6)   ' ('   formatDate(cert.ValidFromDate)   ' - '   formatDate(cert.ValidToDate)   ')'

function formatDate(d) {
    try {
        d = new Date(d);
        return ('0'   d.getDate()).slice(-2)   '.'   ('0'   (d.getMonth()   1)).slice(-2)   '.'   d.getFullYear();
    } catch (e) {
        return '';
    }
}

try {
    return cert.IsValid().Result;
} catch (e) {
    return false;
}

certs.Find(0, thumbprint).Item(1)

if (isActiveX()) {
    var CPSigner = new ActiveXObject('CAdESCOM.CPSigner');
} else {
    var CPSigner = objSign.CreateObject('CAdESCOM.CPSigner');
}
CPSigner.Certificate = cert;
if (isActiveX()) {
    var SignedData = new ActiveXObject('CAdESCOM.CadesSignedData');
} else {
    var SignedData = objSign.CreateObject('CAdESCOM.CadesSignedData');
}
SignedData.Content = text;
return SignedData.SignCades(CPSigner, 1, false);