카테고리 없음

티스토리 모바일 수식 표시 코드가 고장난 이유

서사대생 2024. 11. 26. 02:20

티스토리 블로그의 수식이 모바일에서 표시되지 않는 문제를 조사했다.

 

우선 배경 설명부터.

티스토리에서는 MathJax로 작성한 수식이 곧바로 표시되지 않지만, 스킨을 편집하면 보이게 할 수 있다.

처음에 MathJax 2.X용 코드를 적용했다가,

https://drone23.tistory.com/185

 

챗GPT의 수식 출력을 티스토리에 표시

챗GPT의 출력을 복사해서 티스토리에 붙여 넣었더니 수식이 제대로 표현되지 않아서, 티스토리 설정 - 스킨 편집 - html 편집에서 head에 아래 코드를 추가했다.   참고:https://yumy.tistory.com/82

ac.ychoi.kr

 

MathJax 3.X 지원 코드로 바꿨다.

https://drone23.tistory.com/189

 

티스토리 스킨에 MathJax 3.X 적용

얼마 전에 MathJax를 사용하게 스킨을 편집했는데, 챗GPT와 탄도 자동 계산 코드를 짜다 보니 기존 코드가 MathJax 2.X용이라고 해서 3.X용으로 수정해서 다시 스킨에 적용했다.

ac.ychoi.kr

 

그런데 위와 같이 해도 모바일 페이지에는 수식이 보이지 않아, 다음 글에 소개된 코드를 몇몇 글에 적용했었다. 

https://aliencoder.tistory.com/47

 

티스토리 모바일에서 수학기호 나오게 하는 법 (with MathJax)

2021.12.06 - [etc] - 티스토리 수학기호 입력하는 방법 티스토리에 수학기호를 적는 방법은 위 포스팅을 참고하면 된다. MathJax를 이용한 script를 티스토리 html에 삽입하는 방법에 대한 설명이다. 아래

aliencoder.tistory.com

 

위 글에서는 수식을 포함하는 글에 다음 코드를 삽입하라고 안내한다. 참고로 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)은 구형 브라우저를 지원하는 오픈소스 라이브러리이며. Polyfill.js는 전 세계 10만개 이상의 사이트에서 사용하고 있는 오픈소스 자바스크립트 코드다. 최근 이 Polyfill.js 라이브러

www.boannews.com

 

위 기사에 따르면, Polyfill.io는 올해 초 중국 기업 펀눌(Funnull)에 의해 도메인이 인수된 이후 악성코드 공격의 도구로 활용되었다. 사용자는 이 도메인을 통해 유해 사이트로 리다이렉트되거나, 개인정보가 탈취되는 등의 피해를 입을 수 있었다. 특히 모바일 환경에서 HTTP 헤더 기반의 조건부 악성코드 실행이 확인되었다.

 

수식이 포함된 글을 모두 검색해서, 각 글에서 다음 Polyfill.io 관련 코드를 제거했다.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

 

 

현재 모바일에서 수식이 표시되지 않는 상태라, 해결 방법을 좀 더 알아봐야겠다.