Согласно телеметрии Firefox, 76% веб -страниц загружены HTTPS , и это число растет.
Рано или поздно инженерам -программистам придется иметь дело с HTTPS, и чем раньше, тем лучше. Продолжайте читать, чтобы знать, почему и как обслуживать приложение JavaScript с HTTPS в вашей среде разработки.
Зачем использовать HTTPS в среде разработки?
Во -первых, следует ли вообще обслуживать веб -сайт в производстве через HTTPS? Если вы действительно не знаете, что делаете, Ответ по умолчанию Да Анкет Это улучшает ваш сайт на многих уровнях: безопасность, производительность, SEO и так далее.
Как настраивать HTTPS часто аделка во время первого выпуска и вызывает множество других вопросов. Следует ли зашифровать трафик от конца до конца, или шифрование до тех пор, пока обратный прокси? Как генерировать сертификат? Где это следует хранить? Как насчет HSTS ?
Команда разработчиков должна быть в состоянии ответить на эти вопросы рано. Если вы не сможете этого сделать, вы могли бы в конечном итоге, как переполнение стека, тратить много времени Анкет
Кроме того, наличие среды разработки как можно ближе из производства снижает риски, которые ошибочно достигают производственной среды, а также склонны к снижению времени для отладки этих ошибок. Это также верно для сквозных тестов.
Кроме того, существуют функции, которые работают только на странице, обслуживаемой HTTPS, такими как Работники обслуживания Анкет
Но https медленно! Многие люди считают, что шифрование сложно и определенным образом должно быть медленным, чтобы быть эффективным. Но с современным оборудованием и протоколами, Это больше не так Анкет
Как генерировать действительный сертификат для среды разработки?
Для производственных систем легко получить TLS Сертификат: генерируйте один из Давайте зашифруем Или купите один у оплачиваемого поставщика.
Для среды развития это кажется сложнее, но это не так сложно.
Mkcert: no bronger cli
Филиппо Вальсторда Недавно опубликовано mkcert , простой CLI для генерации сертификатов разработки на местном уровне. Вам просто нужно запустить команду в одну строчку:
mkcert -install mkcert example.com
Полностью поддерживаемый сертификат будет доступен там, где вы выполняли команду, а именно в ./example.com-key.pem Анкет
Ручная установка с OpenSSL
mkcert Следует удовлетворить все ваши потребности, если вам не нужно поделиться одним и тем же сертификатом со своими коллегами или через другие системы, чем ваша местная Env. В этом случае вы можете генерировать свой собственный сертификат благодаря openssl Анкет
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt
Сертификат ( server.crt ) и его ключ ( server.key ) будет действительным, но Самоподобный Анкет Этот сертификат будет неизвестен любым Управление сертификата Анкет Но все браузеры просят известных сертификационных органов проверить сертификаты, чтобы принять зашифрованные соединения. Для самоотверженного сертификата они не могут его подтвердить, поэтому они демонстрируют раздражающее предупреждение:
Вы можете принять это неудобства и вручную игнорировать предупреждение каждый раз, когда оно появляется. Но это очень громоздко, и это может заблокировать тесты E2E в среде CI. Лучшее решение — создать свой собственный локальный Управление сертификата , добавьте этот пользовательский авторитет в свой браузер и генерируйте из него сертификат.
Вот что mkcert делает для вас под капюшоном, но если вы хотите сделать это самостоятельно, я написал суть, которая может помочь вам: Kmaschta/205a67e42421e779edd3530a0efe5945 Анкет
HTTPS из обратного прокси или стороннего приложения
Обычно конечные пользователи не обращаются напрямую на сервере приложений. Вместо этого пользовательские запросы обрабатываются балансировщиком нагрузки или обратным прокси, который распространяет запросы по бэкэндам, хранит кэш, защищает от нежелательных запросов и так далее. Нередко, когда эти прокси берут роль дешифрования запросов и также шифрования ответов.
В среде разработки мы тоже можем использовать обратный прокси!
Шифрование через Traefik и Docker Compose
Трафик это обратный прокси, который поставляется с большим количеством преимуществ для разработчиков. Среди прочего, его просто настроить, и он поставляется с графическим интерфейсом. Кроме того, есть официальное изображение Docker Доступно на Docker Hub Анкет
Итак, давайте использовать его внутри Docker-compose.yml гипотетического применения, которое служит только статическим файлам:
version: '3.4'
services:
reverse-proxy:
image: traefik # The official Traefik docker image
command: --docker --api # Enables the web UI and tells Traefik to listen to docker
ports:
- '3000:443' # Proxy entrypoint
- '8000:8080' # Dashboard
volumes:
- /var/run/docker.sock:/var/run/docker.sock # So that Traefik can listen to the Docker events
- ./certs/server.crt:/sslcerts/server.crt
- ./certs/server.key:/sslcerts/server.key
- ./traefik.toml:/traefik.toml # Traefik configuration file (see below)
labels:
- 'traefik.enable=false'
depends_on:
- static-files
static-files:
image: halverneus/static-file-server
volumes:
- ./static:/web
labels:
- 'traefik.enable=true'
- 'traefik.frontend.rule=Host:localhost'
- 'traefik.port=8080'
- 'traefik.protocol=http'
ports:
- 8080:8080
В этом примере наш статический файловый сервер прослушивается на порту 8080 и обслуживает файлы в HTTP. Эта конфигурация говорит Traefik обрабатывать HTTPS -запросы к https://localhost и доверьте каждый из них http://localhost: 8080 Чтобы обслуживать статические файлы.
Мы также должны добавить traefik.toml Чтобы настроить точки входа Traefik:
debug = false
logLevel = "ERROR"
defaultEntryPoints = ["https","http"]
[entryPoints]
[entryPoints.http]
address = ":80"
[entryPoints.http.redirect]
entryPoint = "https"
[entryPoints.https]
address = ":443"
[entryPoints.https.tls]
[[entryPoints.https.tls.certificates]]
certFile = "/sslcerts/server.crt"
keyFile = "/sslcerts/server.key"
Здесь у нас есть две точки входа: http и https , слушать соответственно до портов 80 и 443. Первый перенаправляется на HTTPS, а второй настроен на шифрование запросов благодаря указанным сертификатам TLS.
Шифрование от Docker Compose через Nginx
Очевидно, что мы можем сделать то же самое с популярным прокси -прокси Nginx. Поскольку Nginx также может непосредственно обслуживать статические файлы, настройка проще. Опять же, первый шаг — это Docker-compose.yml :
version: '3'
services:
web:
image: nginx:alpine
volumes:
- ./static:/var/www
- ./default.conf:/etc/nginx/conf.d/default.conf
- ../../certs/server.crt:/etc/nginx/conf.d/server.crt
- ../../certs/server.key:/etc/nginx/conf.d/server.key
ports:
- "3000:443"
И конфигурация NGINX AT default.conf :
server {
listen 80 default_server;
listen [::]:80 default_server;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name ~.;
ssl_certificate /etc/nginx/conf.d/server.crt;
ssl_certificate_key /etc/nginx/conf.d/server.key;
location / {
root /var/www;
}
## If the static server was another docker service,
## It is possible to forward requests to its port:
# location / {
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_pass http://web:3000/;
# }
}
Обслуживание HTTPS прямо из приложения
Иногда требования к безопасности требуют сквозного шифрования, или наличие обратного прокси-сервера может показаться чрезмерным в среде разработки. В большинстве случаев можно служить HTTPS непосредственно из вашей среды повседневного развития.
Давайте возьмем пример общего стека: приложение React с API REST с использованием Экспресс Анкет
Использование приложения Create React или WebPack Dev Server
Ваше среднее приложение React загружается по Create-React-App Анкет Этот удивительный инструмент поставляется с большим количеством встроенных функций и может обрабатывать HTTPS из коробки. Для этого вам просто нужно указать Https = true переменная среды при запуске приложения:
HTTPS=true npm run start # or HTTPS=true yarn start
Эта команда будет обслуживать ваше приложение из https://localhost: 3000 вместо http://localhost: 3000 с автоматическим сертификатом. Но это самоотверженный сертификат, поэтому опыт разработчика плохой.
Если вы хотите использовать свой собственный сертификат HTTPS (подписанный с авторитетом, которому доверяет ваш браузер), Create-React-App Не позволяет вам настроить его без выброса приложения ( npm запустить Ecect ).
РЕДАКТИРОВАТЬ: Dev.to Reader, Zwerge, нашел умный обходной путь Чтобы заменить сертификат HTTPS по умолчанию на лету:
"scripts": {
"prestart": "(cat ../../certs/server.crt ../../certs/server.key > ./node_modules/webpack-dev-server/ssl/server.pem) || :",
"start": "react-scripts start",
},
К счастью, если вы выводите CRA, или если ваш проект связан с WebPack, Webpack-dev-server так же просто, как Create-React-App Когда дело доходит до обслуживания HTTPS! Можно настроить пользовательский сертификат HTTPS с двумя линиями в конфигурации WebPack:
const fs = require('fs');
const path = require('path');
module.exports = {
mode: 'production',
// ...
devServer: {
https: {
key: fs.readFileSync(path.resolve(__dirname, '../../certs/server.key')),
cert: fs.readFileSync(path.resolve(__dirname, '../../certs/server.crt')),
},
port: 3000,
},
};
В следующий раз, когда вы запустите Webpack-dev-server , он будет обрабатывать https запросы к https://localhost: 3000 Анкет
Зашифрованный http/2 с экспрессом и Spdy
Теперь, когда у нас есть наша фронтальная часть приложения, которая подается через HTTPS, мы должны сделать то же самое с нашим бэкэнд.
Для этого давайте использовать выражать и СПДИ . Неудивительно, почему эти два имена библиотеки касаются скорости, это потому, что они быстро настройки!
const fs = require('fs');
const path = require('path');
const express = require('express');
const spdy = require('spdy');
const CERTS_ROOT = '../../certs/';
const app = express();
app.use(express.static('static'));
const config = {
cert: fs.readFileSync(path.resolve(CERTS_ROOT, 'server.crt')),
key: fs.readFileSync(path.resolve(CERTS_ROOT, 'server.key')),
};
spdy.createServer(config, app).listen(3000, (err) => {
if (err) {
console.error('An error occured', error);
return;
}
console.log('Server listening on https://localhost:3000.')
});
Http/2 не требуется для обслуживания https, Можно обслуживать зашифрованный контент с HTTP первым именем , Но пока мы находимся в обслуживании HTTPS, мы можем обновить протокол HTTP. Если вы хотите узнать больше о преимуществах http/2, вы можете прочитать Этот быстрый FAQ Анкет
Вывод
Современный инструмент позволяет создавать приложения, которые более безопасны и быстрее для конечных пользователей и, теперь, простые в начальной загрузке. Я надеюсь, что я убедил вас использовать эти библиотеки и технологии, начиная с начала вашего проекта, когда они еще дешевы для установки.
Все примеры, которые я использовал в этом сообщении в блоге, собраны в следующем репо: Marmelab/https-on-dev Анкет Не стесняйтесь играть и добавлять свой собственный опыт разработки HTTPS!
Оригинал: «https://dev.to/kmaschta/https-in-development-a-practical-guide-175m»