워드프레스에서 SVG가 사라진다면 KSES 필터 때문입니다

 

오류도 경고도 없이 태그만 사라집니다. 그래서 원인을 찾는 데 시간이 걸립니다.

워드프레스 글에 SVG를 그대로 붙여 넣었는데 저장하고 나니 없어져 있는 경우가 있습니다. 오류 메시지도 없고 경고도 없어요. 그냥 그 부분만 통째로 빠집니다.

버그가 아니라 설계된 동작입니다. 이름은 KSES예요.

 

직접 확인해 본 것

문단 하나, 인라인 SVG 하나, 문단 하나를 순서대로 넣고 저장했습니다. 다시 열어 보니 문단 두 개만 남아 있었어요. <svg>도 <path>도 없었습니다.

주목할 점은 중간이 잘려 나갔는데도 앞뒤 문단은 멀쩡했다는 겁니다. 저장 자체는 성공했고 응답도 정상이에요. 그래서 저장이 안 됐나 의심하며 시간을 쓰게 됩니다.

 

KSES가 무엇이고 언제 도는가

워드프레스가 글 내용을 저장할 때 허용된 HTML만 남기고 나머지를 걷어내는 필터입니다. 이름은 재귀 약자에서 왔고, 목적은 권한이 낮은 사용자가 스크립트를 심지 못하게 막는 것입니다.

기준은 unfiltered_html이라는 권한 하나입니다. 이 권한이 있으면 필터를 건너뛰고, 없으면 걸립니다. 단일 사이트에서는 관리자와 편집자가 이 권한을 갖고, 작성자와 기여자는 못 갖습니다. 멀티사이트에서는 더 좁아서 슈퍼관리자만 갖습니다.

그래서 같은 내용을 붙여 넣어도 계정에 따라 결과가 다릅니다. 관리자 계정으로 테스트하면 잘 되고, 실제로 글을 쓰는 작성자 계정에서는 사라집니다. 이 차이 때문에 재현이 안 된다고 결론 내리기 쉬운 함정이 있어요.

 

SVG만의 문제는 아닙니다

같은 필터가 인라인 스타일도 손봅니다. 안전 목록에 있는 속성은 통과하고 나머지는 조용히 빠집니다. 이 경우는 태그가 남아 있어서 더 헷갈려요. 겉보기엔 멀쩡한데 레이아웃만 어긋납니다.

표나 그림 태그는 대체로 통과합니다. 문제가 되는 것은 스크립트를 실을 수 있는 것들이고, SVG는 그 안에 스크립트와 이벤트 속성을 담을 수 있어서 목록에서 빠져 있습니다. 보안 관점에서는 합리적인 선택이에요.

 

우회하는 방법 세 가지

첫째, 파일로 올려서 이미지 태그로 넣습니다. 미디어 라이브러리에 올린 뒤 그림처럼 참조하면 본문에는 이미지 태그만 남으니 필터에 안 걸립니다. 가장 확실한 방법입니다.

둘째, 아이콘 폰트를 씁니다. 스타일시트 한 줄을 걸고 클래스 이름으로 아이콘을 부르는 방식이에요. 본문에는 빈 태그와 클래스만 들어가니 필터가 건드릴 게 없습니다. 아이콘 라이브러리 중에는 이 방식의 배포판을 함께 내놓는 곳이 많습니다.

셋째, 권한을 손대는 방법이 있는데 권하지 않습니다. 필터를 끄는 것은 그 계정으로 무엇이든 심을 수 있게 만드는 일이라, 아이콘 하나 넣자고 열 문은 아닙니다.

 

미디어 업로드에서 또 막힌다면

SVG 파일 자체를 미디어에 올리려다 거부당하는 경우도 있습니다. 이건 다른 이유예요. 워드프레스는 기본적으로 SVG를 업로드 허용 형식에 넣어 두지 않습니다. 같은 이유입니다. 파일 안에 스크립트가 들어갈 수 있어서요.

그래서 실무에서는 PNG로 내보내 올리는 쪽이 흔합니다. 아이콘을 벡터로 유지해야 하면 아이콘 폰트 쪽이 결국 편합니다.

 

정리

SVG가 사라지면 저장 실패를 의심하기 전에 계정 권한부터 보세요. 관리자로 되고 작성자로 안 되면 KSES입니다. 그리고 이건 고쳐야 할 버그가 아니라 우회할 제약이에요.

이 이야기는 아이콘 라이브러리를 고르다 마주친 것입니다. 다섯 곳의 아이콘을 같은 크기로 나란히 놓고 폭과 선 굵기를 픽셀로 재 봤는데, 스펙이 똑같은 것들끼리도 다르게 나왔습니다. 그 측정 결과는 원문에 표로 정리해 뒀습니다.