Как сертификат размещается на сайте?

Размещение SSL/TLS сертификата на сайте

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

Что такое SSL/TLS сертификат

SSL (Secure Sockets Layer) / TLS (Transport Layer Security) - это протокол, который шифрует трафик между браузером пользователя и сервером. Сертификат подтверждает подлинность сайта.

Когда пользователь посещает https://example.com, браузер проверяет сертификат на сервере.

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

Сертификат размещается НА СЕРВЕРЕ, а не на фронтенде:

Пользователь (браузер) 
    ↓ HTTPS запрос
Сервер (Apache/Nginx/Node.js)
    ↓ Проверяет сертификат
Сертификат (/etc/ssl/certs/domain.com.crt)
    ↓ Шифрует ответ
Браузер получает шифрованный ответ

Структура сертификата

Сертификат состоит из:

1. Публичный ключ (public key) - зашифрован в сертификате
2. Приватный ключ (private key) - хранится на сервере в секретности
3. Метаинформация - домен, сроки действия, издатель

# Структура файлов на сервере
/etc/ssl/
├── certs/
│   ├── domain.com.crt          # Публичный сертификат
│   └── ca-bundle.crt           # Цепочка сертификатов
└── private/
    └── domain.com.key          # Приватный ключ (секретный!)

Конфигурация на Nginx

# /etc/nginx/sites-available/default

server {
    listen 443 ssl http2;  # HTTPS на порту 443
    server_name example.com www.example.com;
    
    # Указываем пути к сертификату и приватному ключу
    ssl_certificate /etc/ssl/certs/domain.com.crt;
    ssl_certificate_key /etc/ssl/private/domain.com.key;
    
    # Настройки безопасности
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    
    # Остальные настройки
    location / {
        proxy_pass http://localhost:3000;  # Backend приложение
    }
}

# Редирект с HTTP на HTTPS
server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$server_name$request_uri;  # Перенаправляем на HTTPS
}

Конфигурация на Apache

# /etc/apache2/sites-available/default-ssl.conf

<VirtualHost *:443>
    ServerName example.com
    ServerAlias www.example.com
    
    # SSL сертификаты
    SSLEngine on
    SSLCertificateFile /etc/ssl/certs/domain.com.crt
    SSLCertificateKeyFile /etc/ssl/private/domain.com.key
    SSLCertificateChainFile /etc/ssl/certs/ca-bundle.crt
    
    # Proxy к backend
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>

# HTTP -> HTTPS редирект
<VirtualHost *:80>
    ServerName example.com
    ServerAlias www.example.com
    Redirect permanent / https://example.com/
</VirtualHost>

Получение бесплатного сертификата через Let's Encrypt

Let's Encrypt - это бесплатный сертификат, обновляется автоматически:

# Установка Certbot (инструмент для Let's Encrypt)
sudo apt-get install certbot python3-certbot-nginx

# Получение сертификата для Nginx
sudo certbot --nginx -d example.com -d www.example.com

# Получение сертификата для Apache
sudo certbot --apache -d example.com -d www.example.com

# Автоматическое обновление
sudo systemctl enable certbot.timer
sudo systemctl start certbot.timer

Certbot автоматически:

• Генерирует сертификат
• Размещает его на сервер
• Обновляет конфиг сервера
• Перезагружает сервер

Как браузер проверяет сертификат

// На фронтенде эти проверки выполняются автоматически
// Браузер делает это БЕЗ участия JavaScript

// Но ты можешь проверить информацию о сертификате:
fetch('https://example.com')
  .then(response => {
    // Браузер уже проверил сертификат к этому моменту
    // Если сертификат невалиден, fetch не сработает
    console.log('Сертификат валиден, соединение безопасно');
  })
  .catch(error => {
    console.error('Ошибка сертификата:', error);
  });

Node.js сервер с SSL

// server.js
const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

// Читаем сертификат и приватный ключ
const options = {
  key: fs.readFileSync('/etc/ssl/private/domain.com.key'),
  cert: fs.readFileSync('/etc/ssl/certs/domain.com.crt')
};

// Создаём HTTPS сервер
https.createServer(options, app).listen(443, () => {
  console.log('HTTPS сервер работает на порту 443');
});

// HTTP -> HTTPS редирект
const http = require('http');
http.createServer((req, res) => {
  res.writeHead(301, { 'Location': 'https://' + req.headers.host + req.url });
  res.end();
}).listen(80);

Цепочка доверия сертификатов

Когда браузер получает сертификат, он проверяет цепочку:

1. Браузер получает сертификат от сервера
2. Проверяет подпись издателя (Certificate Authority - CA)
3. Если CA в списке доверенных (встроенных в браузер)
4. Цепочка считается валидной

Цепочка типично выглядит:
Root CA → Intermediate CA → Leaf Certificate (для твоего домена)

Команды для проверки сертификата

# Посмотреть информацию о сертификате
openssl x509 -in /etc/ssl/certs/domain.com.crt -text -noout

# Проверить, что приватный ключ соответствует сертификату
openssl x509 -noout -modulus -in /etc/ssl/certs/domain.com.crt | openssl md5
openssl rsa -noout -modulus -in /etc/ssl/private/domain.com.key | openssl md5
# Должны быть одинаковыми!

# Проверить сроки действия
openssl x509 -noout -dates -in /etc/ssl/certs/domain.com.crt

# Проверить валидность из командной строки
openssl s_client -connect example.com:443

Что видит пользователь

В браузере значок замка показывает статус:

• Замок зелёный - валидный сертификат для этого домена
• Замок с предупреждением - истёк срок, или неправильный домен
• Замок красный - сертификат невалиден

Роль Frontend Developer

Как фронтенд разработчик ты:

• Не устанавливаешь сертификаты (это работа DevOps/Backend)
• Знаешь, как они работают
• Используешь HTTPS во всех запросах
• Проверяешь, что сайт работает по HTTPS
• Знаешь, что делать если есть проблемы (Mixed Content ошибки)

Mixed Content ошибка

Если твой HTTPS сайт загружает ресурсы по HTTP, браузер выдаст ошибку:

<!-- Неправильно - Mixed Content ошибка -->
<img src="http://example.com/image.jpg" />
<!-- Браузер заблокирует http ресурс -->

<!-- Правильно - используй // или https:// -->
<img src="//example.com/image.jpg" />
<img src="https://example.com/image.jpg" />

HSTS (HTTP Strict Transport Security)

По-умолчанию браузер преобразует HTTP в HTTPS только с редиректами. HSTS говорит браузеру, что нужно ВСЕГДА использовать HTTPS:

# В Nginx config
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

После первого посещения браузер будет использовать HTTPS автоматически, даже если пользователь введёт http://

Резюме

SSL/TLS сертификат:

• Размещается на сервере, а не на фронтенде
• Содержит публичный ключ и метаинформацию
• Приватный ключ хранится в секрете на сервере
• Браузер проверяет сертификат автоматически
• Let's Encrypt предоставляет бесплатные сертификаты
• Frontend Developer должен знать, как это работает

Важно: никогда не коммить приватные ключи в Git!