Server-Sent Eventsのエスケープ

Posted 2014年1月10日 by uchida & filed under いろいろ.

Server-Sent Eventsを使うとサーバーからクライアントにデータをPUSHすることができます。使い方はこの辺を参考にしてください。

node.js + expressでサーバー側を実装するとこんな感じになると思います。

app.get('/event', function(req, res) {
  res.type('text/event-stream');
  res.write('data: ' + data + '\n\n');
});

app.get('/event', function(req, res) {

res.type('text/event-stream');

res.write('data: ' + data + '\n\n');

});

この+ data +部分、data変数が任意の文字列の場合簡単にインジェクションができてしまいます。では安全にdata変数を出力するにはどうすればいいかを考えてみました。

改行をなんとかする

CRLFがterminatorなのでdata変数に改行があると当然おかしくなります。

対応方法として、生文字列を渡したいのであればssl.jsのようにCRLFでsplitしてdataフィールドを複数書けばよいでしょう。またJavaScriptの場合文字列をvalidなJSONとして扱えるため、とりあえずJSONにする手も使えます。（ECMA-262JSONText -> JSONValue -> JSONString、RFC 4627の場合はobjectとarrayのみJSON-text = object / array）

HTMLタグをなんとかする

Server-Sent EventsのContent-Typeはtext/event-streamなので、このURLをまともなブラウザで直接表示した場合ファイルダウンロードになるなど、少なくともHTMLとして開かれることはありません。しかし以前からはせがわようすけさんらが警鐘を鳴らしているIEのContent-Type無視によってHTMLとして開かれることがあります。

例えば以下のようなサーバーにIE7で/event/a.htmlを開くとalertが表示されました。

app.get('/event/:id', function(req, res) {
  res.type('text/event-stream');
  setInterval(function() {
 　 // 任意の文字列を返している、という想定
  　res.write('data: &lt;script&gt;alert(1)&lt;/script&gt;\n\n');
  }, 1000);
});

app.get('/event/:id', function(req, res) {

res.type('text/event-stream');

setInterval(function() {

　 // 任意の文字列を返している、という想定

　res.write('data: <script>alert(1)</script>\n\n');

}, 1000);

});

IE8以降であればnosniffでHTMLへの昇格を防げますが、IE7以下の対策をするとしたらJSONにした上で「/」「<」「>」「+」をエスケープするくらいでしょうか。XMLHttpRequestであれば独自のリクエストヘッダをつけたりPOSTで投げたりといった方法もありますが、EventSourceはURLの指定くらいしかできないので使えません。あとscriptタグで読み込んだときにどうなるんでしょう？JSONにしてあれば大した問題にはならなそうですが。

まあServer-Sent Events使うようなサイトをIE7で見るやつなんていねーよ、って言われたらそれまでですが。

検証スクリプト