Kodowanie i dekodowanie encji HTML
Koduj tekst dla HTML i zamieniaj encje z powrotem na tekst.
O tym narzędziu
Koduj <, >, &, cudzysłowy i opcjonalnie każdy znak spoza ASCII, aby tekst można było bezpiecznie umieścić w HTML, albo dekoduj encje nazwane i numeryczne, takie jak &, é i 🚀, z powrotem na zwykły tekst.
Jak z tego korzystać
- Wybierz Koduj, aby zakodować tekst dla HTML, lub Dekoduj, aby zamienić encje z powrotem na znaki.
- Wklej swój tekst.
- Opcjonalnie koduj każdy znak spoza ASCII jako encję numeryczną.
- Skopiuj wynik.
Pytania
- Które znaki trzeba escapować w HTML?
- & i < zawsze; > dla bezpieczeństwa; a " lub ' wewnątrz wartości atrybutów. Zakodowanie tych pięciu znaków wystarczy, by bezpiecznie wyświetlić tekst użytkownika w HTML.
- Czy escapowanie chroni przed XSS?
- Escapowanie danych wyjściowych odpowiednio do kontekstu to podstawowa ochrona tekstu i atrybutów HTML. Nie wystarcza jednak wewnątrz znaczników script, atrybutów obsługi zdarzeń ani URL-i, które wymagają własnego kodowania.
- Czy muszę kodować znaki diakrytyczne?
- Nie, jeśli strona jest serwowana w UTF-8, a tak jest w niemal każdej nowoczesnej stronie. Kodowanie wszystkich znaków spoza ASCII przydaje się tylko w systemach, które nie obsługują UTF-8.
- Czym różni się od zwykłej spacji?
- to twarda spacja, U+00A0. Przeglądarka nie złamie przy niej linii i, w przeciwieństwie do zwykłych spacji, nie scali kilku takich spacji w jedną. Używaj jej, aby trzymać razem wartości takie jak „10 km”. Do układu i odstępów używaj CSS zamiast ciągów .
- Używać ' czy ' dla apostrofu?
- Oba działają w HTML5 i XML, ale ' nie było częścią HTML 4, więc starsze parsery i niektóre klienty poczty go nie rozpoznają. ' działa wszędzie, dlatego ten koder go używa. Wewnątrz atrybutu w podwójnych cudzysłowach w ogóle nie musisz escapować apostrofu.
- Czym różni się escapowanie HTML od kodowania URL?
- Escapowanie HTML sprawia, że tekst jest bezpieczny wewnątrz HTML; kodowanie URL sprawia, że tekst jest bezpieczny wewnątrz URL-a. Link w atrybucie href potrzebuje obu: najpierw zakoduj procentowo każdą wartość zapytania, potem zescapuj cały URL dla HTML, tak by każdy & między parametrami stał się &. Krok kodowania procentowego obsłuży narzędzie Kodowanie, dekodowanie i analiza URL.
Co to są encje HTML?
Encja HTML to krótki fragment tekstu, który oznacza znak. Zaczyna się od & i kończy średnikiem. Encje nazwane używają słowa, np. & dla & albo © dla ©. Encje numeryczne używają punktu kodowego Unicode, dziesiętnie, jak ©, albo szesnastkowo, jak ©. Przeglądarka zastępuje je prawdziwymi znakami podczas renderowania strony, więc sam kod może pozostać czystym ASCII.
Encje rozwiązują dwa problemy. Po pierwsze, pozwalają pokazać znaki, które HTML odczytałby jako znaczniki: dosłowny < otwiera tag, a samotny & rozpoczyna encję. Po drugie, pozwalają zapisać znaki, z którymi nie radzi sobie Twoja klawiatura lub kodowanie pliku. HTML5 definiuje ponad 2000 encji nazwanych, a każdy znak Unicode, w tym emoji, np. 🚀 dla 🚀, można zapisać jako encję numeryczną.
Jak escapować HTML w JavaScripcie?
W przeglądarce najbezpieczniej jest w ogóle nie budować ciągów HTML z tekstu użytkownika. Ustaw element.textContent zamiast innerHTML, a przeglądarka potraktuje wartość jako tekst. React, Vue, Svelte i Angular też domyślnie escapują interpolowane wartości. Ryzyko wraca w chwili, gdy użyjesz innerHTML, dangerouslySetInnerHTML albo v-html z danymi, których nie kontrolujesz – i właśnie tam zaczyna się większość błędów XSS w nowoczesnych aplikacjach.
Gdy naprawdę potrzebujesz zescapowanego ciągu, np. do szablonu albo treści e-maila, zamień pięć znaków specjalnych: najpierw ampersand, potem <, >, podwójny cudzysłów i apostrof. Escapowanie & na początku ma znaczenie, bo inaczej < zamieni się w &lt;. Właśnie to robi to narzędzie w trybie Koduj, zapisując apostrof jako '. Użyj trybu Dekoduj, aby sprawdzić, co naprawdę zawiera ciąg z bazy danych lub API.
Dlaczego na stronie widzę &amp;? Jak naprawić podwójne escapowanie
Jeśli strona pokazuje & albo " jako dosłowny tekst, ciąg został zescapowany dwa razy. Zwykle wartość zescapowano przed zapisaniem, a szablon zescapował ją ponownie przy wyświetlaniu. Pierwsze przejście zamienia & w &, drugie zamienia to w &amp;, a przeglądarka wyświetla to jako &. To samo dzieje się z kanałami RSS, polami CMS i API JSON, które escapują HTML za Ciebie.
Rozwiązaniem jest escapowanie raz, w momencie zapisu do HTML, i przechowywanie surowego tekstu wszędzie indziej. Aby wyczyścić istniejące dane, wklej je w trybie Dekoduj: każde przejście usuwa jedną warstwę, więc jeśli encje zostaną, zdekoduj jeszcze raz. Dekodowanie korzysta z parsera przeglądarki na elemencie textarea, który odczytuje encje bez uruchamiania tagów i skryptów. Aby porównać wersje przed i po, użyj narzędzia Porównywarka tekstów.
Najczęstsze encje HTML
Znaki, które trzeba kodować w HTML, oraz znaki typograficzne, których szuka się najczęściej.
| Znak | Encja nazwana | Encja numeryczna |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| twarda spacja | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
Coś nie działa albo wynik wygląda na błędny? Zgłoś problem z tym narzędziem