타운광장토픽게시판

HTMLPurifier에 의한 스타일 속성 제거

윤삼
조회 수 425
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

에디터 컴포넌트를 하나 만들고 있는데 에디터에 컴포넌트 요소 집어넣고 저장하면 몇몇 스타일 속성들이 필터링됩니다ㅜ

관리자가 아니라면 말이죠ㅠㅠ

 

찾아보니 라이믹스 기준으로 /common/framework/filters/htmlfilter.php에 _supportCSS3라는 함수에서 허용한 속성만 통과하는 것 같아요.

이래선 스타일 넘치는 게시물을 만들수 없잔항아요요아ㅏㅘ아ㅗㄹ

 

그래요. 아마도 보안 문제 때문이겠죠;;

 

근데 정말 그런 문제가 있나요?

position에 fixed 같은 걸 쓰면 곤란하긴 하겠지만 relative나 abloute 같은 건 괜찮지 않나요?

position, cursor, clip, pointer-events 같은 속성도 통과시켜주시면 안 되나요?

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 9
  • ?
    캬. 컴포넌트까지 제작하는..넘사벽
  • ? profile
    컴포넌트 제작은 할 때마다 느끼는 거지만 말로 다하기 어려운 애로가 좀 있어요. 에효..
  • profile

    absolute는 fixed만큼 위험합니다. 피싱 사이트 링크를 만들어서 레이아웃의 로그인 버튼 위치에 정확하게 덮어버릴 수 있어요. ㅋㅋㅋ pointer-events는 주로 SVG에 사용하는데, SVG도 보안상 허용하지 않고 있고요.

    본문 소스에 온갖 스타일을 집어넣을 궁리를 하시기보다는 CSS, JS 파일을 따로 만들어서 모든 스타일 및 컴포넌트 설정에 따라 달라져야 하는 내용을 그곳에서 처리하도록 하고, 해당 컴포넌트를 사용하는 글에서는 그 파일(들)이 로딩되도록 하는 방법을 궁리하시는 것이 빠를 것 같네요. 본문 소스는 최대한 간단하게 유지해 주세요. 설문조사 컴포넌트처럼 온갖 스크립트가 실행되도록 만들 수도 있는데요 뭐.

  • profile
    absolute가 그랬다니ㄷㄷㄷ

    본문 출력 자체는 말씀하신대로 처리해서 사실 별 무리는 없어요. 다만 글 수정 화면에서는 스타일들이 날아가버린 다음이니까 유저들한테 안 예쁜 경험을 제공하게 돼서 그게 좀 아쉽더라구요;;;

    말씀하신대로 입력화면을 그냥 단촐하게 꾸며야겠네요ㅜ
  • profile profile
    라이믹스라면 에디터 내에서도 CSS가 로딩되도록 할 수 있지만, 이건 컴포넌트에서 강제할 수 있는 것이 아니라 사용자가 직접 설정하도록 안내해야 합니다.
  • profile
    되도록이면 style 삽입을 하지말고 class로 정의하시는게 좋습니다.
    컴포넌트만으로 대응 안되면 애드온도 같이 제작해서 간단히 css, js를 로딩해주시는 걸로 병행하시면 설계하게 쉬울 것 같습니다.
    class도 가능하면 줄이시고 아래 식으로 정리하시는게 좋아 보입니다.
    div[editor_component="ap_beer"] > img:nth-child(0) {...}
  • profile profile
    네, 안 그래도 애드온 생각을 하고 있었어요. 근데 그러기엔 만드는 사람도 쓸 사람도 번다하기만 할 것 같아서 고심 중이죠.

    에디터에 삽입할 때 굳이 이쁘게 보이는 건 포기하고 그냥 이미지 하나만 딸랑 넣어놓을 생각도 하고 있어요ㅎ
  • profile

    아니면 저같은 경우 title이나 alt 속성을 활용해서 출력단에서 치환하는 방법을 썼던 기억이 납니다.
    혹은 data-* 속성은 걸러지지 않았던가...

  • profile profile

    역시 탁견이십니다. 그런 식으로 우회해도 되겠네요.

    저는 에디터 입력 화면에서 컴포넌트 요소를 가급적 본문 출력 모양에 가깝게 해서 사용자들의 편집 경험을 즐겁게 해주고 싶었던 건데 그 부분은 어렵다고 하니 어쩔 수 없죠, 뭐ㅜ