Narzędzie do escape HTML i lista encji HTML z wyszukiwarką | We.Inc
Zamieniaj znaki HTML na encje i z powrotem w swojej przeglądarce, a potem przeszukuj 100 popularnych encji i symboli HTML. Skopiuj nazwaną encję, kod liczbowy, wartość CSS content lub escape JS jednym kliknięciem.
Escape HTML polega na zamianie znaków, które przeglądarka odczytuje jako znaczniki, na encje: & staje się &, < staje się <, a > staje się >. Wewnątrz wartości atrybutów trzeba też zamieniać cudzysłowy. Wklej tekst poniżej, aby zamienić znaki na encje lub z powrotem, albo przeszukaj tabelę symboli i skopiuj dowolną encję jako nazwę, liczbę lub wartość CSS.
Pięć znaków, które mają znaczenie
Znak
Encja
Kiedy trzeba go zamienić
&
Zawsze w tekście, gdy mógłby rozpocząć odwołanie
<
Zawsze w treści tekstowej
>
Dobra praktyka wszędzie; wymagane w kilku kontekstach
"
Wewnątrz wartości atrybutów ujętych w cudzysłów podwójny
' lub '
Wewnątrz wartości atrybutów ujętych w apostrofy
Dwukierunkowy konwerter dla całych bloków tekstu oraz lista z wyszukiwarką zawierająca symbole, po które ludzie naprawdę sięgają: cudzysłowy, myślniki, spacje, waluty, symbole matematyczne, strzałki, litery greckie i emoji. Każdy wiersz można skopiować na cztery sposoby.
Wklej tekst lub kod do pola i wybierz Escape lub Unescape. Wynik aktualizuje się podczas pisania.
Zaznacz Tryb atrybutu, gdy tekst trafi do wartości atrybutu, aby zamienić również cudzysłowy.
Zaznacz Koduj znaki spoza ASCII, jeśli plik zostanie zapisany lub wysłany w kodowaniu innym niż UTF-8; każda litera z akcentem i każdy symbol staną się odwołaniem liczbowym.
Przeszukaj tabelę według nazwy, symbolu lub grupy, a potem kliknij Nazwa, Liczba, CSS lub JS, aby skopiować daną formę.
Zamieniaj znaki w momencie wstawiania tekstu do HTML, a nie przy jego zapisywaniu. Zapisywanie tekstu z już zamienionymi znakami prowadzi później do podwójnej zamiany, takiej jak &amp;.
Frameworki takie jak React robią escape treści tekstowej za Ciebie. Ręczna zamiana jest potrzebna tylko wtedy, gdy samodzielnie budujesz ciągi HTML.
Twarda spacja ( ) utrzymuje dwa słowa w tej samej linii, na przykład liczbę i jej jednostkę. Nie używaj ich serii do układu strony; zamiast tego użyj marginesów CSS.
W CSS właściwość content przyjmuje ukośnik wsteczny i kod szesnastkowy, więc strzałka w prawo to content: "\2192". Dodaj spację po kodzie, jeśli następny znak jest cyfrą szesnastkową.
Czy nadal potrzebuję encji, jeśli moja strona jest w UTF-8?
Tylko dla znaków, które mają znaczenie w znacznikach: &, < oraz, wewnątrz atrybutów, użytego cudzysłowu. Na stronie w UTF-8 możesz wpisywać symbole takie jak €, é czy → bezpośrednio. Encje dla nich są opcjonalne i przydają się głównie wtedy, gdy edytor lub system pocztowy psuje tekst spoza ASCII.
Czy ' to poprawny HTML?
Tak, w HTML5. Brakowało jej w HTML 4, dlatego starszy kod używa zamiast niej '. Obie działają w każdej aktualnej przeglądarce, a opcja escape na tej stronie zwraca ' dla najszerszej zgodności.
Czy escape HTML wystarczy, aby zatrzymać XSS?
Powstrzymuje wstrzyknięty tekst przed stawaniem się znacznikami w zwykłej treści elementów i atrybutach w cudzysłowie. Nie sprawia jednak, że wartość jest bezpieczna wewnątrz bloku script, inline handlera zdarzeń, atrybutu style lub adresu URL, takiego jak href, gdzie każde z nich wymaga własnego kodowania lub walidacji. Korzystaj z wbudowanego escape swojego frameworka i w miarę możliwości unikaj budowania HTML z ciągów znaków.
Czy mój tekst jest gdzieś wysyłany?
Nie. Zamiana na encje i z powrotem działa w Twojej przeglądarce, a nic, co wkleisz, nie opuszcza strony.
Po co przeglądarkom w ogóle encje
Parser HTML odczytuje < jako początek znacznika, a & jako początek odwołania do znaku. Jeśli nazwa produktu lub przykład kodu zawiera te znaki, przeglądarka może ukryć część tekstu, połączyć go z następnym znacznikiem lub, w najgorszym przypadku, wykonać wstrzyknięte znaczniki. Zamiana na encje mówi parserowi, aby pokazał znak, zamiast na niego reagować.
Ogólna zasada: zamieniaj &, < i > w tekście, a dodatkowo znak cudzysłowu wewnątrz wartości atrybutów. Cała reszta to kwestia wygody lub kodowania.
Encje w CSS i JavaScript
Encje HTML działają tylko w HTML. W arkuszu stylów znak zapisuje się jako ukośnik wsteczny i jego kod szesnastkowy, dlatego tabela zawiera kolumnę CSS dla ikon w pseudoelementach i własnych punktorów. W ciągach JavaScript odpowiednikiem jest \u z czterema cyframi szesnastkowymi albo \u{...} dla znaków powyżej U+FFFF, takich jak emoji.
Jeśli ustawiasz tekst przez textContent w JavaScript, nigdy nie zamieniaj go wcześniej na encje: przeglądarka już traktuje go jako zwykły tekst, a zamiana sprawiłaby, że encja zostanie pokazana dosłownie.