2021년경, WP Adminify 지원 티켓이 여전히 나를 움츠리게 만드는 스크린샷과 함께 도착했습니다. 한 사용자가 사용자 정의 관리자 바닥글 텍스트를 설정했습니다. a © 그리고 그들의 에이전시에 대한 링크입니다. 그들의 화면에서 그것은 로 렌더링되었습니다 © 2021 — Bright & Co3 개의 눈에 보이는 개체,0 개의 렌더링된 문자. 범인은 저였습니다. 내 저장 루틴이 텍스트를 탈출했고,내 렌더 루틴이 다시 탈출했으며,필터 사이 어딘가에서 세 번째로 탈출했습니다. 브라우저에 충돌할 때쯤에는 그 불쌍한 앰퍼샌드가 네 번 이상 탈출한 것으로 계산했습니다.
수정에는 10분이 걸렸습니다. 탈출한 텍스트 모양 때문에 두 번의 저녁이 걸렸습니다 거의 오른쪽. 당신은 훑어 © 데이터베이스 덤프에서 뇌는 이를 자동 수정합니다 ©. 브라우저가 실제로 각 계층에서 렌더링하는 것을 확인하기 위해 스크래치 HTML 파일에 문자열을 계속해서 붙여넣었습니다. That's 비참한 워크플로,it's HTML 엔터티 인코더 디코더가 Toolz.dev 에 내장한 첫 번째 도구 중 하나인 이유를 정확히 알 수 있습니다.
같은 동전의 뒷면은 더 무섭다. 그 티켓 몇 달 전에,내 자신의 플러그인의 코드 검토 중에,나는없이 관리자 통지에 사용자 입력을 에코 설정 필드를 발견했다 esc_html(). 그 분야에 접근할 수 있는 사람은 누구나 저장했을 수 있습니다 <script> 그리고 페이지를 로드한 모든 관리자에 대해 실행되도록 했습니다. 저장 XSS,내 코드에 하나의 누락된 함수 호출이 있습니다. 아무도 그것을 악용하지 않았습니다. 운이 좋았습니다. 그러나 탈출에 대한 생각이 영구적으로 바뀌었습니다: it's 서식 지정 잡일이 아니라 it's "text"와 "code." 사이의 경계입니다
그래서 이 가이드는 양방향을 다룹니다. 인코딩,그래서 신뢰할 수 없는 텍스트는 텍스트로 유지됩니다. 디코딩,그래서 당신은 어떤 지나치게 열성적인 파이프라인 망가진 것을 읽을 수 있습니다. 그리고 충분한 이론 - 이름 vs 숫자 참조,실제로 중요한 다섯 문자,왜 연산의 순서가 이중 이스케이프를 일으키는 지 - 추측하는 대신 이 물건을 디버깅할 수 있습니다.
TL;DR: 텍스트를 에 붙여넣으세요 Toolz.dev HTML 엔터티 인코더/디코더 원시 문자와 엔터티를 어느 방향으로든 변환하려면 - 이름,소수점 또는 16 진수. 100% 클라이언트 측에서 실행되므로 사용자 콘텐츠와 PII 는 브라우저를 떠나지 않습니다. 경험 법칙: 항상 5 가지 특수 항목에서 벗어나십시오 (
& < > " ') 신뢰할 수 없는 입력에서 인코딩합니다&먼저 또는 당신'll 이중 탈출.
주요 특징
두 방향 모두에서 인코딩 및 디코딩합니다
돌아야 할 시간의 절반 <script> 안으로 <script> 그래서 블로그 포스트에 텍스트로 표시됩니다. 나머지 절반 I & # 39;m 반대 방향으로 가고 - 스크랩을 돌립니다 &#8217;s 다시 읽을 수 있는 아포스트로피로. 도구는 둘 다 처리합니다. 텍스트 붙여넣기,인코드 선택 또는 디코딩 완료. 모드 헌팅 없음,각 방향에 대한 별도의 도구 없음. you've 만 디코딩하는 도구를 사용하고,문서에 대한 코드 샘플을 인코딩하기 위해 두 번째 탭을 여는 자신을 찾을 때까지는 사소한 것처럼 들립니다. 라운드 트립은 또한 훌륭한 온전한 검사입니다: 인코딩,디코딩 및 원래 문자열을 다시 얻는 것을 확인합니다. don't 인 경우 입력의 무언가가 이미 부분적으로 이스케이프되었습니다 - 그 자체가 유용한 정보입니다.
명명된 엔터티: &amp;, &lt;, &copy; 및 친구
명명된 문자 참조는 사람이 읽을 수 있는 참조입니다 & &의 경우;, < <의 경우;, © ©의 경우, — em 대시를 위해. 도구는 유명한 5 개뿐만 아니라 147 개의 이름이 큐레이팅 된 테이블을 가지고 있습니다: 타이포그래피 ( , …, ’, “), 통화,수학과 화살표,그리스 문자,전체 라틴어-1 악센트 범위,카드 슈트와 같은 몇 가지 확률. 그 범위는 실제 콘텐츠가 실제로 필요한 것입니다 - WordPress 가 방출합니다 , …, 그리고 ’ wptexturize를 통해 지속적으로 12개의 이름만 아는 디코더를 사용하면 텍스트의 절반이 해결되지 않은 참조로 가득 차게 됩니다.
147이 무엇인지 명확히 하십시오: the WHATWG HTML Standard 는 2,200 개가 넘는 명명된 참조를 정의하므로,이것은 완전한 테이블이 아닌 실용적인 부분 집합입니다. 만약 이름이 그 안에 isn't 이 있다면,디코딩은 추측보다는 참조를 그대로 둡니다 - &bogus; 로 나옵니다 &bogus;. 인코딩은 보완적인 동작을 가지고 있으며,it's 는 더 유용한 절반: 모든 문자 없이 테이블의 이름은 자동으로 십진수 참조로 돌아가므로 아무 것도 자동으로 삭제되지 않습니다. 이모티콘은 다음과 같이 인코딩됩니다 🌍, 중국어 텍스트는 다음과 같습니다 你好. 그들이 존재하는 곳의 이름, 다른 모든 곳의 숫자.
알만한 가치가있는 브라우저 동작에서 한 가지 더 차이점: 디코더는 대소문자를 구분하고 세미콜론이 필요합니다. 브라우저가 해결됩니다 © 그리고 심지어 벌거벗은 사람도요 & 레거시 호환성 규칙 덕분에 일부 구문 분석 컨텍스트에서 후행 세미콜론이 없으면; 이 디코더는 어느 것도 해결하지 못합니다. 실제로 that's fine - anything a modern tool 생성하다 는 소문자이고 종료됩니다 - 그러나 만약 you're 디코딩이 고대 CMS 에서 스크랩된 HTML 을 디코딩한다면 that's the edge you'll hit.
숫자 참조: 십진수 및 십육진수
어떤 유니코드 문자는 숫자 참조로 작성할 수 있습니다 - 소수점 처럼 — 아니면 헥스처럼요 — (둘 다 em-dash 입니다). 디코더는 두 형태를 모두 해결합니다. 이것은 표준에 이름이 없는 문자에 대한 이스케이프 해치이며,it's 형식 you'll 은 API 응답 및 RSS 피드에서 지속적으로 충족됩니다 ’ (오른쪽 작은 따옴표) 실질적으로 서명입니다. 육각 참조는 유니코드 코드 포인트에 직접 매핑 - U + 2014 입니다 —- 이것이 바로 I'm이 유니코드 차트에 대해 상호 참조할 때 이를 선호하는 이유입니다.
정직한 제한, 이후 you'll 도구를 사용 하 여 분 이내에 그것을 통지: 숫자 인코딩하다 모드는 소수만 내보냅니다. There's no hex-output option. 디코딩 — 잘 작동합니다; 인코더에 does't 를 생성하도록 요청합니다. 두 가지 형태는 의미상 모든 브라우저와 동일하므로 기능적으로 비용이 들지 않지만 코드베이스가 16 진수로 표준화되면 you'll 은 손으로 변환됩니다. 내 목록에있는 It's. 범위를 벗어난 참조는 망가지기보다는 잡히게됩니다 - � 는 유니코드 최대값보다 높으며 대체 문자 대신 명시적 오류를 반환합니다.
전체 유니코드 범위
이모티콘,CJK 문자,아랍어, 발음 구별 부호를 결합,작품. 코드 포인트가있는 경우 도구는 엔터티로 표현하고 다시 해결할 수 있습니다. 이것은 you'd 현지화 작업을 위해 생각하는 것보다 더 중요합니다 - I've debugged German umlauts arriving as ü 한 번역 공급업체에서 원시 UTF-8로 제공됩니다 ü 다른 것에서,같은 import 파일에서. Latin-1 밖에서 질식하는 도구는 그것에 쓸모가 없습니다. U+FFFF (emoji live up there) 위의 문자는 망가진 대리 쌍이 아닌 단일 코드 포인트로 올바르게 처리됩니다.
이중 탈출 텍스트를 풀었습니다
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X &amp; 문제. 파이프라인의 두 레이어가 모두 빠져나갈 때, & 된다 &amp;- 그리고 세 개의 레이어가 제공됩니다 &amp;amp;. 한 번 해독하면 정확히 한 층이 벗겨 지므로 디코더를 반복적으로 실행하고 양파가 풀리는 것을 볼 수 있습니다: &amp;amp; → &amp; → & → &니다. 패스를 계산하는 것은 스택의 얼마나 많은 레이어가 탈출하고 있는지 알려줍니다. 이는 정확히 그 네 번 탈출 WP 중에 필요한 진단입니다. 푸터 버그를 관리합니다. 레이어 당 하나의 디코드. It's 내가 알고있는 가장 빠른 방법은 파이프 라인에서 여분의 탈출이 일어나는 위치를 현지화합니다.
문자 수가 포함된 병렬 창
왼쪽에 입력,오른쪽에 출력,문자 수는 둘 다 위에 있습니다. 그 수 쌍은 소리보다 더 많은 작업을 수행합니다: 이스케이프는 확장 작업이므로 40 문자를 인코딩하고 44 를 다시 가져 오면 정확히 하나의 특수 문자가 터치되었습니다. I & #39;m 이 템플릿이 이미 무언가를 이스케이프했는지 여부를 감사 할 때 델타는 I & #39;ve 출력의 단일 문자를 읽기 전에 나에게 알려줍니다. 인코딩,디코드, 스왑 및 지우기는 버튼입니다 - there & #39;s live-as-you-type 변환이 없으며 I & #39;ll 은 인정하며 고의적 인 절충안입니다 나는 때때로 후회합니다. 명시 적 행동은 항상 텍스트 you & #39;re 를 생성 한 방향을 알고 있음을 의미하며,모호함이 전체 문제라는 탈출 버그와 함께. 그러나 탐색적 찌르기의 경우 키 입력 구동 버전이 진정으로 더 좋을 것입니다.
100% 클라이언트 측 - 아무것도 업로드되지 않았습니다
모든 것은 브라우저에서 실행됩니다. 요청도 없고 서버도 없고 로그도 없습니다. This isn't a nice-to-have: the text you're escaping is often exactly the text you should't paste into random websites - 실명이 있는 사용자 생성 댓글,고객 주소가 있는 이메일 템플릿,지원 티켓 콘텐츠. I've written before about why this matters in 당사의 데이터 개인 정보 보호 가이드; 짧은 버전은 입력을 업로드하는 변환기가 귀하가 조사한 적이 없는 데이터 프로세서라는 것입니다. 그만큼 Toolz.dev 엔터티 도구 로드되면 오프라인으로 작동합니다. 비행기 모드는 유효한 테스트입니다 - 시도해보십시오.
HTML 엔터티 인코더 및 디코더를 사용하는 방법
1단계: 도구를 열고 텍스트를 붙여넣습니다
로 이동 Toolz.dev/tools/html-entities 그리고 입력 붙여넣기 - 코드 조각,엉망 RSS 발췌,이메일 템플릿 조각,무엇이든. There's no size ceiling worth correving about for normal use; I've pasted entire rendered plugin changelogs in. 처리가 클라이언트 측이므로 민감한 내용은 여기 괜찮습니다.
2단계: 인코딩 또는 디코드를 선택합니다
인코딩은 원시 문자를 엔터티로 바꿉니다(< → <) - 마크업을 텍스트로 표시할 때 사용합니다. 디코딩은 엔터티를 문자로 다시 해결합니다 (& → &) - use it when you're reading escaped content. 만약 you're 가 어떤 상태로 텍스트가 있는지 잘 모르겠다면,먼저 디코딩하고 어떤 변화가 있는지 확인하세요. 변경되지 않은 출력은 이미 평범했다는 것을 의미합니다.
3 단계: 참조 스타일 선택 (인코딩 시)
모드 드롭다운에는 정확히 세 가지 옵션이 있으며 선택은 보이는 것보다 더 중요합니다. 명명된 이름이 있는 모든 것을 인코딩하고 나머지는 십진수로 돌아갑니다. 소스와 차이점에서 읽을 수 있지만 탈출하기도 합니다 ©, —, é 그리고 다른 모든 비 ASCII 문자는 어쨌든 UTF-8 에서 you're 인 경우 출력을 부풀립니다. 숫자 순수 소수점에서도 동일한 적용 범위를 수행합니다. 특수 문자만 해당됩니다 아무것도 건드리지 않습니다 & < > " ' 그리고 당신의 악센트, em-대시, 그리고 emoji를 원시 UTF-8 로 남겨 둡니다 - 이것은 내가 실제 콘텐츠에 사용하는 것입니다, 그리고 it's 무엇과 일치하는 모드입니다 htmlspecialchars() PHP 에서 않습니다. 참고 ' 항상 로 나옵니다 ', 절대 ', 세 가지 모드 모두에서; that's는 이후 고의적입니다 ' HTML 4 에서 정의되지 않았으며 이전 이메일 클라이언트는 여전히 질식합니다.
4단계: 출력을 확인한 다음 복사합니다
Encode 또는 Decode 를 누르고 오른쪽 창을 읽습니다. 디코딩 작업의 경우,남은 부분을 구체적으로 찾습니다 & 시퀀스 - 생존자는 텍스트가 이중 이스케이프되었음을 의미하므로 Swap 및 디코딩을 다시 누르십시오. 깨끗하게 읽으면 결과를 템플릿,CMS 또는 코드에 복사하십시오. 반복 작업의 경우 왕복 한 번 (인코딩 한 다음 디코딩) 손실 발생 없음을 확인합니다; 특수 문자 전용 모드를 사용하면 왕복이 정확합니다.
명명된 개체와 숫자 개체 - 그리고 실제로 중요한 5가지 문자
Let's 는 용어를 똑바로 얻습니다,왜냐하면 "HTML entity"는 느슨하게 사용되기 때문입니다. WHATWG HTML Standard - 브라우저가 실제로 HTML 을 구문 분석하는 방법을 정의하는 살아있는 사양 - 의 테이블을 지정합니다 명명된 문자 참조입니다: 2,200개 이상의 이름이 좋아요 , —, …, →는, 각각 하나나 둘개의 유니코드 코드 점에 지도로 나타내. 따로따로, 숫자 문자 참조 어떤 코드 포인트든 직접 주소 지정할 수 있습니다: decimal (—) 또는 16진수(—). 동일한 em-dash, 세 가지 철자.
Here's 내 독선적인 테이크, 워드 프레스 작업의 년 날카롭게: 그 2,200 + 이름 중 정확성과 안전성을 위해 실제로 중요한 것은 5 자뿐입니다. 다른 모든 것은 타이포그래피이며,UTF-8 페이지에서 - 2026 년에 배송해야하는 모든 페이지입니다 - 실제 문자를 입력하면됩니다. You don't need —; you need -. 중요한 다섯 가지는 HTML 에서 구문적 의미를 가진 것들입니다:
| 캐릭터 | 엔티티 | 왜 중요한가 |
|---|---|---|
& |
& |
모든 엔터티 - 이스케이프 문자 자체를 시작합니다 |
< |
< |
태그를 엽니다 |
> |
> |
태그를 닫습니다 |
" |
" |
이중 인용 속성을 구분합니다 |
' |
' |
단일 인용 속성을 구분합니다 |
마지막 행에 유의하세요: ', 아니다 '. 이름 ' 는 HTML5 에서 유효하지만, HTML4 의 was't 부분이며, 오래된 툴링 (및 오래된 이메일 클라이언트 - 나중에 더 많은 것) 은 트립 할 수 있습니다. 숫자 형식은 어디에서나 작동합니다. 이것은 혼란스러운 버그 보고서를 저장하는 일종의 현학입니다.
연산의 순서는 전체 게임이다. 인코딩할 때, & 탈출해야 첫번째. 탈출하면 < 에 < 그리고 앰퍼샌드를 탈출하세요. you'll은 자신의 출력을 변환합니다 &lt;- 축하합니다, you've double-escaped. 디코딩은 거울 이미지입니다: & 해결되어야 마지막, 또는 &lt; 된다 < 된다 < 그리고 you've under-decoded (또는 더 나쁜,의도적으로 탈출 된 텍스트에서 라이브 마크 업을 다시 도입). 거의 모든 손으로 굴린 탈출 버그 I 've reviewed - 내 자신을 포함하여 - 주문 버그입니다.
맥락이 중요하며, 여기서 탈출이 보안을 만납니다. OWASP 교차 사이트 스크립팅 방지 치트 시트는 그것에 대해 무뚝뚝합니다: HTML 엔터티 인코딩은 HTML에 대한 올바른 방어입니다 바디 그리고 속성 컨텍스트, 하지만 그렇습니다 아닙니다 javascript 문자열, URL 또는 CSS에 충분합니다. < 내부 a <script> 블록 doesn't 디코드 - 스크립트 콘텐츠 isn't 엔터티에 대해 구문 분석 - 그래서 엔터티 인코딩은 거기에 아무 쓸모가 없습니다. 각 컨텍스트는 자신의 인코더가 필요합니다: HTML 에 대한 엔터티 인코딩, \uXXXX JS 문자열에 대한 이스케이프, URL에 대한 퍼센트 인코딩(that's what our URL 인코더/디코더 를 위한 것입니다. 잘못된 컨텍스트에서 올바른 인코더를 사용하는 것은 삭제된 것처럼 보이는 코드가 악용 가능한 상태로 유지되는 고전적인 방법입니다.
PHP 측에서, 두 가지 기능을 알아보세요. htmlspecialchars() 다섯 가지 스페셜만 탈출합니다(패스 ENT_QUOTES 아니면 작은따옴표를 놓치거나 진짜 잡았다). htmlentities() 탈출하다 모든 그것은 명명된 개체를 가지고 있습니다 ü 안으로 ü. UTF-8 페이지에서, htmlentities() 는 거의 항상 잘못된 선택입니다; 그것은 출력을 부풀리고 charsets 가 잘못 선언되면 내용을 망가 뜨립니다. WordPress 는 이것을 현명하게 감싸줍니다:
echo esc_html( $footer_text ); // body context
echo '<a title="' . esc_attr( $title ) . '">'; // attribute context
esc_html() 그리고 esc_attr() 둘 다 문맥 당 선택되는 우측 깃발을 가진 5 개의 스페셜을 탈출하십시오 - 정확하게 늦게 탈출 규율 OWASP 는 규정합니다. 규칙 나는 각 부호 검토로 교련합니다: output 시간,output's 문맥에서,정확히 한 번 탈출하십시오.
어느 것이 그것을 집으로 가져 오는가: UTF-8 로, 당신은 드물게 필요 전혀 타이포그래피 문자를 위한 엔티티. 마크업-중요한 문자와 신뢰할 수 없는 입력을 위해 엔티티가 필요합니다. 다른 모든 것은 레거시 습관입니다.
일반적인 사용 사례
블로그 게시물 및 문서에 코드 조각을 표시합니다
를 포함하는 튜토리얼을 작성합니다 <script> 또는 <?php 그리고 이를 CMS 원시 항목에 붙여넣으면 브라우저가 시도합니다 처형하거나 삼키거나 표시 대신 예제. HTML 컨텍스트의 모든 코드 샘플이 필요합니다 <, >, 그리고 & 인코딩되었습니다. 저는 플러그인 문서를 위해 이 작업을 지속적으로 수행합니다. HTML, 지식 기반 기사, 관리자 UI 도움말 탭의 인라인 예제를 읽어보세요. 워크플로: 스니펫을 작성하고 다음을 통해 실행합니다 엔터티 인코더, 탈출한 버전을 안에 붙여넣습니다 <pre><code>. 삼십초, 그리고 당신의 <script> 로 표시합니다 <script> DOM 으로 사라지는 대신에. if you're building out a docs workflow 일반적으로,우리의 코딩 도구 가이드 이 주변의 나머지 도구 상자를 덮습니다.
데이터베이스 및 피드에서 이중 탈출 텍스트 정리
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X &amp; 전염병. 그것은 CMS 가 저장에 탈출,플러그인이 렌더링에 탈출,캐싱 레이어가 도움이 다시 한 번 탈출 할 때 나타납니다. 나는 한 번 wordpress.org readme 파서와 내 자신의 빌드 스크립트가 탈출하는 사람에 대해 동의하지 않는 WP Adminify changelog 를 출하했습니다 - 렌더링 된 changelog 는 23 을 볼 수있었습니다 &사용자가 나에게 이메일을 보내기 전에 S를 입력하세요. RSS 피드가 더 나쁩니다; 피드 콘텐츠는 종종 HTML에서 이스케이프됩니다 내부 XML,그래서 소비자는 일상적으로 그것을 과다하거나 과소 해독한다. 수정은 진단 해독이다: 깨진 텍스트를 붙여넣고,한 번에 하나의 패스를 해독하고,it's 가 깨끗해질 때까지 얼마나 많은 패스를 계산하는가. 그 카운트는 탈출하는 레이어의 수와 같다 - 이제 파이프라인의 몇 조각이 텍스트를 건드리고 있는지 정확히 알 수 있으며 중복된 것을 찾을 수 있다.
사용자 생성 콘텐츠를 안전하게 준비합니다
댓글,리뷰 텍스트,프로필 바이오스,지원 티켓 - 사용자가 입력한 모든 것은 신뢰할 수 없으며,PII: 실명,이메일, 주소가 자주 포함됩니다. 여기서 두 가지 우려 사항이 충돌합니다. 첫째,안전: 해당 콘텐츠는 출력에서 엔터티 인코딩되어야 합니다. 또는 you're one <img onerror=...> 멀리 저장된 XSS 에서 (내가 거의 발송한 설정 필드에 대해 물어). 둘째,개인 정보 보호: 때 you're 디버깅 왜 특정 user's 바이오 당신의 레이아웃을 깰, you're 그들의 개인 데이터를 처리-서버 측 변환기에 붙여 넣기 PII 를 제 3 자에 게 배송을 의미 합니다. Toolz.dev 도구는 로컬로 모든 것을 처리, 그래서 테스트 실제 문제 문자열 안전 샘플을 인코딩, 어떤 템플릿 검사 해야한다 생산한 것과는 다릅니다.
HTML 템플릿을 이메일로 보내세요
이메일 HTML 은 20 년 된 렌더링 엔진으로 웹 개발입니다. 일부 클라이언트는 원시 UTF-8 벌금을 처리; 다른 사람 - ESP 세트가 인코딩을 전송하는 방법에 따라 - garble 인쇄 문자를 mojibake 로. 많은 이메일 개발자가 여전히 따르는 방어 규칙: 비 ASCII 인쇄를 엔터티로 인코딩합니다 (—, ’, 해킹 간격을 위해) 그래서 와이어의 바이트는 순수한 ASCII 입니다. 그리고 기억하십시오 ' 오버 '- Outlook's 오래된 엔진은 HTML5 이름을 결코 배우지 않은 툴링입니다. 템플릿은 고객 이름과 주소로 개인화되기 때문에 이것은 다시 콘텐츠 I'd 클라이언트 측 도구를 통해서만 실행됩니다. 템플릿 크롬을 한 번 인코딩하고 병합 필드를 원시 상태로 유지하고 병합 시간에 이스케이프하십시오.
스크랩된 콘텐츠 및 API 응답을 디코딩합니다
페이지를 스크랩하거나 엉성한 API를 소비하면 you'll 익사 ’, “, &, 그리고 . 일부 API는 HTML 이스케이프가 전혀 필요하지 않은 형식인 JSON 내에서 엔터티 인코딩된 문자열을 반환하므로 다음과 같은 아티팩트를 얻을 수 있습니다 "title": "Fish & Chips". 그 데이터가 당신의 자신의 데이타베이스로 가기 전에,청결한 UTF-8 를 해독하십시오; 표준 원본을 저장하고십시오,출력에서 도주하십시오. 나는 Laravel 앱스로 내용을 가져올 때 이것을 끊임없이 명중합니다: 실체를 첫째로 해독하십시오 그럼 예쁜 인쇄를 하고 페이로드를 검사하세요 JSON 포맷터. 다른 순서로 한다는 것은 모든 아포스트로피가 7 자인 JSON 을 읽는 것을 의미합니다. 페이로드가 그 위에 base64-wrapped 되어 있다면 - 일부 웹훅 제공자는 이것을 합니다 - the Base64 변환기 외부 레이어를 처리하고 우리의 Base64 인코딩 가이드 그 래핑이 존재하는 이유를 설명합니다.
특수 문자로 콘텐츠 현지화
번역 파일은 상상할 수있는 모든 상태로 도착합니다. 한 공급 업체가 깨끗한 UTF-8 을 보냅니다 ü; 또 다른 사람이 보냅니다 ü; 세 번째가 보냅니다 ü; 가끔씩 하나의 PO 파일에 세 가지를 모두 가져옵니다. 가져오기 전에 디코드 패스를 사용하여 모든 것을 원시 UTF-8 로 정규화합니다 - 표준 저장,일관된 검색,정상적인 차이. RTL 구두점,CJK 괄호 및 선적 된 문자열의 악센트 라틴어도 동일하게 적용됩니다. 가져오기에서 디코딩하고 실제 문자를 저장하고 출력 레이어가 5 개의 특수 항목 만 빠져 나가도록하십시오. 번역가도 감사합니다: über 는 누구라도 교정해야 할 단어가 아니다.
명명 된 vs 십진수 vs 육각 vs 원시 UTF-8: 어떤 것을 사용해야합니까?
| 양식 | 예(em-dash) | 가독성 | 브라우저 지원 | 언제 사용할 것인가 |
|---|---|---|---|---|
| 명명된 엔터티 | — |
좋은 - 자기 설명 | HTML4 시대 이름에 대한 범용; HTML5 전용 이름(예 ') 오래된 툴링에 실패합니다 |
5가지 스페셜; 이메일 HTML과 같은 레거시 컨텍스트 |
| 소수점 참조 | — |
가난한 - it's a 번호 | 고대 파서를 포함한 범용 | 이름이 없는 문자; 최대 호환성 이스케이프(') |
| 육각 참조 | — |
형편없지만 유니코드 코드 포인트에 매핑됩니다 | 원격으로 현대적인 모든 것에서 보편적입니다 | 유니코드 차트나 사양을 상호 참조할 때 |
| 원시 UTF-8 | — |
완벽한 | 적절하게 선언된 UTF-8 페이지에서 보편적입니다 | 모든 인쇄 - 이것은 기본값이어야합니다 |
내 입장은 분명히: 타이포그래피용 원시 UTF-8, 5가지 스페셜용 예비 엔터티 및 신뢰할 수 없는 입력을 작성하세요. 로 가득 찬 문서 — 그리고 … 는 아무도 교정할 수 없는 문서이며,2008 년부터 charset 선언을 신뢰해온 has't 의 워크플로우를 신호합니다. 현대 스택 - WordPress,Laravel, Next.js,every database you'd choose today - are UTF-8 end to end 실제 문자를 입력합니다.
기업이 보유 수익을 얻는 곳: &, <, >, ", 그리고 ' 마크업으로 해석될 수 있는 어떤 것이든,항상 예외 없이 출력 시간에 적용됩니다. 그리고 적대적인 렌더링 환경 - 이메일 클라이언트,알 수 없는 파서가 소비하는 피드 - 숫자 참조는 편집증적이지만 정당한 선택입니다. 왜냐하면 모든 호환성 인수보다 앞선 것이기 때문입니다. 십진수와 육진수 사이에서 it's 맛; 나는 육진수를 기울이기 때문입니다 — U + 2014 와 일치하며 내 머릿속에서 기본 변환을 중지 할 수 있습니다.
자주 묻는 질문
HTML 엔티티란 무엇인가?
HTML 엔티티는 문자를 직접 쓰는 대신 문자를 나타내는 텍스트 시퀀스입니다. 앰퍼샌드로 시작하여 세미콜론으로 끝납니다. & 및 ©와 같은 명명된 참조와 유니코드 코드 지점을 가리키는 © (십진수) 또는 © (hex) 와 같은 숫자 참조가 있습니다. 브라우저는 구문 분석 중에 이를 해결하므로 < 태그를 여는 대신 보다 작은 기호로 표시됩니다. 그렇지 않으면 마크업으로 해석될 문자를 표시할 수 있도록 존재합니다.
HTML 에서 어떤 문자를 이스케이프해야 합니까?
다섯: 앰퍼샌드,보다 작음,보다 큼,큰따옴표, 작은따옴표 - &, <, >, ", 및 '로 작성됩니다. 앰퍼샌드,엔티티를 시작하기 때문에; 각도 괄호,태그를 구분하기 때문에; 따옴표는 속성 값을 구분하기 때문에. 요소 본문 텍스트에서 처음 세 개만 있으면 벗어날 수 있지만 다섯 개 모두를 어디에서나 벗어나는 것은 결코 물지 않는 습관입니다. 다른 모든 것 - 악센트,대시, 이모티콘 -은 적절하게 선언된 페이지에서 원시 UTF-8 일 수 있습니다.
<의 차이점은 무엇입니까 명명 된 엔터티로 작성 하 고 <?
브라우저가 구문 분석하면 아무것도 없습니다. 둘 다 덜 구문 분석합니다. 명명된 형식은 WHATWG 표준 및#39;s 명명된 참조 테이블의 조회입니다; < 주소 유니코드 코드 포인트 60을 직접 지정하고 <는 16진수의 동일한 코드 포인트입니다. 명명된 엔터티는 사람이 읽기 쉽습니다; 숫자가 없는 수천 개의 문자를 포함하여 모든 문자에 대해 숫자 참조가 작동합니다. 일반적인 스페셜의 경우 팀이 더 읽기 쉽다고 생각하는 항목을 선택하세요. 브라우저는 신경 쓰지 않습니다.
내 페이지에 앰퍼샌드 대신 &amp;가 표시되는 이유는 무엇입니까?
더블 이스케이프. 스택의 일부 레이어는 이미 이스케이프 된 문자열을 이스케이프하여 & amp; into & amp;amp;. 브라우저는 한 레벨을 디코딩하고 남은 부분을 표시합니다. 일반적으로 두 구성 요소 모두 이스케이프가 자신의 작업이라고 생각한다는 것을 의미합니다. 저장에 대한 CMS 와 렌더링에 대한 템플릿은 클래식 쌍입니다. 디코더에서 한 번에 한 패스씩 문자열을 디코딩합니다; 깨끗하게 읽을 때까지의 패스 수는 이스케이프되는 레이어 수와 같습니다. 그런 다음 출력 시간에 정확히 하나의 레이어를 책임지게 만듭니다.
HTML 탈출은 XSS를 막나요?
HTML 본문과 속성 컨텍스트에서,예 - 신뢰할 수 없는 입력을 엔티티 인코딩하는 핵심 방어입니다,왜냐하면 페이로드는 비활성 텍스트로 렌더링하기 때문입니다. 그러나 모든 곳에서 충분하지 않습니다. OWASP XSS Prevention Cheat Sheet 는 JavaScript 문자열,URL 및 CSS 가 각각 고유한 컨텍스트별 인코딩을 필요로 한다는 것을 명시적으로 나타냅니다; 스크립트 블록 내부의 엔티티 인코딩은 아무것도 하지 않습니다. 출력에 이스케이프,출력하는 컨텍스트에서,그 context's 인코더를 사용하여. 엔티티 인코딩은 전체 키트가 아니라 해당 키트의 하나의 도구입니다.
PHP에서 htmlspecialchars와 htmlentities의 차이점은 무엇입니까?
htmlspecialchars() 는 마크업에 중요한 문자만 이스케이프합니다 - 그리고 ENT_QUOTES를 통과해야 작은따옴표를 다룹니다. htmlentities() 는 명명된 엔티티를 가진 모든 문자를 변환하므로 악센트가 있는 문자는 uuml 참조와 같은 것이 됩니다. UTF-8 페이지에서 htmlspecialchars() 는 거의 항상 원하는 것입니다; htmlentities() 는 출력을 부풀리고 문자셋이 잘못 구성되면 mojibake를 유발합니다. WordPress 개발자는 대부분 컨텍스트당 올바른 플래그를 적용하는 esc_html() 및 esc_attr()을 사용하여 질문을 피합니다.
아포스트로피에 apos 라는 이름의 엔티티를 사용해야 하나요?
선호 '. apos 이름은 HTML5 에서 유효하지만 HTML4 의 일부가 아니었으므로 이전 파서는 - 일부 이메일 클라이언트 내부의 렌더링 엔진을 포함하여 - 그것을 인식하지 못하고 문자 그대로 표시합니다. 숫자 형식 '는 동일한 문자를 의미하며 지금까지 배송 된 모든 것에서 작동합니다. 그것은 일반적으로 탈출을위한 올바른 절충안 인 추악하지만 안전한 선택입니다. 출력이 최신 브라우저에만 도달한다는 것을 알고 있다면 apos는 괜찮습니다; 이메일 템플릿은 정확히 당신이 그것을 알 수없는 곳입니다.
온라인 엔터티 변환기에 사용자 데이터를 붙여 넣는 것이 안전합니까?
도구가 브라우저에서 텍스트를 처리하는 경우에만 가능합니다. 사용자 생성 콘텐츠 및 이메일 템플릿에는 일상적으로 이름,이메일 및 기타 PII 가 포함되어 있으며 입력을 서버에 게시하는 변환기는 아무런 합의없이 해당 데이터를 방금 받았습니다. Toolz.dev HTML Entities Encoder/Decoder 는 100% 클라이언트 측에서 실행됩니다 - 업로드,로깅이 없으며 페이지가로드되면 오프라인으로 작동합니다. 도구가 입력을 처리하는 방법을 확인할 수없는 경우 프로덕션 데이터를 붙여 넣지 마십시오.
한 번 탈출하고 올바른 장소에 있습니다
만약 당신이 내 탈출 실수의 십 년에서 한 가지를 취할,이 걸릴: 스택의 정확히 한 레이어는 탈출해야하고,출력 레이어해야합니다. 저장 깨끗한 UTF-8. 렌더링 시간에 다섯 개의 특수 탈출,컨텍스트에서 you're 로 렌더링. 모든 &amp; 프로덕션에서는 해당 작업을 놓고 싸우는 두 구성 요소의 맵입니다. 그리고 이스케이프되지 않은 모든 사용자 문자열은 발생하지 않을 수 있는 코드 검토를 기다리는 저장된 XSS입니다. 내 거의 didn't.
보관하세요 HTML 엔터티 인코더/디코더 형제자매와 함께 디버깅 회전에서 URL 인코더/디코더 백분율 인코딩 컨텍스트의 경우(the URL 인코딩 가이드 통과합니다 %2520의 퍼센트 인코딩 사촌입니다 &amp;), 그만큼 Base64 변환기 래핑된 페이로드의 경우 케이스 변환기 그들 사이의 식별자 이름 바꾸기 그런트 작업을 위해. The 코딩 도구 가이드 전체 세트를 걷습니다.
그리고 당신이 디버그하는 문자열이 너무 자주 someone's 실제 이름 또는 이메일이기 때문에: 위의 모든 것은 클라이언트 측을 실행, 아무것도 업로드, 네트워크 탭에서 검증 할 수 없습니다. That's 마케팅하지 - it's 내가 한 방식으로 이러한 도구를 구축 한 이유. 에 그 철학에 더 데이터 개인정보 보호 가이드.



