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 &amp;, &eacute; i &#x1F680;, z powrotem na zwykły tekst.

Jak z tego korzystać

  1. Wybierz Koduj, aby zakodować tekst dla HTML, lub Dekoduj, aby zamienić encje z powrotem na znaki.
  2. Wklej swój tekst.
  3. Opcjonalnie koduj każdy znak spoza ASCII jako encję numeryczną.
  4. 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ę &nbsp; od zwykłej spacji?
&nbsp; 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 &nbsp;.
Używać &apos; czy &#39; dla apostrofu?
Oba działają w HTML5 i XML, ale &apos; nie było częścią HTML 4, więc starsze parsery i niektóre klienty poczty go nie rozpoznają. &#39; 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ę &amp;. 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. &amp; dla & albo &copy; dla ©. Encje numeryczne używają punktu kodowego Unicode, dziesiętnie, jak &#169;, albo szesnastkowo, jak &#xA9;. 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. &#x1F680; 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 &lt; zamieni się w &amp;lt;. Właśnie to robi to narzędzie w trybie Koduj, zapisując apostrof jako &#39;. Użyj trybu Dekoduj, aby sprawdzić, co naprawdę zawiera ciąg z bazy danych lub API.

Dlaczego na stronie widzę &amp;amp;? Jak naprawić podwójne escapowanie

Jeśli strona pokazuje &amp; albo &quot; 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 &amp;, drugie zamienia to w &amp;amp;, a przeglądarka wyświetla to jako &amp;. 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.

ZnakEncja nazwanaEncja numeryczna
&&amp;&#38;
<&lt;&#60;
>&gt;&#62;
"&quot;&#34;
'&apos;&#39;
twarda spacja&nbsp;&#160;
©&copy;&#169;
®&reg;&#174;
™&trade;&#8482;
€&euro;&#8364;
£&pound;&#163;
°&deg;&#176;
×&times;&#215;
÷&divide;&#247;
–&ndash;&#8211;
—&mdash;&#8212;
…&hellip;&#8230;
«&laquo;&#171;
»&raquo;&#187;
→&rarr;&#8594;
←&larr;&#8592;
✓&check;&#10003;

Coś nie działa albo wynik wygląda na błędny? Zgłoś problem z tym narzędziem