ルー語で遊んでいたらJSONPが作れてしまった

#ルー語で遊ぶ
ルー語変換
おそらく「ルー語」がちょっと流行ったときに、さっと作ったサービスですかね～
Webサービスは、こういうフットワークの軽さがいいですね。

##作りを見てみる
エンジニアの職業病、このサービスはいったいどんな作りをしているのか？
ブラウザの開発者ツールで調査してみました。

「Network」をみると、「api」というものが取得されていました。
「api」の「Headers」を見ると

General
 Request URL: https://lou5.jp/api
 Request Method: POST

ふむふむ。
ベースとなるURLは「https://lou5.jp/api」だな。
送信方法は「POST」と。

さらに見てみる。

Form Data
 text: 寝耳に水

どうやら「text」という名前で「寝耳に水」が送られていますね。

##ということで
「POST」でAPIを叩いているのですが、ダメ元で「GET」をしてみます。

URLとして「https://lou5.jp/api/?text=寝耳に水」を作り
ブラウザの新規タブでアクセスしてみました。

すると

寝耳にウォーター

GETで変換できてしまった。。。いいのかな。

##ということで、さらに
URLとして「https://lou5.jp/api/?text=callback('寝耳に水')」を作り
ブラウザの新規タブでアクセスしてみました。

すると

callback('寝耳にウォーター')

こ、これはすごい！！
なんと「JSONP」でデータが返ってきています！！

##ということで、サクッと
JSONPのサンプルを作ってみます。

ここで最小限に必要なUIは、
「変換前のテキスト」「変換後のテキスト」「変換ボタン」
以上の3つがあればいけそうですね。

sample1.html

<input id="beforeText" type="text" placeholder="ルー語に変換したい言葉を入力してください">
<input id="btnRun" type="button" value="ルー語変換">
<input id="afterText" type="text" placeholder="こちらにルー語が表示されます">

sample1.css

input[type='text'] {
    width: 300px;
}

JavaScriptの実装もシンプルに。

sample1.js

window.onload = function(){
    var btnRun = document.getElementById("btnRun");
    btnRun.onclick = function(){
        var beforeText = document.getElementById("beforeText");
        addScript("https://lou5.jp/api/?text=callback('" + beforeText.value + "')");
    };
};

function addScript(url){
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}

function callback(val){
    var afterText = document.getElementById("afterText");
    afterText.value = val;
}

これで、いとも簡単に「ルー語変換」のサービスが作れてしまいました。
さらに、JSONPなので、クロスドメイン制限にも引っかからないし、自由にサイトに組み込むことができてしまいます！

##まとめ

今回たまたま、セキュリティの穴を発見してしまいました。
ちょうど過去の自分の仕事を見直す、いい機会になりました。
おそらく、世の中のセキュリティ系エンジニアは、
もっと高度なレベルのことをして、ご飯を食べているのかもしれませんね～