Запуск Angular CLI через HTTPS

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

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

При использовании приложений localhost Angular по протоколу HTTPS поддержание самозаверяющих сертификатов может быть затруднено. Это проблема, которую необходимо преодолеть, когда в процессе разработки необходимо безопасное соединение. Вот несколько примеров таких ситуаций:

1. Интеграция со службами, которые требуют от клиента использования HTTPS (например, Facebook Login API или Okta)
2. Использование getUserMedia для получения потока с пользовательского устройства (его можно использовать только в безопасных контекстах)
   

Процедура настройки локального веб-сервера для обслуживания контента по протоколу HTTPS зависит от конкретного сервера. Однако использование Angular CLI - простая задача.

ng serve

Команда ng serve предоставляет выделенный сервер разработки, который поставляется с предустановленным интерфейсом Angular CLI. Команда ng server используется для создания и обслуживания приложения. Если есть изменения, он перестраивает приложение.

Шаги для запуска локального приложения по протоколу HTTPS

Создайте сертификат. Первоначально и в основном вы должны сначала создать самозаверяющие сертификаты на своей локальной рабочей станции и доверять им, прежде чем использовать HTTPS в своем приложении.

Используйте Angular CLI. Angular CLI должен быть проинформирован после того, как ваш сертификат будет создан и ему будет доверено. Это можно сделать, используя либо настройки конфигурационного файла, либо параметры командной строки.

Параметры командной строки

Для поддержки SSL ng serve принимает три встроенных флага:

• --ssl: логическое значение, указывающее, включен или отключен SSL; по умолчанию равно false.
• --ssl-cert: (для SSL-сертификата) относительный путь к сертификатам
  
• --ssl-key: относительный путь к закрытому ключу
  

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

ng serve --ssl \
    --ssl-cert "ssl/localhost.crt" \
    --ssl-key "ssl/localhost.key"

Начиная с Angular 6

ng serve —-ssl true

• SSL включен.
• Проверьте папку SSL по умолчанию на наличие сертификата и закрытого ключа.
  
• Если сертификаты или закрытые ключи не найдены, CLI сгенерирует свои собственные.
  

ng serve \
    --ssl true \
    --ssl-cert "/home/sanjeev/ssl/example2.crt" \
    --ssl-key "/home/s/anjeev/ssl/example2.key"

• SSL включен.
• Проверьте, содержит ли указанный путь сертификат и закрытый ключ.
  
• Если сертификаты или пути к закрытому ключу не найдены, CLI сгенерирует свой собственный.
  

Проблемы, с которыми вы можете столкнуться, и их решение

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

1. Браузер не доверяет нашему сертификату, и мы получаем предупреждение.
2. Отключите цикл и перезапустите.
   

Не доверенный центр сертификации. Эту проблему относительно просто решить. Мы можем просто проигнорировать предупреждение и продолжать использовать наше приложение. Если вы не столкнулись со второй проблемой и можете смириться с тем фактом, что у вас ненадежный сертификат, вы можете остановиться прямо здесь и продолжить разработку своего фантастического приложения.

Отключение цикла и перезапуск. Это временная проблема. Когда фрагмент кода изменяется, приложение может отключиться от сокета, который прослушивает событие, перезапускающее приложение. В дополнение к отключению приложение перезапускается несколько раз. Это проблема, с которой сталкивались несколько человек. Сообщалось о проблеме в репозитории Angular на Github.

Решение. Все, что нам нужно, это чтобы наш браузер доверял нашему сертификату для решения всех наших проблем. Когда мы используем доверенный сертификат, у Angular CLI не возникает никаких проблем. В результате использование доверенного сертификата решает обе проблемы.

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

Важно помнить, что эта настройка предназначена только для локальной разработки. Используйте сертификаты, подписанные авторитетным центром сертификации, для приложений, доступных для широкой публики. Сегодня отличным ресурсом для этого является Let's Encrypt.