[Elm] 危険🐐img onerror芸

本記事では、The Elm Architecture を容易に破壊しうる闇の技術「img onerror芸」をご紹介します。
原則として「img onerror芸」は使わないに越したことはないですが、危険🐐スクリプト芸のように、ごくまれにメリットがデメリットを上回る場合があるかもしれません。

「危険🐐スクリプト芸」と同じく基本的に飛び道具的な内容のため、乱用は絶対にさけましょう。
The Elm Architecture の脆弱性をついたような技法なので何が起きても知りません。
以下の内容はバージョン0.18 を想定しています。

img onerror 芸とは

XSS脆弱性をつくときによく使われる

<img src="1" onerror="alert(1)">

を悪用した非推奨テクニックです。

念のため上記のHTMLを説明しておくと、img タグの src に存在しないパスを設定することで意図的に onerror を発火させ、任意のJSを実行する手法です。

では、Elmで以下のようなViewを作成するとどうなるでしょうか？

{-| An evil view that sends `Msg` on rendering.
-}
onRenderThis : msg -> Html msg
onRenderThis msg =
    Html.img
        [ Attributes.src ""
        , Events.on "error" <| Json.succeed msg
        ]
        []

上記のテクニックと同じように、この img タグが画面上に描画された瞬間に Events.on "error" の部分が発火するため、
「あるViewが実際に画面に描画された瞬間に任意の Msg を飛ばして update 関数を実行する」というハックが可能になります。

The Elm Architecture をこわすので絶対にやらない方が良いですね。
Elm 0.23 くらいで使用禁止になるかもしれません。

elm-evil-sendmsg というライブラリになっているので、どうしても使いたいときにはこれを使うとお手軽でいいでしょう。

つかいどころ

もう一度言います。使うべきではありません。
ちょっとだけ便利になるかもしれないパターンは、たとえば以下のようなユースケースでしょうか？

特定のDOMに対して `port` でJSのコードを適用したい場合

DOM更新後にJSを実行する方法がちゃんと用意されているのでこちらを使いましょう。
でも、DOMを作成するタイミングがあまりにも複雑で、update 関数のどこでそのDOMを作成するかがわかりにくい場合、img onerror芸を使うとちょっとすっきりします。
でも、すっきりするだけでそんなバッドハックを使ったらダメです。
update 関数の書き方を工夫すればいくらでもすっきり書けるはずです。