티스토리 블로그의 수식이 모바일에서 표시되지 않는 문제를 조사했다.
우선 배경 설명부터.
티스토리에서는 MathJax로 작성한 수식이 곧바로 표시되지 않지만, 스킨을 편집하면 보이게 할 수 있다.
처음에 MathJax 2.X용 코드를 적용했다가,
https://drone23.tistory.com/185
MathJax 3.X 지원 코드로 바꿨다.
https://drone23.tistory.com/189
그런데 위와 같이 해도 모바일 페이지에는 수식이 보이지 않아, 다음 글에 소개된 코드를 몇몇 글에 적용했었다.
https://aliencoder.tistory.com/47
위 글에서는 수식을 포함하는 글에 다음 코드를 삽입하라고 안내한다. 참고로 Polyfill은 오래된 브라우저에서도 최신 JavaScript 기능을 사용할 수 있도록 지원해주는 오픈소스 라이브러리다.
<p data-ke-size="size16">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</p>
그런데 그로부터 몇 달 지나서, 아이폰용 티스토리 앱에서 지난 글을 열람하니 수식이 제대로 표시되지 않는다.
모바일 페이지에서 MathJax 수식이 보이지 않는 이유를 조사하던 중, Polyfill.io 도메인이 보안 공격의 대상이 되었다는 기사를 발견했다.
https://www.boannews.com/media/view.asp?idx=131258&direct=mobile
위 기사에 따르면, Polyfill.io는 올해 초 중국 기업 펀눌(Funnull)에 의해 도메인이 인수된 이후 악성코드 공격의 도구로 활용되었다. 사용자는 이 도메인을 통해 유해 사이트로 리다이렉트되거나, 개인정보가 탈취되는 등의 피해를 입을 수 있었다. 특히 모바일 환경에서 HTTP 헤더 기반의 조건부 악성코드 실행이 확인되었다.
수식이 포함된 글을 모두 검색해서, 각 글에서 다음 Polyfill.io 관련 코드를 제거했다.
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
현재 모바일에서 수식이 표시되지 않는 상태라, 해결 방법을 좀 더 알아봐야겠다.