Elm에서 원시 HTML을 그대로 표시

Elm의 XSS 대책

Elm은 매우 견고한 애플리케이션 개발을 향한 친절하고 매우 잘 만들어진 언어로, 일반적으로 XSS 취약점을 일으킬 수 없습니다.
따라서 물론 문자열로 가지고있는 원시 HTML을 표시하려고합니다.

import Html exposing (Html)


view : Model -> Html Msg
view model =
    div
        []
        [ text raw
        ]


raw : String
raw = """
    <div>
        こんにちはこんにちは
    </div>
    """

이렇게 해도 실제로

<div>
    &lt;div&gt;こんにちはこんにちは&lt;/div&gt;
</div>

이러한 HTML 상당의 것으로 변환됩니다.

원시 HTML을 포함하고 싶다면

그럼, 원시 HTML을 그대로 HTML로 묻고 싶다면 어떻게 하면 좋을까요?

우선 큰 전제로서, 원시 HTML은 생고기만큼 위험합니다.
생고기는 염소라도 먹지 않습니다.
(초식 동물이기 때문에)



원시 HTML을 표시하고 싶다면 자신의 디자인을 의심해야합니다.
전혀 관계 없지만, 아니사키스와 사니타이즈는 뭔가 비슷하네요.

그래도 하고 싶은

Elm 0.18이라면 위험🐐 스크립트 예술을 사용할 수 있었지만 너무 위험하기 때문에 0.19에서는 금지되었습니다.
Elm 0.19에서는 포기할 수밖에 없습니까?
(다시 3 말하지만, 보통은 포기하고 설계를 재검토하는 것이 좋다고 생각합니다)

무려 뒷 기술이 있습니다.
Elm 앱 내에서 코드 강조 표시 하지만 사용한 elm-explorations/markdown 을 사용합니다.
이것은 원래 마크다운의 텍스트를 Elm의 Html 형태로 변환하는 기능을 제공합니다만, 그 변환시에 「HTML을 그대로 써니타이즈 하지 않고 HTML형으로 변환한다」라고 하는 옵션이 준비되어 있습니다.
네.



그것이 Options형 의 sanitize 라는 옵션입니다.
이것을 False 로 해 toHtmlWith 함수로 Html 형으로 변환해 주면 됩니다.

앞의 예는 이렇게 됩니다.

import Html exposing (Html)
import Markdown exposing (defaultOptions)


view : Model -> Html Msg
view model =
    Markdown.toHtmlWith
        { defaultOptions
            | sanitize = False
        }
        []
        raw


raw : String
raw = """
    <div>
        こんにちはこんにちは
    </div>
    """

와이 간단!

사쿠라 짱에게 밥을 준다.
사쿠라 짱 더보기
다른 기사 보기