HTMLPurifier에 의한 스타일 속성 제거
에디터 컴포넌트를 하나 만들고 있는데 에디터에 컴포넌트 요소 집어넣고 저장하면 몇몇 스타일 속성들이 필터링됩니다ㅜ
관리자가 아니라면 말이죠ㅠㅠ
찾아보니 라이믹스 기준으로 /common/framework/filters/htmlfilter.php에 _supportCSS3라는 함수에서 허용한 속성만 통과하는 것 같아요.
이래선 스타일 넘치는 게시물을 만들수 없잔항아요요아ㅏㅘ아ㅗㄹ
그래요. 아마도 보안 문제 때문이겠죠;;
근데 정말 그런 문제가 있나요?
position에 fixed 같은 걸 쓰면 곤란하긴 하겠지만 relative나 abloute 같은 건 괜찮지 않나요?
position, cursor, clip, pointer-events 같은 속성도 통과시켜주시면 안 되나요?
윤삼
Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
댓글 9
absolute는 fixed만큼 위험합니다. 피싱 사이트 링크를 만들어서 레이아웃의 로그인 버튼 위치에 정확하게 덮어버릴 수 있어요. ㅋㅋㅋ pointer-events는 주로 SVG에 사용하는데, SVG도 보안상 허용하지 않고 있고요.
본문 소스에 온갖 스타일을 집어넣을 궁리를 하시기보다는 CSS, JS 파일을 따로 만들어서 모든 스타일 및 컴포넌트 설정에 따라 달라져야 하는 내용을 그곳에서 처리하도록 하고, 해당 컴포넌트를 사용하는 글에서는 그 파일(들)이 로딩되도록 하는 방법을 궁리하시는 것이 빠를 것 같네요. 본문 소스는 최대한 간단하게 유지해 주세요. 설문조사 컴포넌트처럼 온갖 스크립트가 실행되도록 만들 수도 있는데요 뭐.
본문 출력 자체는 말씀하신대로 처리해서 사실 별 무리는 없어요. 다만 글 수정 화면에서는 스타일들이 날아가버린 다음이니까 유저들한테 안 예쁜 경험을 제공하게 돼서 그게 좀 아쉽더라구요;;;
말씀하신대로 입력화면을 그냥 단촐하게 꾸며야겠네요ㅜ
컴포넌트만으로 대응 안되면 애드온도 같이 제작해서 간단히 css, js를 로딩해주시는 걸로 병행하시면 설계하게 쉬울 것 같습니다.
class도 가능하면 줄이시고 아래 식으로 정리하시는게 좋아 보입니다.
div[editor_component="ap_beer"] > img:nth-child(0) {...}
에디터에 삽입할 때 굳이 이쁘게 보이는 건 포기하고 그냥 이미지 하나만 딸랑 넣어놓을 생각도 하고 있어요ㅎ
아니면 저같은 경우 title이나 alt 속성을 활용해서 출력단에서 치환하는 방법을 썼던 기억이 납니다.
혹은 data-* 속성은 걸러지지 않았던가...
역시 탁견이십니다. 그런 식으로 우회해도 되겠네요.
저는 에디터 입력 화면에서 컴포넌트 요소를 가급적 본문 출력 모양에 가깝게 해서 사용자들의 편집 경험을 즐겁게 해주고 싶었던 건데 그 부분은 어렵다고 하니 어쩔 수 없죠, 뭐ㅜ