Иногда возникает необходимость передать данные между работающим в браузере приложением и программой, выполняющейся на той же системе, на которой запущен браузер. Это может понадобиться, например, если нам нужно поработать с оборудованием, подключенным локально. Считывателем смарт-карт, аппаратным ключом шифрования и так далее.
Первыми приходят в голову три способа решить эту задачу:
- Обойтись средствами браузеров, или написать плагины к ним
- Организовать обмен данными через backend, выступающий в роли посредника
- Добавить в программу HTTP-сервис, и обращаться к ней напрямую из браузера
Третий пункт выглядит хорошо, позволяет убрать авторизацию в программе, не требует вообще никакого пользовательского интерфейса. Попробуем его реализовать, написав программу на C# под .NET Framework 4. Так как речь пойдет о .NET, решение будет только для Windows (XP и новее). Веб-приложение сделаем на angular.
Почему не 1 и 2?
Первый пункт точно принесёт много боли, поддерживать браузеры придётся отдельно, сделать в плагинах для браузера можно далеко не всё. Всё же, теоретически, поработать со смарт-картами через плагины возможно. Но нужен способ проще.
Второй пункт просто реализовать, но для этой схемы придется делать авторизацию не только на сайте, но и в локальном приложении. Значит понадобится какой-никакой, но интерфейс, при смене пароля потребуется повторная авторизация и в программе. Плюс в корпоративных сетях будут дополнительные проблемы с сетью, у них часто доступ в интернет реализован через прокси-серверы с суровой фильтрацией и авторизацией, для настройки прокси тоже придётся делать интерфейс, не всегда можно отделаться автоматическим определением настроек. Далёкому от IT пользователю будет сложнее с этим работать, создадим больше работы техподдержке. Конечно, можно формировать установочный пакет индивидуально для каждого пользователя, чтобы убрать необходимость первичной авторизации, но это только добавит проблем.
При чем тут HTTPS?
Когда сайт работает по HTTPS, браузеры блокируют загрузку активного содержимого с помощью HTTP. Однако, по логике вещей, запрос к локальной машине по HTTP браузеры должны считать безопасным, и не должны блокировать его. Это оказалось не совсем так.
Таблица показывает результаты небольшого исследования поведения браузеров на платформе Windows:
| http://localhost/ | ❌ Blocked loading mixed active content | ✓ | ❌ Error: Access is denied 0x8007005 |
| http://127.0.0.1/ | ✓ | ✓ | ❌ Error: Access is denied 0x8007005 |
| https://localhost/ | ❌ SEC_ERROR_UNKNOWN_ISSUER | ✓ | ✓ |
В таблице приведено поведение браузеров при попытке сделать запрос по соответствующему адресу. Браузеры на движке Chromium ведут себя аналогично Chrome, а поведение Edge 44 аналогично поведению IE 11. Для HTTPS выпущен валидный сертификат, подписанный самоподписанным корневым сертификатом. Поведение для https://127.0.0.1 и https://localhost одинаковое, просто для 127.0.0.1 тогда нужно тоже выпускать сертификат, а сертификаты для IP адресов редко встречаются, так что опустим этот момент.
В Chrome всё работает. Chrome и IE используют системное хранилище сертификатов, поэтому в них работает и HTTPS. Firefox использует собственное хранилище сертификатов, поэтому не доверяет нашему самоподписанному сертификату. Firefox и IE не доверяют имени localhost, и это правильно, ведь никто не гарантирует, что оно разрешится в 127.0.0.1 (хотя они могли просто это проверить, как делает Chrome).
Главная проблема: IE не даёт обратиться к программе по HTTP. Значит возни с сертификатами нам не избежать.
Для работы с браузерами также потребуется указывать в программе правильные заголовки Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers (CORS).
SSL сертификат
Можно сделать DNS-запись для своего домена, например local.example.com, которая будет разрешаться в 127.0.0.1. Выпустить для этого домена SSL сертификат, распространять его вместе с программой. Придётся распространять закрытый ключ этого сертификата вместе с программой. Это совершенно не годится. А сертификат в программе еще и нужно будет обновлять.
IE не будет доверять самоподписанному SSL сертификату, его надо подписать доверенным корневым сертификатом (а он может быть и самоподписанный).
Можно сгенерировать корневой сертификат и SSL сертификат и распространять их с программой, добавляя в локальное хранилище сертификатов. Выглядит небезопасно. И тоже может возникнуть необходимость отозвать или обновить сертификат. Поэтому, сертификаты с ключами будем генерировать прямо на компьютере пользователя при первом запуске программы.
Создание сертификатов в C#
Для .NET есть библиотека BouncyCastle, умеющая всё что нам нужно. Единственная проблема – для добавления сертификата в хранилище придётся запросить повышение прав. Также повышенные права понадобятся, чтобы с помощью netsh закрепить сертификат за определённым портом в системе.
netsh http add sslcert ipport=0.0.0.0: certhash=
В примере эту работу делает метод RegisterSslOnPort в классе SslHelper.
HTTP-сервис в программе на C#
Для создания легковесного HTTP(S)-сервера воспользуемся библиотекой Nancy. Nancy – это легкий веб-фреймворк для .NET, простой и удобный в работе. Про него много написано, в том числе и на Хабре. Благодаря модулю Nancy.SelfHosting мы можем хостить наше приложение без использования IIS.
Для примера создадим endpoint, занимающийся сложением двух чисел. Важно тут установить правильные заголовки CORS, иначе браузер не будет выполнять запрос к нашему API.
NancyModule
public class CalcNancyModule : NancyModule < public CalcNancyModule() < //настроим заголовки, без этого не будет работать After.AddItemToEndOfPipeline((ctx) =>ctx.Response .WithHeader(«Access-Control-Allow-Origin», GetOrigin(ctx)) .WithHeader(«Access-Control-Allow-Methods», «POST,GET») .WithHeader(«Access-Control-Allow-Headers», «Accept, Origin, Content-type»)); Get[«/Calc»] = _ => < //здесь вернём строку с номером версии .NET сборки >; Get[«/Calc/Add»] = _ => < //а здесь вернём сумму двух параметров запроса (num1 + num2) >; > private string GetOrigin(NancyContext ctx) < //возвращаем Origin, с которого пришёл запрос //ТОЛЬКО для тестовых целей //в реальных приложениях нужно возвращать адрес веб-приложения //например https://app.example.com return ctx.Request?.Headers[«Origin»]?.FirstOrDefault() ?? «»; >>
Добавим инициализацию Nancy в наше приложение, и мы готовы к бою.
Инициализация Nancy
var hostConfigs = new HostConfiguration(); hostConfigs.UrlReservations.CreateAutomatically = true; hostConfigs.RewriteLocalhost = false; var uris = new Uri[] < new Uri($»http://localhost:»), new Uri($»http://127.0.0.1:»), new Uri($»https://localhost:») >; using (var host = new NancyHost(hostConfigs, uris))
При первом запуске нужно сгенерировать сертификаты и поместить их в хранилище, запросив при этом соответствующие права. Для этих манипуляций служит класс SslHelper, в котором единственный публичный метод CheckOrCreateCertificates делает эту работу. В качестве параметров ему передаются SubjectName сертификатов. Метод проверяет нет ли нужных сертификатов и системе, если нет — создаёт их.
Для симуляции тяжелой работы и долгих задержек в примере добавим Thread.Sleep(1000) в вызовы нашего API.
На этом приложение готово к запуску, перейдём к вебу.
Веб-приложение
Как понятно из таблицы поведения браузеров, каким-то одним эндпоинтом обойтись не получится, придётся использовать как минимум два:
В веб-приложении нам нужно определить, если мы в IE (или Edge) – использовать HTTPS, если нет – HTTP. Можно сделать надёжнее и не выяснять в каком мы браузере, а просто попробовать выполнить запрос к методу GET /Calc нашего API, если запрос успешен – работаем, если нет – пробуем другой протокол.
Всё это нужно только если веб-приложение само использует HTTPS, потому что при использовании протокола HTTP, браузеры не накладывают ограничений на запросы, нужны только правильные заголовки CORS.
В angular – приложении создадим сервис InteractionService, который будет выполнять проверку доступности локального эндпоинта сначала по HTTP, потом по HTTPS. Проверку выполняет метод checkAvailability, а результат проверки доступен при подписке на переменную available$ типа BehaviorSubject с начальным значением false.
Работу по сложению чисел поместим в компонент AppComponent. При нажатии кнопки “Calculate”, веб-приложение делает запрос к GET /Calc/Add?num1=https://habr.com/ru/articles/438166/» target=»_blank»]habr.com[/mask_link]
Как создать SPA на JS и PHP за час
Одностраничные приложения уже давно не в новинку, а скоро вообще станут стандартом веб-разработки. Узнайте, как их создавать, — пока не поздно.
Евгений Кучерявый
Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.
SPA (англ. Single Page Application — одностраничное приложение) — это сайт, для работы которого не требуется обновление страницы, потому что все данные загружаются с помощью скриптов.
Принцип работы SPA прост: когда вы совершаете какое-то действие, например нажимаете на ссылку, скрипт перехватывает это событие. Он отменяет действие по умолчанию и вместо этого сам обменивается данными с сервером, а потом выводит их на странице.
Обычно такой сайт быстрее загружается, потому что ему нужно скачать только определённые данные, а не всю страницу. Также часть контента может быть закеширована, то есть загружена заранее. В этом случае обновление может произойти мгновенно.
Сайты-приложения, или SPA, совместимы с большим количеством устройств. Они быстро открываются и работают на стационарных ПК, ноутбуках, планшетах, смартфонах. Мы получаем универсальный инструмент веб-разработки.
SPA отлично подходит для интернет-магазинов: пользователь может нажать на кнопку «Добавить в корзину» и тут же продолжить смотреть другие товары. Но и для обычных блогов такая технология вполне уместна.
Создать что-то подобное можно и за час. Вы можете посмотреть репозиторий с полным кодом приложения.
Каким должно быть SPA
Чтобы SPA было удобно пользоваться, нужно правильно выстроить обмен данными с сервером. Вот несколько рекомендаций.
- При обновлении контента должен меняться адрес страницы в браузере.
- Важно, чтобы любую внутреннюю ссылку на сайте можно было скопировать, а при переходе должна загружаться релевантная страница.
- Если страница не загружается слишком долго, нужно сообщить пользователю, что идёт загрузка или что произошла ошибка.
Это небольшой список, но он очень важен, потому что иначе ваше SPA станет менее удобным, чем обычный сайт.
Вёрстка сайта
Для начала нужно создать макет сайта:
Источник: skillbox.ru
Как написать программу для работы с сайтом
Комментарии
Популярные По порядку
Не удалось загрузить комментарии.
ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ
ТОП-10 книг по C++: от новичка до профессионала
Книги по C++ на русском языке с лучшими оценками. Расставлены в порядке возрастания сложности, обобщены указанные читателями преимущества и недостатки.
Лучшие инструменты и советы начинающему C++ программисту
Хотите изучать C++? Делимся важными навыками, фреймворками и советами, которые помогут начинающему C++ программисту устроиться на работу.
Подборка книг по C++ для любого уровня
Хотите начать изучать C++, но не знаете с чего начать? Или подтянуть свои знания в С++? В статье приведен перечень полезных книг.
Источник: proglib.io