Как невалидность сертификата визуально отобразится для пользователя?

Визуализация проблем с SSL/TLS сертификатом

Когда сертификат сервера невалиден или истек, браузер показывает четкие визуальные индикаторы опасности. Это критически важно для безопасности пользователей.

Визуальные индикаторы в разных браузерах

Chrome/Edge/Brave

┌─────────────────────────────────────────┐
│ ⚠ Это соединение не защищено            │
│ example.com пытается украсть ваши данные │
│                                         │
│ Отправлять данные на этот сайт опасно.  │
│ Мошенники могут украсть данные          │
│ (пароли, сообщения, платежные данные).  │
└─────────────────────────────────────────┘

Адресная строка:
Показывает: http://example.com (красный замок со скосом и крест)

Firefox

┌──────────────────────────────────────────┐
│ example.com отклонил попытку соединения  │
│                                          │
│ Ошибка в SSL: sec_error_untrusted_issuer │
│ или другой код ошибки                    │
└──────────────────────────────────────────┘

Адресная строка:
Показывает: https://example.com (красный треугольник с восклицанием)

Адресная строка (URL bar)

HTTPS + Валидный сертификат

Показывает зеленый замок: 🔒 https://example.com
Или в некоторых браузерах: просто зеленый значок

HTTPS + Невалидный сертификат

Показывает: 🔓 (открытый замок) ⚠ https://example.com
Или красный значок с предупреждением

HTTP (без шифрования)

Показывает: 🔲 http://example.com
Иногда с надписью "Not secure"

Коды ошибок и их визуализация

// Эти ошибки приводят к блокировке соединения
const certificateErrors = [
  'ERR_CERT_AUTHORITY_INVALID',      // Издатель сертификата ненадежен
  'ERR_CERT_COMMON_NAME_INVALID',    // Имя не совпадает с доменом
  'ERR_CERT_DATE_INVALID',           // Сертификат истек или еще не активен
  'ERR_CERT_REVOKED',                // Сертификат отозван
  'SEC_ERROR_UNTRUSTED_ISSUER',      // (Firefox) Издатель не доверен
  'SEC_ERROR_EXPIRED_CERTIFICATE',   // (Firefox) Сертификат истек
];

// Браузер отобразит:
// 1. Экран с предупреждением перед загрузкой сайта
// 2. Пользователь может нажать "Advanced" и увидеть детали
// 3. Может попробовать продолжить (если это самоподписанный сертификат)

Экран предупреждения браузера

// Пример того, что видит пользователь в Chrome
const warningPage = `
  Внимание: возможна проблема безопасности
  
  Chrome заблокировал доступ к example.com
  
  Издатель сертификата неверен или сертификат самоподписан.
  
  Если вы владелец этого сайта:
  1. Получите действительный сертификат от Центра Сертификации
  2. Установите его на сервер
  3. Обновите конфигурацию веб-сервера
  
  Кнопка: "Не буду рисковать" или "Дополнительно" -> "Перейти на example.com"
`;

Как это проверить программно

// Проверка через fetch (если CORS позволяет)
fetch('https://example.com')
  .then(response => response.text())
  .catch(error => {
    // Проблема с сертификатом будет поймана здесь
    console.error('Certificate error:', error);
    // Ошибка: Failed to fetch (или аналогичная в зависимости от браузера)
  });

// В Node.js можно проверить сертификат
const https = require('https');
const options = {
  hostname: 'example.com',
  port: 443,
  path: '/',
  method: 'GET',
  rejectUnauthorized: true // Будет выброшена ошибка при невалидном сертификате
};

const req = https.request(options, (res) => {
  console.log('Certificate is valid');
});

req.on('error', (error) => {
  console.error('Certificate error:', error.message);
  // "CERT_DATE_INVALID", "CERT_UNTRUSTED" и т.д.
});

Практический пример для веб-приложения

// Обработка проблем с сертификатом в React
import { useEffect, useState } from 'react';

export function SecureApiClient() {
  const [error, setError] = useState<string | null>(null);
  const [isSecure, setIsSecure] = useState(false);

  useEffect(() => {
    // Проверяем протокол
    if (window.location.protocol === 'https:') {
      setIsSecure(true);
    } else {
      setError('Соединение не защищено. Используйте HTTPS.');
      setIsSecure(false);
    }

    // Делаем запрос к API
    fetch('/api/data')
      .catch(err => {
        // Если это ошибка сертификата
        if (err.message.includes('failed to fetch')) {
          setError('Ошибка безопасности: проблема с сертификатом сервера');
        }
      });
  }, []);

  if (!isSecure) {
    return (
      <div className="bg-red-100 border border-red-400 text-red-700 p-4">
        <p>Внимание: ваше соединение не защищено!</p>
      </div>
    );
  }

  return null;
}

Когда это может произойти

1. Истек срок действия сертификата - самая частая причина
2. Самоподписанный сертификат - на тестовых серверах
3. Несовпадение имени домена - сертификат выдан для другого домена
4. Сертификат от недоверенного издателя - не в списке браузера
5. Проблема с цепочкой сертификатов - промежуточный сертификат отсутствует

Для разработчиков

Чтобы избежать таких проблем:

# Проверить сертификат
openssl s_client -connect example.com:443 -showcerts

# Проверить срок действия
openssl x509 -in certificate.crt -text -noout

# Использовать Let's Encrypt для бесплатных сертификатов
certbot certonly --standalone -d example.com