정말 중요한 것은 눈에 보이지 않는다 ~ 유니 코드의 눈에 보이지 않는 개행 문자로 고통받은 이야기 ~

Fringe81 어드벤트 캘린더의 4일째입니다.
여러분, 안녕하세요. Lil Pacy a.k.a 페시오입니다.

전날은 대선배 @pastelInc 의,
『이건은 누가 결정할까요? 되었을 때의 델리게이션 포커』 이었습니다.

평소에는 Elm을 쓰고 있지만,
이번 기사에서는, 유니코드의 조금 깊은 얕은 물에 잠복해 보려고 합니다.
(머리 나쁜 것 같은 내보내기 죄송합니다.)

TL;DR

유니코드의 문자를 다룰 때는, 「시인할 수 없는 문자」나 「육안으로는 똑같아도, 실제로는 완전히 다른 문자」가 존재하고 있어 시큐리티상의 리스크에도 연결되기 때문에 주의가 필요하다.

이번에 고통받은 그 녀석

←이 녀석

↑이 녀석

이 녀석 → 

역시, 어떻게 노력해도 보이지 않는, 미리보기에 표시되지 않는다.
라고 할까 Qiita의 에디터에 붙이면 지워져 버린다.

일의 발단

슬랙의 메시지가 마음대로 개행되는 문제

SlackBot의 표시가 버그되었습니다.


로그에 표시해도 무언가가 들어있는 것처럼 보이지 않습니다.


Block Kit Builder에 복사해보세요.


역시 개행되어 버린다


잘 자주 오른쪽을 보면 ...


Gotcha!!(붙잡았다!!)

이 아카마루, 그대로 copipe로 검색해도 아무것도 나오지 않았기 때문에 일단 퍼센트 인코딩해 보았다.

js

encodeURI('
');
// => "%E2%80%A8"

"%E2%80%A8" 이 녀석에서 구그해 보면 U+2028 라는 Unicode의 개행 문자라고 알았다

이번은, 리플레이스 해 해결.

js

str.replace(/\u2028/g,'')

그 밖에도 다양한

출처 : 일반 구두점 General Punctuation의 문자 목록 | 0g0.org

아래쪽도 아마 개행

잡는 방법

toUnicode 함수 사용

js

function toUnicode(theString) {
  var unicodeString = '';
  for (var i=0; i < theString.length; i++) {
    var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
    while (theUnicode.length < 4) {
      theUnicode = '0' + theUnicode;
    }
    theUnicode = '\\u' + theUnicode;
    unicodeString += theUnicode;
  }
  return unicodeString;
}

출처: Convert a String to Unicode in Javascript

이 녀석에서

js

toUnicode('
');
// => "\u2028" Qiitaの記事上では何かが入っているようには見えないけれど。

그건 그렇고, 유니 코드를 해당 문자열로 만드는 방법

js

function unicodeToChar(text) {
   return text.replace(/\\u[\dA-F]{4}/gi, 
          function (match) {
               return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
          });
}

출처: Converting unicode character to string format

js

unicodeToChar('\u2028')
// => "" やっぱり目には見えないんだけれどね。

결론

정말 중요한 것은 보이지 않는다 (별의 왕자처럼

Tips

이하, 유니코드에서 보안상 고려해야 하는 것을 언급한 기사.

유니코드 제로 폭 스페이스를 이용해 정보를 숨기고 담기 - A painter and a black cat
유니코드로 절대 알아야 할 보안 5가지 주의(번역)
인간의 눈으로 낯선 URL 위장이 피싱 사기에 악용될 가능성, Firefox에서의 대책은 이거 - GIGAZINE

P.S.

Mac이라면 다음 명령으로 유니 코드 2028을 생성하여 클립 보드에 복사 할 수 있습니다.

$ echo -en "\u2028" | pbcopy

꼭 여러 곳에 붙여 보고 싶다.

이상.