HTML 이메일에 랜덤 비밀번호 오류

배경

신규 사용자에게 임시 비밀번호를 Azure의 Email Communications를 통해 이메일로 전달하는 플로우를 구현했습니다. 어느 날 일부 사용자에게 보내진 비밀번호가 올바르지 않다는 이야기를 들었습니다. 일어나서는 안될 일이었습니다.

근본 원인

역추적을 해보니, 랜덤 비밀번호에 우연히 <> 문자가 포함되어 있었고, HTML 본문에서 태그로 파싱되어 렌더링이 깨졌습니다.

예시) <p>임시 비밀번호: ab<9F>kZ</p>

위 문자열에서 <9F>가 태그처럼 해석되어 브라우저/클라이언트가 숨겨 버립니다.

해결

HTML 컨텍스트에서의 클린코딩

사용자/랜덤 데이터(비밀번호)를 HTML 본문에 그대로 삽입했습니다. HTML 컨텍스트에서 안전하지 않은 5개 문자는 최소한 반드시 이스케이프해야 합니다: & < > " '

특수문자 제한

우리는 비밀번호에 위의 안전하지 않은 5개의 문자를 포함시키지 않는 것으로 수정했습니다.

결론

비밀번호 문자열에 <, > 같은 HTML 특수문자가 포함되면, HTML 본문에서 태그로 해석되어 화면에 보이지 않습니다.
기본적인 내용이었지만 완전히 놓쳐버렸습니다. 연속적인 테스트만이 살 길!