Основні моменти для безпеки HTML і CSS

Якщо ви розробник і пишете на HTML/CSS, вам потрібно знати основні моменти, які стосуються безпеки. Хтось може сказати, що HTML і CSS не можуть бути об’єктом атаки зловмисників, але з розвитком веб-технологій у них для атаки з’являються все більше можливостей. В сьогоднішній статті ми розглянемо найважливіші моменти, на які слід звернути увагу кожному розробнику. Вони допоможуть слідувати кращим методикам безпеки та уникнути вразливостей.

 

Кращі практики для безпеки

Ретельно перевіряйте залежності, використовувані в вашому додатку

Сторонні пакети є частиною стандартної екосистеми розробки. Але не забувайте, що вони містять код, який ми можемо не контролювати. Не покладайтеся лише на кількість завантажень і популярність, бажано перевіряти вихідний код, щоб переконатися, що нічого шкідливого там ховається. Ви також можете запобігти завантаженню ненадійного контенту, аутентифікуючи контент за допомогою криптографічного хеша, що представляє дані, які ви очікуєте завантажити.

Детальніше: https://github.com/dxa4481/cssInjection

 

Виконуйте не тільки локальну перевірку

Браузерна перевірка користувацького вводу (в тезі <input>) стає все більш потужною, а в HTML є деякі механізми і властивості, які можуть бути дуже корисні для створення першого базового рівня перевірки. Але ви не можете покладатися тільки на перевірку браузером користувацького вводу. Вам також потрібна перевірка і на стороні сервера для чутливих дій (аутентифікація, очищення, валідація та подібне).

Також ніколи не довіряйте даним користувача. Це, мабуть, найважливіша річ, яку ви можете зробити, щоб запобігти безлічі атак з використанням вразливостей HTML/CSS. Слабке або відсутнє очищення вводу може зробити ваш додаток вразливим для XSS ін’єкцій. Якщо ви використовуєте для користувацьке введення для генерації HTML, JSON, CSS і т.д., використовуйте для цього належні екрануючі функції.

 

Не використовуйте коментований код на сайті

Намагайтеся не використовувати коментарі в коді на робочому сайті. Досить просто переглянути такий код за допомогою інспектора в браузері. Небезпека тут полягає в тому, що закоментований контент може містити конфіденційну інформацію.

 

Використовуйте політику безпеки контенту (CSP)

Кожен скрипт або віджет, який ви вставляєте на свій сайт, є об’єктом атаки. Ви можете використовувати Політику безпеки контенту (CSP), щоб захистити свій додаток від потенційних атак, визначивши ресурси, які ви дозволяєте/забороняєте завантажувати. Ви можете використовувати nonce, щоб перевизначити обмеження в директивах для старого коду.

Детальніше: https://developer.mozilla.org/ru/docs/Web/HTTP/CSP

 

Будьте в курсі останніх новин про безпеку HTML

Інтернет-екосистема розвивається швидко, і щодня з’являються нові функції та поліпшення безпеки. Настійно рекомендується бути в курсі останніх новин, щоб забезпечити безпеку вашого додатку.

 

Безпечний HTML

Використовуйте тег rel="noopener noreferrer" для зовнішніх посилань

Коли ви натискаєте на посилання з атрибутом target="_ blank", нова вкладка/вікно матиме доступ до об’єкта window.opener, який вказує на об’єкт window першої сторінки та який може бути змінений. Щоб запобігти цьому, додайте атрибут rel="noopener", щоб уникнути передачі об’єкта window в нове вікно. Атрибут rel="noreferrer" використовувався в більш старих браузерах, і виконував ту ж функцію. Атрибути вказують на те, що при переході по посиланню не повинно бути витоку інформації про реферера (джерело).

Детальніше: https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer

 

Не використовуйте статичні ідентифікатори (ID) в своїх формах

Уникайте використання атрибутів “id” в формах (<form>).

Використання ідентифікаторів може викликати проблеми зі старими браузерами. Не рекомендується використовувати ідентифікатори в формах через небезпеку XSS (Cross-Site Scripting – «міжсайтовий скриптинг»).

Детальніше: https://html5sec.org/#1

 

Розміщуйте фрейми iframe в пісочниці

Плаваючі фрейми тега iframe досить популярні і потрібні для багатьох віджетів, які поставляються сторонніми розробниками. Щоб переконатися, що вони не можуть зробити нічого шкідливого, рекомендується встановити для них обмеження. Намагайтеся завжди використовувати атрибут пісочниці (sandbox) або додаткові прапорці, такі як allow-forms, allow-popups і т.д.

Детальніше: https://web.dev/articles/sandboxed-iframes

 

Безпечний CSS

Видаліть невикористовувані CSS стилі

Вихідний код може іноді приховувати корисні поради або, що ще гірше, конфіденційні функції або дані. Ми часто думаємо про видалення контенту з HTML, але не потрібно забувати і про CSS. Тут ви знайдете опис інструменту для очищення непотрібних стилів.

 

Не приховуйте конфіденційний контент за допомогою CSS

Є кілька способів приховати контент в CSS. За допомогою властивостей display, opacity, visibility і transform ви легко зможете візуально приховати вміст своєї сторінки.

Але будьте обережні з контентом, який ви приховуєте. Ви повинні переконатися, що він не містить конфіденційних даних або дій.

 

Не покладайтеся лише на властивість pointer-events

Властивість pointer-events дозволяє вам вирішити, який елемент може бути метою подій миші. Зазвичай покажчики-події встановлюються в pointer-events: none, щоб відключити поведінку елемента. Але в разі чутливих дій (наприклад, відправка форми і т.д.), блокування дій повинна бути реалізована на стороні сервера.

Детальніше: https://developer.mozilla.org/ru/docs/Web/CSS/pointer-events

 

Перевірте свій код за допомогою валідатора

Перевірте ваш HTML/CSS код за допомогою валідатора. Ви також можете використовувати такі інструменти, як Lighthouse, які порекомендують вам інші передові практики розробки.

Детальніше:

https://developers.google.com/web/tools/lighthouse/

https://jigsaw.w3.org/css-validator/

https://validator.w3.org/

 

На сьогодні все. Дякуємо, що читаєте нас!