HTML – kodowanie/odkodowywanie

Obsługuje escapowanie i unescapowanie encji HTML, obsługuje znaki specjalne i tagi. Automatycznie wykrywa formaty encji nazwanych i liczbowych, zapobiega atakom XSS, odpowiednie do wyświetlania danych wejściowych użytkownika, przykładów kodu i bezpiecznego przetwarzania treści.

Instrukcja użycia

🚀 Szybki start

Wpisz w pole tekstowe HTML lub tekst zawierający encje.
Wybierz tryb „Koduj” lub „Dekoduj”.
Kliknij odpowiedni przycisk, aby rozpocząć konwersję; wynik będzie widoczny w tym samym polu.
Kliknij „Kopiuj”, aby przenieść wynik do kodu lub do prezentacji.

📌 Typowe scenariusze

Komentarze użytkowników: koduj treść komentarzy, aby zapobiec atakom XSS.
Artykuły/blog: bezpieczne wyświetlanie przykładów kodu HTML w treści.
Posty na forum: bezpieczna prezentacja treści generowanej przez użytkowników.
Wiadomości na czacie: zapobieganie rozprzestrzenianiu się złośliwego kodu przez funkcje czatu.
Dane z formularzy: przetwarzanie i wyświetlanie danych przesłanych w formularzach.
Prezentacja kodu: wyświetlanie fragmentów HTML/JavaScript na stronie.

🎛️ Zasady kodowania i encje

Typowe znaki do kodowania: < > & " ' (ukośnik / zwykle nie jest wymagany – zależy od kontekstu).
Jak zapisać: < → <, > → >, & → &, " → ", ' → '
Cudzysłowy w atrybutach: zamień " na " (lub "), aby chronić wartości atrybutów.
Prezentacja tagów: jeśli chcesz pokazać tekst literalny <script>, użyj <script>.
Obsługa znaczników: zapisz <div> jako <div>, aby przeglądarka nie interpretowała tego jako HTML.

🧭 Wskazówki użycia

Kontekst: dobierz odpowiednią strategię kodowania w zależności od miejsca wstrzyknięcia (HTML treść, atrybuty, JS, CSS).
Obsługa po stronie serwera: kluczowe operacje bezpieczeństwa powinny odbywać się na serwerze.
Podwójna weryfikacja: po zakodowaniu sprawdź wynik, aby upewnić się, że nic nie zostało pominięte.
Korzystaj z bibliotek: w środowiskach produkcyjnych używaj sprawdzonych bibliotek do kodowania/oczyszczania zamiast ręcznych rozwiązań.
Podgląd: po zakodowaniu możesz w konsoli przeglądarki sprawdzić, jak wygląda wynikowe renderowanie.

⚠️ Ograniczenia i kompatybilność

To narzędzie nie jest pełnym sanitizerem: nie usuwa skryptów/zdarzeń/niebezpiecznych protokołów; do ochrony XSS konieczne jest dodatkowe „oczyszczanie” treści (whitelist).
Niewystarczająca ochrona: samo kodowanie nie wystarcza, by powstrzymać wszystkie formy XSS – konieczne są dodatkowe mechanizmy.
Zależność od kontekstu: różne miejsca wyjścia wymagają różnych zasad kodowania (treść HTML, atrybuty, JavaScript, CSS).
Duże bloki tekstu: mogą spowodować wolniejsze działanie lub zawieszenie przeglądarki, zaleca się podział na mniejsze części.

🔒 Prywatność i bezpieczeństwo

Całe przetwarzanie odbywa się w Twojej przeglądarce; dane nie opuszczają Twojego urządzenia.

❓ Najczęstsze pytania

Czym jest atak XSS?

XSS (cross‑site scripting) to atak, w którym napastnik wstrzykuje złośliwy skrypt do strony, aby kraść dane użytkownika lub wykonywać nieautoryzowane działania. HTML‑escaping jest podstawową linią obrony przed XSS.

Kiedy trzeba stosować HTML‑escape?

Zawsze, gdy wyświetlasz treść pochodzącą od użytkownika: komentarze, formularze, treść z zewnętrznych źródeł. Jeśli istnieje szansa, że tekst zawiera znaczniki HTML, powinien zostać zakodowany.

Jaka jest różnica między < a <?

Obie formy reprezentują znak < (mniejszości). < to encja nazwana (lt = less‑than), a </< to encje numeryczne/szesnastkowe. W nowoczesnym HTML działają tak samo: dla czytelności preferuj <, a w sytuacjach, gdzie nazwy nie są wspierane albo trzeba kodować dowolne znaki/między językami znaczników – użyj form numerycznych. Pamiętaj o średniku na końcu encji (np. <); jego brak może spowodować błędną interpretację z sąsiednimi znakami.

Czy samo kodowanie HTML wystarczy, aby zablokować każdy JavaScript?

Nie. HTML‑escape działa tylko w kontekście HTML. W atrybutach, JS, CSS czy URL potrzebne są inne strategie i zasady kodowania.

Dlaczego widzę czasem ciągi w stylu &amp;lt;?

To efekt podwójnego kodowania. Najpierw < zamienia się w <, a potem & w &amp;, co daje &amp;lt;. Należy unikać wielokrotnego kodowania tej samej treści.

Jak bezpiecznie zezwolić na część znaczników HTML?

Do tego służy „sanitization”, czyli oczyszczanie z wykorzystaniem listy dozwolonych tagów/atrybutów i protokołów. Najczęściej dopuszcza się jedynie p/br/ul/ol/li/a/strong/em/code/pre/blockquote/h1–h3; dla a zwykle tylko href/title/target z protokołami http/https/mailto/tel, a dla img jedynie src/alt. Z zasady usuwa się style i wszystkie atrybuty on*. W praktyce warto używać bibliotek pokroju DOMPurify/sanitize-html i wykonywać oczyszczanie po stronie serwera; nigdy nie wstrzykuj niesanitowanych danych do innerHTML/dangerouslySetInnerHTML, a do czystego tekstu korzystaj z textContent.