Как подружить docker, localhost и HTTPS

Generate a csr code for localhost xampp

The Certificate Signing Request, or simply CSR, is a small, encoded text file containing information about your domain and/or company. All commercial CAs require SSL applicants to submit a CSR code, as part of the SSL validation process.

Since XAMPP runs locally on your device, you have several options when it comes to creating your CSR code. Listed below are two CSR generation methods, please select one and follow the instructions inside the link.

Generate a CSR code via SSL Dragon’s CSR Generator Tool.

Generate a CSR Code via OpenSSL utility for Apache

After you generate the CSR code and the private key files, continue with the installation instructions.

Install an ssl certificate for localhost xampp

Once the CA validates your SSL Certificate and delivers the necessary files to your inbox, download the archived ZIP folder and extract its contents on your device.

Here’s what you’ll need:

• Your primary SSL Certificate file
• The CA Bundle or SSL Chain file containing your root and intermediate certificates
  

  Note: If your bundle is broken in several SSL files, you will need to merge the contents of each file into a Single plain text document file (.crt extension). Add your intermediate certificate or certificate first, followed by the root certificate.

• The private key file you generated along with the CSR code.

When your SSL files are ready, please perform the following:

Shell-скрипт

Чтобы ускорить процесс, вы можете взять следующий Shell-скрипт, который вы можете настроить под свои цели:

Test your ssl installation

After you install an SSL Certificate for Localhost XAMPP, it’s recommended to run a diagnostic test on your SSL configuration, to ensure that no SSL errors affect your site’s performance. With the help of these high-end SSL tools, you can get instant scans and reports on your SSL Certificate.

Where to buy the best ssl certificate for xampp?

You don’t need to leave this website! Here, at SSL Dragon, we offer the widest range of SSL products at incredible prices. All our certificates are compatible with XAMPP and are suited for projects of any size and budget. Browse the list below to find the SSL type you need:

If you don’t know what certificate to choose, or struggling to decide on the ideal product, our exclusive SSL Wizard and Advanced Certificate Filter tools will make your search a breeze.

If you find any inaccuracies, or you have details to add to these SSL installation instructions, please feel free to send us your feedback at [email protected]. Your input would be greatly appreciated! Thank you.

Xampp history and versions

XAMPP is a free and open-source cross-platform web server solution stack that allows developers to create a local web server for testing purposes. It runs on Windows, Mac OS, and Linux systems. Initially released in 2002, by Apache Friends, XAMPP stands for Apache MariaDB PHP Perl, with the first letter X referring to cross-platform.

Listed below are the latest releases of XAMPP:

• XAMPP 7.3.3
• XAMPP 7.3.2
• XAMPP 7.3.1
• XAMPP 7.3.0
• XAMPP 7.2.16

Выпускаем свой ssl-сертификат

Для реальных сайтов SSL-сертификаты выдаются специальными сертификационными центрами за деньги. За это они потом могут подтвердить верность домена по запросу любого браузера. Мы же выпустим свой сертификат и сами его подтвердим.

SSL-сертификат создаётся одной командой и состоит из двух частей: публичного сертификата и секретного ключа.

openssl req -x509 -out docker.loc.crt -keyout docker.loc.key 
  -newkey rsa:2048 -nodes -sha256 
  -subj '/CN=docker.loc' -extensions EXT -config <( 
   printf "[dn]nCN=docker.locn[req]ndistinguished_name = dnn[EXT]nsubjectAltName=DNS:docker.locnkeyUsage=digitalSignaturenextendedKeyUsage=serverAuth")

Файлы docker.loc.crt и docker.loc.key будут сохранены в той папке, откуда вы запускаете команду.

Добавляем корневой сертификат в ios

Если вы хотите добавить корневой сертификат на свои устройства под iOS, вы можете сделать это следующим образом:

1. Пересылаем корневой сертификат себе по email, чтобы получить к нему доступ с iOS-устройства.
2. Кликаем по вложению в письме.
3. Переходим в приложение settings и выбираем ‘Profile Downloaded’.
4. Щелкаем по install.
5. Как только установка будет выполнена, переходим обратно на страницу Settings.
6. Переходим в раздел “General” > “About”.
7. Прокручиваем в самый низ и щелкаем по Certificate Trust Settings.
8. Включаем свой корневой сертификат в разделе ENABLE FULL TRUST FOR ROOT CERTIFICATES.

Добавляем корневой сертификат к macos keychain

Через CLI:

sudo security add-trusted-cert -d -r trustRoot -k "/Library/Keychains/System.keychain" myCA.pem

Через UI:

1. Открываем приложение macOS Keychain.
2. Выбираем File > Import Items…
3. Выбираем свой приватный ключ (myCA.pem, к примеру).
4. Ищем сертификат, отвечающий Common Name.
5. Делаем двойной клик по корневому сертификату в списке.
6. Раскрываем секцию Trust.
7. Меняем «When using this certificate:» на «Always Trust»
8. Закрываем окно сертификата.
9. Вводим пароль (или сканируем палец).
10. Готово.

Добавляем сертификат в macos keychain

1. В Chrome открываем разрабатываемый сайт, который вы сконфигурировали для использования сертификата
2. Щелкаем Cmd-Alt-I, чтобы открыть инструменты разработчика
3. Щелкаем по вкладке Security
4. Щелкаем по кнопке View certificate

Вы должны увидеть следующий экран.

Теперь перетаскиваем иконку сертификата в папку в приложении Finder.

Сертификат будет создан в данной папке. Делаем двойной щелчок по файлу. Если у вас имеются многочисленные keychain’ы, вы должны увидеть следующее окно:

Щелкаем Add. Если у вас только один keychain, то в таком случае ваш сертификат будет добавлен без какого-либо уведомления. Вне зависимости от того, появлялось ли уведомление или нет, у вас должно открыться окно Keychain Access. Найдите там свой сертификат:

Сделайте по нему двойной щелчок. Откроется окно с информацией о сертификате. Раскройте секцию Trust. Смените поле «When using this certificate:» на «Always Trust».

Закройте окно сертификата. Он попросит вас ввести пароль (или просканировать ваш палец), сделайте это. Теперь снова зайдите на свой разрабатываемый сайт.

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

Если вам требуется SSL-сертификат для активного сайта, вы можете всегда приобрести его в магазине LeaderSSL.

Добавляем сертификаты в ос

Ниже пример, как это сделать на Mac OS X.

1. Найдите сертификат docker.loc.crt в Finder (или можно в нужной папке консоли ввести «open .»)
2. Дважды кликните по нему, появится окно.

3. Введите пароль администратора
4. Теперь нужно найти этот сертификат в Keychain Access и выбрать Trust Always

Запускаем и проверяем

docker-compose up -d --build

Как в windows для apache подключить ssl сертификаты

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

Как сгенерировать ssl сертификат в windows

У меня веб-сервер установлен в папку C:ServerbinApache24, поэтому если у вас он в другой директории, то подправьте команды под свои условия.

Откройте командную строку Windows (Win x, далее выберите «Windows PowerShell (администратор)»). В командной строке введите команды:

cmd
cd C:ServerbinApache24bin
set OPENSSL_CONF=C:ServerbinApache24confopenssl.cnf
openssl.exe genpkey -algorithm RSA -pkeyopt rsa_keygen_bits:2048 -out localhost.key
openssl.exe req -new -key localhost.key -out localhost.csr

При вводе последней команды появятся запросы на английском языке. Ниже следует их перевод.

You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----

Перевод:

Вас попросят ввести информацию, которая будет включена в запрос вашего сертификата. То, что вы будете вводить, называется Distinguished Name или DN. Там всего несколько полей, которые можно оставить пустыми. В некоторых полях будут значения по умолчанию. Если вы введёте ‘.’, то поле будет оставлено пустым.

Далее:

Country Name (2 letter code) [AU]:

Перевод:

Двухбуквенное имя страны (двухбуквенный код)

Далее:

State or Province Name (full name) [Some-State]:

Перевод:

Название штата или провинции/области (полное имя)

Далее:

Locality Name (eg, city) []:

Перевод:

Название населённого пункта (например, города)

Далее:

Organization Name (eg, company) [Internet Widgits Pty Ltd]:

Перевод:

Название организации (т.е. компании).

Далее:

Organizational Unit Name (eg, section) []:

Перевод:

Подразделение организации (т.е. отдел)

Далее:

Common Name (e.g. server FQDN or YOUR name) []:

Перевод:

Общее имя (например, FQDN сервера или ВАШЕ имя). Это самая важная часть — здесь нужно ввести доменное имя. Можете ввести localhost.

Далее:

Email Address []:

Перевод:

Адрес электронной почты

Далее:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

Перевод:

Пожалуйста, введите следующие «дополнительные» атрибуты для отправки с вашим запросом сертификата
Пароль запроса:
Опциональное имя компании:

Теперь выполните команду:

openssl.exe x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt

В результате в каталоге C:ServerbinApache24bin должны появиться три новых файла:

• localhost.key
• localhost.csr
• localhost.crt

Из них нам понадобятся только два:

• localhost.key
• localhost.crt

Пример docker-compose.yml

Добавляем 443 порт и несколько volume с конфигами и сертификатами.

version: '3.2'
services:
    ...
    nginx:
        image: nginx:latest
        ports:
            - 80:80
            - 443:443
        volumes:
            - ./app/docker/nginx/conf.d:/etc/nginx/conf.d
            - ./app/docker/nginx/ssl:/etc/nginx/ssl
            - ./:/var/www/html
            - ./var/logs/nginx:/var/log/nginx
        command: /bin/bash -c "exec nginx -g 'daemon off;'"

Расположение сертификатов и конфигов

В этой сборке папки из app/docker/nginx монтируются прямо в nginx-контейнер. Поэтому удобно расположить файлы так:

Решение проблем

При некоторых условиях может возникнуть следующая ошибка:

Can't open C:Program FilesCommon FilesSSL/openssl.cnf for reading, No such file or directory
9112:error:02001003:system library:fopen:No such process:cryptobiobss_file.c:72:fopen('C:Program FilesCommon FilesSSL/openssl.cnf','r')
9112:error:2006D080:BIO routines:BIO_new_file:no such file:cryptobiobss_file.c:79:
unable to find 'distinguished_name' in config
problems making Certificate Request
9112:error:0E06D06A:configuration file routines:NCONF_get_string:no conf or environment variable:cryptoconfconf_lib.c:270:

Главная подсказка в первой строке: Can’t open C:Program FilesCommon FilesSSL/openssl.cnf for reading, No such file or directory — она означает, что возникла ошибка чтения файла C:Program FilesCommon FilesSSL/openssl.cnf из-за того, что он отсутствует.

Файл openssl.cnf поставляется с самим веб-сервером Apache и находится в папке conf. Поэтому есть несколько вариантов, как исправить эту ошибку. Например, можно создать нужные папки и скопировать туда этот файл. Но можно пойти более простым путём — на время создания сертификатов установить переменную окружения OPENSSL_CONF указав в ней правильный путь до файла.

Также нужно переключиться из PowerShell в обычную командную строку Windows, поскольку иначе переменная окружения почему-то не устанавливается. Допустим, сервер размещён в папке C:ServerbinApache24bin, тогда файл openssl.cnf расположен по пути C:

cmd
cd C:ServerbinApache24bin
set OPENSSL_CONF=C:ServerbinApache24confopenssl.cnf

Отредактируйте пути в этих командах в соответствии с вашей структурой папок.

Сертификаты ssl

SSL сертификаты можно разделить на два вида: валидные и самоподписанные.

Создаём доменное имя

Во-первых, создадим локально доменное имя, чтобы оно было похожим на боевое, а не обычный и скучный localhost. Например, docker.loc для основного сайта и api.docker.loc для API:

$ sudo vim /etc/hosts
127.0.0.1       localhost
127.0.0.1       docker.loc
127.0.0.1       api.docker.loc
...

Если для вашего сервиса необходимо несколько доменов, то пропишите их ниже по аналогии.

Создать доверенный самозаверяющий сертификат ssl для localhost (для использования с express / node)

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C =Country initials like US, RO, GE
ST =State
L =Location
O =OrganizationName
OU =OrganizationalUnit 
CN = www.localhost.com
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName =@alt_names[alt_names]
DNS.1= www.localhost.com
DNS.2= localhost.com
DNS.3= localhost

backend 
 /security
 /server.js

const express = require('express')const app = express()const https = require('https')const fs = require('fs')const port =3000

app.get('/',(req, res)=>{
    res.send("IT'S WORKING!")})const httpsOptions ={
    key: fs.readFileSync('./security/cert.key'),
    cert: fs.readFileSync('./security/cert.pem')}const server = https.createServer(httpsOptions, app).listen(port,()=>{
        console.log('server running at '  port)})

Становимся (крошечным) удостоверяющим центром

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

openssl genrsa -des3 -out myCA.key 2048

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

Generating RSA private key, 2048 bit long modulus
.................................................................   
.....................................   
e is 65537 (0x10001)
Enter pass phrase for myCA.key:
Verifying - Enter pass phrase for myCA.key:

Теперь мы генерируем корневой сертификат:

openssl req -x509 -new -nodes -key myCA.key -sha256 -days 1825 -out myCA.pem

Нам будет предложено ввести кодовую фразу для приватного ключа, после чего пойдет ряд вопросов. Как на них отвечать – не так уж и важно. Все это будет отражаться затем в информации о сертификате, которая вам вряд ли потребуется. Я предлагаю задать в Common Name что-то такое, что будет понятно вам, чтобы потом распознавать свой корневой сертификат в списке других сертификатов. Это единственное, что имеет значение.

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

Затем вам нужно будет установить сертификат в Nginx, Apache или на любой другой веб-сервер, который вы используете. Я не буду описывать этот процесс, поскольку он зависит от вашей среды. В моем случае я просто следовал инструкциям Hosting WordPress Yourself. Если вы используете MAMP, вы можете выбрать сертификат и файлы ключей через интерфейс, как показано на скриншоте.

После того, как вы обновите конфиг вашего веб-сервера и перезапустите его (не забудьте это сделать), загрузка вашего сайта все равно приведет к появлению ошибки приватности в браузере.

Вы можете заметить, что теперь возникает другая ошибка – ERR_CERT_AUTHORITY_INVALID. Браузер не доверяет сертификату, потому что мы подписали его самостоятельно, а не получили от удостоверяющего центра. Однако мы можем добавить сертификат в систему macOS Keychain и указать, что сертификат всегда должен быть доверенным.