HTML : `<meta charset="">`

정윤호·2024년 4월 18일
0

코드잇잇잇!

목록 보기
5/15

출처


왜 궁금했을까

HTML 파일을 작성할 때, 항상 !를 치고 시작하는데,

<meta charset="UTF-8"> 태그가 눈에 밟혔다. 저건 뭐지?


vscode 에는 커맨드 키를 누른채 태그나 속성에 마우스 커서를 올리면 description 을 준다는 것을 최근에 배워서,
한 번 시험삼아 커서를 위 태그에 올려봤다.

This attribute declares the page's character encoding. It must contain a standard IANA MIME name for character encodings. Although the standard doesn't request a specific encoding, it suggests:

Authors are encouraged to use UTF-8.
Authors should not use ASCII-incompatible encodings to avoid security risk: browsers not supporting them may interpret harmful content as HTML. This happens with the JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family and the EBCDIC family.
Note: ASCII-incompatible encodings are those that don't map the 8-bit code points 0x20 to 0x7E to the 0x0020 to 0x007E Unicode code points)

Authors must not use CESU-8, UTF-7, BOCU-1 and/or SCSU as cross-site scripting attacks with these encodings have been demonstrated.
Authors should not use UTF-32 because not all HTML5 encoding algorithms can distinguish it from UTF-16.
Notes:

The declared character encoding must match the one the page was saved with to avoid garbled characters and security holes.
The <meta> element declaring the encoding must be inside the <head> element and within the first 1024 bytes of the HTML as some browsers only look at those bytes before choosing an encoding.
This <meta> element is only one part of the algorithm to determine a page's character set. The Content-Type header and any Byte-Order Marks override this element.
It is strongly recommended to define the character encoding. If a page's encoding is undefined, cross-scripting techniques are possible, such as the UTF-7 fallback cross-scripting technique.
The <meta> element with a charset attribute is a synonym for the pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=_IANAcharset_">, where IANAcharset contains the value of the equivalent charset attribute. This syntax is still allowed, although no longer recommended.

오케이

대충 읽어 보니까 charset 속성은 문자 인코딩을 선언하는 듯 하다. 그리고 해당 속성값으로는 아무나 오는게 아니고, 정해진 친구들이 오는 것 같은데,,,

standard IANA MIME name for character encodings
아마 여기에 그 대답이 있겠지... 링크를 눌러봤다

standard IANA MIME name for character encodings

흠... 읽어보니 charset 값으로는 문자 인코딩 방식들이 해당된다. 그 중에서 아스키코드를 권장하고 있고, 세상에 들어본 적도 없는 문자 집합들이 무지하게 많다...

??? 2000이 넘는 넘버링????

이게 그렇게 많다고? 입이 떡하고 벌어졌지만,
사실 이는 MIB에서 넘버링하는 규칙을 따른 것이고 실제로는 300여개 정도의 문자집합이 있다... 그래도 많은데;;

  • 0-2 : 예약됨
  • 3-999 : 표준화된 조직에 의해 설정됨
  • 1000-1999 : 유니코드 / 10646
  • 2000-2999 : 공급업체

이걸 다 알아야 하나?
그건 아니다.


vscode 에서 권장하는 charset 속성의 값은 UTF-8이다.

보안위험을 피하기 위해 아스키 비호환 인코딩을 사용해서는 안된다고 하는데, 이러한 인코딩을 지원하지 않는 브라우저에서 이들을 유해한 컨텐츠로 분류할 수 있다고 한다.

IS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, ISO-2022 등이 이에 해당한다.

또한 CESU-8, UTF-7, BOCU-1 SCSU 를 사용해서도 안된다. 이러한 인코딩을 이용한 Cross-site scripting 공격이 입증되었기 때문이다.

또한 UTF-32도 사용해서는 안 된다. HTML5 인코딩 알고리즘 중 일부는 UTF-32를 UTF-16과 구별할 수 없기 때문이다.

UTF-8

https://developer.mozilla.org/en-US/docs/Glossary/UTF-8#see_also
https://en.wikipedia.org/wiki/UTF-8
https://www.unicode.org/faq/utf_bom.html#UTF8

UTF-8 은 세상에서 가장 널리 쓰이는 문자 인코딩 중 하나이다.
얘는 각각의 문자를 1 바이트 ~ 4 바이트까지의 가변적인 길이로 인코딩하는데, ASCII와 완전히 호환되고 모든 표준 유니코드 문자를 표현할 수 있다고 한다.

웹에서 텍스트를 효과적으로 표현할 수 있기 때문에, 웹에서 특히 널리 사용된다..! UTF-8은 이전에 사용되던 문자 인코딩 방식(ASCII, ISO-8859-1, EUC-KR, Shift-JIS)보다 훨씬 더 유연하고 효율적이기 때문에 많은 언어와 문자를 다루는 데 적합하다고 한다.

위의 아이들은 서로 달라 호환도 되지 않고, 이는 오류를 야기하기 때문에, 모두가 사용하기로 약속한 UTF-8가 가장 많이 쓰이는게 바람직한 것 같다.

UTF-8은 ASCII와의 하위 호환성을 보장하면서도 모든 표준 유니코드 문자를 효과적으로 처리할 수 있는데, 이는 웹과 같은 다양한 환경에서의 텍스트 표현에 매우 유용하다.

ASCII와의 하위 호환성을 보장한다는 의미는, 기존의 ASCII 텍스트가 이미 UTF-8로 변환되어 사용될 수 있다는 것이다.
또한 UTF-8은 비 ASCII 문자를 다루는 데 있어서도 안정성을 제공하는데, 다만 주의할 점으로 이러한 문자들은 하나 이상의 바이트로 인코딩되기 때문에 일부 바이트가 분리되고 다시 결합되지 않으면 손상될 수 있다.

UTF-8은 모든 표준 유니코드 문자를 표현할 수 있는 강력한 도구인데, 모든 언어의 문자, 심볼을 표현함과 동시에, 심지어는 이모지마저 지원하고 있다... 👍

추가적으로 UTF-8은 더 많은 데이터를 표현할 수 있도록 확장 가능한 형식을 제공하며, 이러한 특성은 현대적인 컴퓨팅 및 통신 시스템에서 매우 중요하다 !

BOM

바이트 오더 마크(BOM)은 유니코드 문자 인코딩에서 사용되는 특수한 바이트 시퀀스이다. 주로 파일의 시작 부분에 추가되며, 인코딩의 바이트 순서를 나타낸다.

저어기 맨 앞에 있는 꼬다리 같은 친구를 말한다...

UTF-8과 UTF-16에서 사용될 수 있으며, UTF-8의 경우에는 0xEFBBBF로 표시된다. 바이트 오더 마크는 해당 텍스트 파일이 어떤 유니코드 인코딩을 사용하는지를 나타내는 데 도움이 되며, 특히 UTF-16과 같은 인코딩에서는 바이트 순서를 나타내는 데 중요하다.

그러나 UTF-8에서는 BOM이 선택 사항이며, 일부 프로그램 및 시스템에서는 이를 해석하지 않을 수 있다. 따라서 대부분의 경우 UTF-8(BOM 없음)이 더 권장되는데, 이는 BOM이 필요하지 않으며, 파일의 시작 부분에 BOM이 포함되지 않는다. BOM을 사용할지 여부는 특정 어플리케이션 및 사용 사례에 따라 달라진다고 한다.


오케이

이제 charset 값으로 뭐가 오고, 왜 UTF-8 사용이 권장되는지 알겠다. 그리고 UTF-8 에서도 BOM 꼬리가 안 달린 친구가 선호되는구나.

<meta charset=""> 이용 시 주의할 점

  • 선언된 문자 인코딩은 페이지와 함께 저장된 것과 일치해야 하며, 이를 통해 문자가 깨지거나 보안 취약점이 발생하는 것을 방지할 수 있다.

  • 문자 인코딩을 선언하는 <meta> 요소는 <head> 요소 내부에 있어야 하며, HTML의 처음 1024바이트 내에 있어야 한다.

일부 브라우저는 인코딩을 선택하기 전에 이러한 바이트만을 확인하기 때문에, 해당 경우에는 이 규칙이 중요하다.

  • <meta> 요소는 페이지의 문자 집합을 결정하는 알고리즘의 일부에 불과하다. Content-Type 헤더와 모든 바이트 오더 마크가 이 요소를 재정의할 수 있다.

  • 문자 인코딩을 정의하는 것이 강력히 권장되며, 페이지의 인코딩이 정의되지 않은 경우 UTF-7 후행 스크립팅 기법과 같은 교차 스크립팅 기술이 가능해질 수 있다.

  • charset 속성이 있는 요소는 HTML5 이전의
    <meta http-equiv="Content-Type" content="text/html; charset=_IANAcharset_">
    와 동일하며, IANAcharset에 해당하는 charset 속성의 값이 포함된다. 이 구문은 여전히 허용되지만 권장되지 않는다고 한다.


소감

간단한 궁금증에서 시작했는데, 꽤 넓은 범위에 달하는 지식에 까지 도달한 것이 뿌듯하다.

이에 가장 큰 기여를 한 것은 vscode 의 커맨드 누르고 커서 누르기,
이 기능 정말 강력하다.

내가 뭘 공부해야하지 고민하는 단계를 매우 간략화하고, 링크를 타고 타고 새로운 정보와 흥미로운 사실들에 접근하는 즐거움도 크다 :)

앞으로도 이런 좋은 습관을 유지하여, 양질의 컨텐츠를 작성하고자 한다 ! 파이팅 나 자신 !!

profile
우리 인생 화이팅~

0개의 댓글