Почему повсеместно нужен HTTPS?

// Современные API работают только с HTTPS
navigator.geolocation.getCurrentPosition(); // ❌ HTTP
fetch('/api/data'); // ⚠️ Mixed content на HTTPS

// Без HTTPS данные передаются открытым текстом
// POST /login HTTP/1.1
// username=admin&password=123456 ❌
 
// С HTTPS данные зашифрованы
// Зашифрованный трафик: 4f8b2c1a9e... ✅

// Man-in-the-middle атаки
// HTTP: злоумышленник может изменить контент
document.body.innerHTML = "Hacked!"; // ❌ Возможно
 
// HTTPS: защита от подмены контента ✅

// Геолокация
navigator.geolocation.getCurrentPosition(); // Только HTTPS
 
// Service Workers
navigator.serviceWorker.register('/sw.js'); // Только HTTPS
 
// Push уведомления
registration.pushManager.subscribe(); // Только HTTPS
 
// Камера и микрофон
navigator.mediaDevices.getUserMedia(); // Только HTTPS

<!-- HTTPS сайты получают преимущество в поиске -->
<link rel="canonical" href="https://example.com/page"> ✅
<link rel="canonical" href="http://example.com/page"> ❌

// HTTP/2 преимущества только с HTTPS
// - Мультиплексирование
// - Server Push
// - Сжатие заголовков
// - Бинарный протокол

<!-- HTTPS страница с HTTP ресурсами -->
<img src="http://example.com/image.jpg"> <!-- ❌ Заблокировано -->
<script src="http://cdn.com/script.js"></script> <!-- ❌ Заблокировано -->
 
<!-- Правильно -->
<img src="https://example.com/image.jpg"> <!-- ✅ -->
<script src="https://cdn.com/script.js"></script> <!-- ✅ -->

// HTTP сайты помечаются как "Не защищено"
// Chrome, Firefox, Safari показывают предупреждения
// Пользователи не доверяют таким сайтам

# Nginx конфигурация
server {
    listen 443 ssl;
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # Перенаправление HTTP на HTTPS
    return 301 https://$server_name$request_uri;
}

// Strict-Transport-Security
app.use((req, res, next) => {
  res.setHeader(
    'Strict-Transport-Security',
    'max-age=31536000; includeSubDomains'
  );
  next();
});

<meta http-equiv="Content-Security-Policy" 
      content="upgrade-insecure-requests">

// HTTP/2 с HTTPS быстрее HTTP/1.1
// - Параллельные запросы
// - Сжатие заголовков
// - Server Push

# Let's Encrypt - бесплатные SSL сертификаты
certbot --nginx -d example.com

// Проверка протокола
if (location.protocol !== 'https:') {
  location.replace('https:' + window.location.href.substring(window.location.protocol.length));
}
 
// Проверка в коде
const isSecure = window.location.protocol === 'https:';

<!-- Mixed content -->
<script src="http://cdn.com/jquery.js"></script>

<!-- Протокол-относительные URL -->
<script src="//cdn.com/jquery.js"></script>
<!-- Или явно HTTPS -->
<script src="https://cdn.com/jquery.js"></script>