Встраивание электронной подписи в системы с WEB-интерфейсом с помощью браузерного плагина и openssl / Хабр

Подразделы специального раздела интернет-порталов учебных заведений с описанием содержания

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

Что такое эцп (эп)?

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

Электронная подпись является гарантом того, что документ был подписан лицом, которое является ее владельцем. ЭЦП нужна для:

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

Физические лица, использующие электронную подпись, могут подать заявление на оформление ребенка в образовательное учреждение удаленно.

Подписываем документ электронной цифровой подписью

1. Нажимаем на иконку КриптоЭкспресс в трее, а затем кнопку «Подписать файл»:

2. Нажимаем на кнопку «Выберите файл»:

3. Следующим шагом:

1)Выбираем файл для подписи (файл может быть формата .pdf, .docx, .odt, .xls), название файла после выбора будет отображаться в окне «Файл»;

2) в поле «Назначение подписи» из выпадающего списка необходимо выбрать «Отсоединенная подпись в формате DER»

3) в поле «Сертификат» из выпадающего списка необходимо выбрать нужный сертификат. Если на вашем устройстве один сертификат, то по умолчанию будет отображаться один

4) нажимаем кнопку «Подписать»:

4. После нажатия кнопки «Подписать», открывается папка, куда будет сохранена подпись, её можно выбрать. Тип файла поставить SIG и нажать кнопку «Сохранить» (токен с ключом электронной подписи должен быть вставлен в компьютер):

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

Публикуем документ, подписанный электронной цифровой подписью, на сайте образовательной организации

1. Переходим систему администрирования вашего сайта на конструкторе сайтов «Нубекс», заходим в раздел «Образовательная организация» => «Документы»:

2. Загрузим, например, Устав образовательной организации:

3. Нажимаем кнопку «Загрузить файлы»:

4. После загрузки файла:

1) видим в системе загруженный файл;

2) видим уведомление об отсутствии подписи;

3) нажимаем кнопку «Загрузить подпись»:

5. Выбираем файл подписи с расширением .sig именно того документа, который мы подписывали ранее и загружаем на сайт. Система уведомляет о том, что подпись корректна:

Внимание!!! Система осуществляет проверку подлинности подписи. Если файл, который вы подписывали, был изменен вами или кем то еще, то система не примет подпись и выдаст ошибку. На скриншоте ниже видно, что система сигнализирует о том, что подпись не верна, хотя в исходный документ был добавлен только пробел:

В каком виде должна отображаться эп, – какая пиктограмма используется для отображения?

Визуально электронная цифровая подпись на сайте имеет вид пиктограммы и свидетельствует о том, что документ был подписан. Если установить курсор на нее, то выводится информация о дате и времени подписания, а также ФИО должностного лица, подписавшего документ.

ЭП встраивается в электронный файл или же вносится в отдельный документ с расширением .sig. Генерируется в рамках криптографических операций, поэтому не может быть взята как образец. Благодаря крипто технологиям подделать электронную подпись невозможно.

Чтобы сделать пиктограмму подписи, необходимо получить доступ к сервису PicToDoc. Для получения доступа, воспользуйтесь формой обратной связи.

Как выполнить новые требования к сайту и не сойти с ума? о простой электронной цифровой подписи и электронном документе на официальном сайте образовательной организации

Какие новые подразделы в структуру сайта образовательной организации были введены?

Приказ №831 ФС по надзору в сфере науки и образования РФ (от 14.08.2020) требует обязательного введения новых подразделов интернет-ресурса. Каждый из них содержит определенные требования, которые должны быть учтены.

Какие новые требования к структуре официального сайта образовательного учреждения введены в соответствии с приказом №831?

1. Определение структуры веб-ресурсов и формата представляемого материала в соответствии со ст. 29 ФЗ (29.12.2021) №273-ФЗ «Об образовании в РФ».
2. Создание раздела, содержащего сведения о госструктуре. Данные могут быть представлены в нескольких форматах: иерархический список, набор страниц, ссылки. Для каждой страницы необходимо предоставить общий механизм для навигации

Доступ к разделу об учреждении образования должен осуществляться из основного меню и с главной страницы веб-ресурса. Для доступа к информации не должна проводиться предварительная регистрация в системе. Обязательно должны быть предоставлены данные, прописанные в подпунктах 3.1-3.13 (п.

В специальном разделе можно размещать иную информацию, если такое решение было принято учреждением образования. В обязательном порядке должны быть представлены сведения, требуемые действующим законодательством РФ (п. 6, ст. 2, 29-ФЗ от 29.11.2021 №273 ФЗ «Об образовании в РФ»).

Какие подразделы должен содержать специальный раздел «сведения об образовательной организации» на официальном сайте школы?

На главной странице веб-ресурса должен быть предусмотрен раздел «Основные сведения». В нем нужно предоставить сокращенные или полные данные о наименовании учебного заведения и о дате его открытия. Также необходимо указать сведения об учредителе, наименовании филиалов и представительств.

Какие требования установлены ко всем обязательным страницам сайта образовательной организации?

Все страницы веб-ресурса, на которых находится информация, предусмотренная пп. 3.1-3.13 действующих Требований, в обязательном порядке должны быть разработаны на основе специального HTML-кода. Язык гипертекстовой разметки страницы необходим для однозначной идентификации сведений и является обязательным для размещения на сайте учреждения образования. К сведениям, размеченным определенной HTML, необходимо обеспечить доступ посетителям сайта.

На веб-ресурсе обязательно должна быть предусмотрена версия для людей с нарушением зрения (версия для слабовидящих).

Конфигурирование openssl

Openssl поддерживает российские криптоалгоритмы, начиная с версии 1.0. Для того, чтобы их использовать, в openssl требуется подгружать engine gost. В большинстве дистрибутивов openssl эта библиотека присутствует. Чтобы engine подгружалась, можно прописать ее в конфигурационном файле openssl:

[openssl_def]
engines = engine_section

[engine_section]
gost  = gost_section

[gost_section]
engine_id  = gost
default_algorithms = ALL

Если конфигурационный файл openssl не расположен в стандартном месте, то путь к нему можно задать через переменную окружения OPENSSL_CONF.

Другим вариантом подгрузки engine gost является ее передача в параметрах командной строки утилиты openssl.

Если engine gost не расположена в стандартном месте, то через переменную окружения OPENSSL_ENGINES можно задать путь к директории, в которой openssl будет ее искать.

Для получения информации о том, успешен ли был вызов утилиты openssl или нет, с возможностью уточнения ошибки, требуется парсить stdout и stderror. В конце статьи приведена ссылка на PHP-скрипт, который использует данную утилиту.

Теперь перейдем к реализации законченных пользовательских сценариев.

Подраздел «доступная среда»

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

Подраздел «международное сотрудничество»

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

Поиск подключенных устройств

Любой клиентский сценарий начинается с поиска подключенных к компьютеру USB-устройств Рутокен. В контексте данной статьи акцент делается на устройство Рутокен ЭЦП.

var devices = Array();

try 
{
    devices = plugin.enumerateDevices();
}
catch (error) 
{
    console.log(error);
}

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

Рутокен Плагин определяет все подключенные к компьютеру USВ-устройства Рутокен ЭЦП, Рутокен PINPad, Рутокен WEB. Поэтому следующим шагом следует определить тип устройства.

Полезные ссылки

Данные ссылки могут быть полезны разработчикам инфосистем с поддержкой ЭЦП на базе Рутокен Плагин и openssl:

Демосистема Рутокен ПлагинWEB-сервис генерации ключей, формирования запросов, управления сертификатами, формирования шаблонов запросов на сертификаты Документация на Рутокен ПлагинДокументация по использованию утилиты openssl с российскими крипталгоритмамиПример скрипта на PHP, использующего утилиту openssl

Получение информации об устройстве

Для определения типа устройства следует использовать функцию

с параметром TOKEN_INFO_DEVICE_TYPE. Значение этой константы содержится в объекте плагина.

var type;

try
{  
  type = plugin.getDeviceInfo(deviceId, plugin.TOKEN_INFO_DEVICE_TYPE);
}
catch (error) 
{
    console.log(error);
}

switch (type) 
{
    case plugin.TOKEN_TYPE_UNKNOWN:
        message = "Неизвестное устройство";
        break;
    case plugin.TOKEN_TYPE_RUTOKEN_ECP:
        message = "Рутокен ЭЦП";
        break;
    case plugin.TOKEN_TYPE_RUTOKEN_WEB:
        message = "Рутокен Web";
        break;
    case plugin.TOKEN_TYPE_RUTOKEN_PINPAD_2:
        message = "Рутокен PINPad";
        break;
}

Также с помощью функции getDeviceInfo можно получить:

Правила публикации электронных документов

Размещаемые файлы не должны превышать 15 Мб. Если размер документа больше заявленного лимит, то его следует разделить на части. Сканы бумажного носителя должны иметь разрешение в 100 dpi. При этом текст должен быть четким и читаемость не должна быть ухудшена.

Если информация размещается в файлах, то следует учитывать основные требования к используемому формату:

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

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

Работа с ключевыми парами гост р 34.10-2001

1. Для получения декрипторов ключевых пар, хранящихся на устройстве, требуется ввод PIN-кода. Следует понимать, что само значение закрытого ключ получено быть не может, так как ключ является неизвлекаемым.

var keys = Array();

try
{   
    plugin.login(deviceId, "12345678");
    keys = plugin.enumerateKeys(deviceId, null);
}
catch (error) 
{
    console.log(error);
}

2. Для генерации ключевой пары требуется ввод PIN-кода. При генерации ключа параметры могут быть выбраны из набора:

Пример генерации ключевой пары ГОСТ Р 34.10-2001:

var options = {};
var keyId;

try 
{
    keyId = plugin.generateKeyPair(deviceId, "A",  null, options);
}
catch (error) 
{
    console.log(error);
}

3. С помощью функции deleteKeyPair ключевая пара может быть удалена с токена.

Работа с сертификатами

1. На токене могут храниться 3 категории сертификатов:

Расшифрование данных, полученных с сервера, на клиенте

Для расшифрования данных, полученных с сервера, предназначена функция cmsDecrypt. Так как сервер шифрует для клиента, используя его сертификат, то в качестве keyId должен быть передан дескриптор закрытого ключа клиента, соответствующий открытому ключу в сертификате.

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

Шифрование данных на сервере для клиента:

Сертификат выдается при регистрации в системе

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

Далее запрос отправляется на сервер, где на его основе выдается сертификат.Для этого на сервере должен быть установлен и правильно сконфигурирован openssl версии от 1.0 и развернут функционал УЦ.

1. Генерация улюча УЦ:

openssl genpkey -engine gost -algorithm GOST2001 -pkeyopt paramset:A -out ca.key

После этого в файле ca.key будет создан закрытый ключ

2. Создание самоподписанного сертификата УЦ:

openssl req -engine gost -x509 -new -key ca.key -out ca.crt

После ввода необходимой информации об издателе в файле ca.crt будет создан сертификат УЦ.

Сертификат уже имеется на токене, выдан внешним уц

Ключевая пара при этом должна быть создана в формате, совместимом с библиотекой rtPKCS11ECP для Рутокен ЭЦП.

Последовательность вызовов на клиенте:

Подпись получается в base64-формате. При проверке ее на сервере с помощью openssl подпись следует обрамить заголовками, чтобы сделать из нее PEM. Выглядеть подобная подпись будет примерно так:

-----BEGIN CMS-----
MIIDUQYJKoZIhvcNAQcCoIIDQjCCAz4CAQExDDAKBgYqhQMCAgkFADCBygYJKoZI
hvcNAQcBoIG8BIG5PCFQSU5QQURGSUxFIFVURjg PFY 0JLRi9C/0L7Qu9C90LjR
gtGMINCw0YPRgtC10L3RgtC40YTQuNC60LDRhtC40Y4/PCE c2VydmVyLXJhbmRv
bS1kYXRhZTI6ZGE6MmM6MDU6MGI6MzY6MjU6MzQ6YzM6NDk6Nzk6Mzk6YmI6MmY6
YzU6Mzc6ZGI6MzA6MTQ6NDQ6ODM6NjY6Njk6NmI6OWY6YTU6MDk6MzQ6YmY6YzQ6
NzY6YzmgggGeMIIBmjCCAUegAwIBAgIBATAKBgYqhQMCAgMFADBUMQswCQYDVQQG
EwJSVTEPMA0GA1UEBxMGTW9zY293MSIwIAYDVQQKFBlPT08gIkdhcmFudC1QYXJr
LVRlbGVjb20iMRAwDgYDVQQDEwdUZXN0IENBMB4XDTE0MTIyMjE2NTEyNVoXDTE1
MTIyMjE2NTEyNVowEDEOMAwGA1UEAxMFZmZmZmYwYzAcBgYqhQMCAhMwEgYHKoUD
AgIjAQYHKoUDAgIeAQNDAARADKA/O1Zw50PzMpcNkWnW39mAJcTehAhkQ2Vg7bHk
IwIdf7zPe2PxHyAr6lH stqdACK6sFYmkZ58cBjzL0WBwaNEMEIwJQYDVR0lBB4w
HAYIKwYBBQUHAwIGCCsGAQUFBwMEBgYpAQEBAQIwCwYDVR0PBAQDAgKkMAwGA1Ud
EwEB/wQCMAAwCgYGKoUDAgIDBQADQQD5TY55KbwADGKJRK bwCGZw24sdIyayIX5
dn9hrKkNrZsWdetWY3KJFylSulykS/dfJ871IT 8dXPU5A7WqG4 MYG7MIG4AgEB
MFkwVDELMAkGA1UEBhMCUlUxDzANBgNVBAcTBk1vc2NvdzEiMCAGA1UEChQZT09P
ICJHYXJhbnQtUGFyay1UZWxlY29tIjEQMA4GA1UEAxMHVGVzdCBDQQIBATAKBgYq
hQMCAgkFADAKBgYqhQMCAhMFAARAco5PumEfUYVcLMb1cnzETNOuWC8Goda8pdUL
W5ASK tztCwM7wpXgAy Y6/sLtClO9sh8dKnAaEY2Yavg3altQ==
-----END CMS-----

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

Смена pin-кода

Пример смены PIN-кода на устройстве:

var options = {};

try
{   
    plugin.changePin(deviceId, "12345678", "12345671", options);
}
catch (error) 
{
    console.log(error);
}

Здесь первым параметром выступает старый PIN-код, а вторым новый PIN-код.

Строгая аутентификация на портале

Общая схема аутентификации, используемая в Рутокен Плагин, выглядит следующим образом:

Реализация данной схемы ничем принципиально не отличается от «Регистрация, сертификат уже имеется, выдан внешним УЦ».

Шифрование данных на клиенте для сервера

Для того, чтобы обеспечить конфиденциальность обмена данными между клиентом и сервером в плагине предусмотрено шифрование/расшифрование данных. Данные шифруются в формате CMS. Для того, чтобы зашифровать данные в формате CMS, требуется сертификат открытого ключа «адресата».

При этом расшифровать такое сообщение сможет только владелец закрытого ключа. При шифровании данных для сервера рекомендуется хранить сертификат сервера на Рутокен ЭЦП. Этот сертификат может быть записан на устройство при регистрации пользователя на портале.

Для этого следует использовать функцию importCertificate, при этом в качестве параметра category следует передать CERT_CATEGORY_OTHER. Для использования в функции cmsEncrypt нужно получить тело сертификата по его дескриптору с помощью функции getCertificate.

При этом дескриптор является уникальным и неизменным и может быть сохранен в учетной записи пользователя на сервере при импорте сертификата сервера. Для того, чтобы использовалось аппаратное шифрование по ГОСТ 28147-89, требуется установить опцию useHardwareEncryption в true. В противном случае будет использована быстрая программная реализация ГОСТ 28147-89.

Последовательность вызовов приведена на картинке:

Шифрование данных на клиенте:

try
{
    var recipientCert = plugin.getCertificate(deviceId, certRecId);        
}
catch (error) 
{
    console.log(error);
}

var options = {};
options.useHardwareEncryption = true;
var cms;

try
{
    cms = plugin.cmsEncrypt(deviceId, certSenderId, recipientCert, data, options);
}
catch (error) 
{
    console.log(error);
}

Расшифрование данных на сервере, перед расшифрованием сообщение нужно обрамить PEM-заголовками “—–BEGIN PKCS7—–” и “—–END PKCS7—–“:

openssl smime -engine gost -decrypt -in message.cms -inform PEM -recip recipient.crt -inkey recipient.key

recipient.crt — сертификат того, для кого зашифровано сообщение, recipient.key — ключ того, для кого зашифровано сообщение.

Электронная цифровая подпись на сайте при помощи криптопро эцп 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);