Все здавалося нормально, поки не протестувала свій сайт на securityheaders.com і не побачила рейтинг D. Жодних попереджень. Жодних помилок. Лише тиха вразливість, про яку навіть не підозрювала.
А якби це був сайт клієнта?
Як розробниця, я не могла залишити це без уваги. Бо безпека сайту — це довіра. А довіра — це основа будь-якого цифрового продукту. Відвідувач повинен відчувати захищеність з першої секунди. Безпека сайту — частина твого професійного іміджу.
До речі: ще одна обовʼязкова перевірка — це SSL Labs. Якщо ваш сайт не має коректного SSL-сертифіката, або він налаштований некоректно, браузер попередить користувача. Протестуйте свій домен і переконайтесь, що все працює через HTTPS і з надійним шифруванням.
Що зробила
Додала необхідні HTTP-заголовки безпеки в проєкт на Next.js:
1Content-Security-Policy
2
3Permissions-Policy
4
5Strict-Transport-Security
6
7Referrer-Policy
8
9X-Content-Type-Options
10
11X-Frame-OptionsРеалізувала це в middleware через NextResponse, crypto та nonce. Завдяки цьому мені вдалося додати CSP без 'unsafe-inline' і залишити аналітику Google функціональною.
Що змінилось
Рейтинг A+ на securityheaders.com і позитивна перевірка в CSP Evaluator. Браузер довіряє сайту. І я теж.
Як налаштувати у себе
- Протестуйте свій сайт на securityheaders.com
- Перевірте CSP на CSP Evaluator
- Обов’язково перевірте SSL через SSL Labs
- Додайте заголовки в middleware Next.js
- Перевірте знову — і отримайте A+
Я створюю сайти, які не тільки швидкі та красиві. Вони ще й захищені, доступні, SEO-оптимізовані та надійні. Якщо сайт — це обличчя вашого бренду, він має викликати довіру з першого запиту.