Today I Learned
날짜
2024년 11월 18일 월요일
내용
HTML 엔티티
매주 월요일, 네이버 상품 상세페이지를 조회하여 지난 주에 추가해둔 게 잘 있는지 확인한다. 상품 상세페이지는 HTML로 작성되어있어서, 이미지 태그를 추가해놨다.
<img src="...../상품명"
이 친구를 찾으면 되는데, 분명히 있는데도 없다고 뜬다… 뭔가 싶어 상세페이지 전체를 확인했다. 왜 &가 & 로 바뀌어 있나 했더니 HTML 엔티티라고 한다.특수문자가 HTML 엔티티로 바뀌는 이유를 친구에게 물었다.
1
2
3
4
1. HTML 엔티티는 특수문자를 안전하게 표현하기 위한 표준 방식입니다.
2. <, >, & 등의 문자는 HTML 구조를 깨트릴 수 있기 때문에 엔티티로 변환됩니다.
3. 자동 변환된 HTML 엔티티는 html.unescape() 또는 브라우저의 파서를 통해 원래 문자로 복원할 수 있습니다.
더 자세히 말해달라고 했다.
- HTML 구조의 안전성 유지
예를 들어, <, >, &와 같은 문자가 HTML 코드에서 태그나 속성의 일부로 해석될 수 있습니다. 이를 엔티티로 바꾸면 브라우저는 이를 데이터로 해석하고 HTML 태그로 인식하지 않습니다.
• 예:
• < → <
• > → >
• & → &
- 브라우저 호환성
특정 문자는 HTML 코드의 일부로 오해받을 가능성이 있기 때문에 이를 명확히 하기 위해 엔티티로 변환합니다.
- 문자 세트 제한
초기 HTML은 ASCII 문자만 지원했기 때문에 유니코드와 같은 확장된 문자 세트를 표현하기 위해 HTML 엔티티가 필요했습니다.
- 안전성
특수문자를 엔티티로 변환하면 HTML이나 JavaScript에서 악의적인 코드 삽입(예: XSS 공격)을 방지할 수 있습니다.
회고
상품명에 특수문자를 왜넣냐!