Javascriptで安全に呼び出す－C#使用（チュートリアル2）

Riot Games APIのフォーラムに投稿された、Riot APIの入門講座「Tutorial 2」の訳です。

Tutorial 2（Making Secure Calls with Javascript - using C#）

[Tutorial] Beginners introduction to Riot API and JSON, using Javascript and Ajax | Riot Games API

Javaを使う場合でも、考え方は「全く」同じです。ただ、C#のwebClientに似たライブラリを見つける必要があります。これのような。WebClient.DownloadString in Java?
このチュートリアルの目的は、APIを安全に呼び出すための基本的な手順を説明することです。C#のような別の言語を使う方法とそれが必要な理由について説明します。
また、JSFiddleのようなサイトを用いて「見せる」チュートリアルです。スクリプト言語のみサポートしており、オブジェクト言語は扱えません。

Javascriptのようなスクリプト言語は処理をデバッグすることが可能なため、変数の確認やコードの虚弱性を見つけることが容易です。しかし、これはユーザもスクリプト／変数をデバッグできるということです。もし、APIキーをJavascriptに埋め込んだ場合（初めのチュートリアルのように）、あなたのAPIキーは簡単に見られてしまいます。この短いチュートリアルが終わる頃には、キーを守る良い方法が見つかるはずです。

必須条件：

Riotの開発者サイトに登録していること
Visual Studioの基礎を理解していること。Visual Studioを持っていなければ、ここに無料のWebバージョンがあります。
- Free Visual Studios Web Express 2013
入門編チュートリアルのコンセプトを理解していること。

Visual Studio Web ExpressとC#

第一に、使ったことがないからといって怖がらないことです。これから説明することはとてもシンプルです。Java等のオブジェクト指向言語を知っているのであれば、簡単だと思います。

C#：C#は広く使われているプログラム言語で、Microsofts .NET Framework上で動かすことが多いです。Webアプリケーションを作る時に個人的によく使う言語で、とても強力な言語なので強くお勧めします。Javaを知っているのであれば、C#は簡単です。
Visual Studio：Visual Studioは、C#のような言語のIDEの一つです。IDEというのは、基本的にはコードを実行するためのプログラムで、開発を容易にしてくれます。

スクリプト言語が安全ではない理由

チュートリアル1の最初のサンプルを見てみましょう。ここに作りました。

サンプルフォーム

開発キー

サモナー名

サモナーレベル：
サモナーID：

キーとサモナー名「Teemo」を入力します。
ブラウザのデベロッパーコンソール／インスペクターを開きます（ほとんどのブラウザではF12キーで開けます）。図1のようなものが表示されるはずです。
Sourcesタブに行き、私が作った関数を見つけてください。
- 検索機能（Ctrl+F）を使って関数名等のキーワードで関数を探せます。「function summonerLookUp()」
- または、ここに直接スクリプトを書いているため、Bobyタグを開いても見つけられます。
見つかったら、関数内の最初の行をクリックします。マーカーのようなものが付くはずです。
送信をクリックすると、Javascriptコードはブレークポイントで止まるはずです。
$.ajax({ まで、ステップ（F10）してコードを進めます。
もう一度ステップ（F10）をクリックすると、なぜか非同期のajaxループ全体をすり抜けます。
VariablesまたはLocalと呼ばれる箇所が見えるはずです。図2を見てください。
このように、APIキーは完全に見えています。コードを使用する人は誰でも見られます。

では、どうすれば良いのか？

C#やPHPのような言語なら、RIOT APIデータを呼び出し、JSONだけJavascript関数に渡すことができます。なぜこれは安全で、Javascriptは安全でないのか疑問に思うかもしれません。この概念は実にシンプルです。Javascriptはクライアントサイドです。これは、実行するためにユーザのブラウザにコードを渡すため、ユーザが好きなように見たり、読んだり、実行したりすることができます。しかし、C#やPHPはサーバサイドです。これは通常、ユーザはコードを見たり、触ったりすることはできません。ユーザがデータを取得しようとしても、処理はサーバが実行します。

もっと簡単な例として、銀行に行った時をイメージしてください。あなたは安全にお金を引き出したい。銀行員は、あなたにキーを渡して自分でお金を引き出してもらう方法（クライアントサイド）と、銀行員が引き出し、キーは絶対に見せない方法のどちらもとることができます。どちらでもお金を引き出せますが、明らかに銀行員にキーを預けた方が安全です。最も安全なルートです。

AJAXでC#を使う

この節では、C#の基礎概念を理解しているものとして説明します。

ここで説明しなければならないのは、コードに関する2つのことです。

C#の部分は、サーバサイドです。（実際にAPI呼び出しを行うと、結果をAjaxに渡します）
Ajax／Javscriptの部分は、C#部分からデータを取得して、色々実行します。

Javascriptの部分を初めに見てみましょう

（ちなみに、JavascriptとC#の関数を「rosterPull」と名付けました。）

function rosterPull() {
  $.ajax({
    url: "/Competitive/rosterPull", //rosterPull here refers to the C# method
    type: "POST",
    data: "roster=" + playerIdString,
    dataType: "json",  
    success: function (resp) {

      json = JSON && JSON.parse(resp) || $.parseJSON(resp);

      for (var i = 0; i < teamRoster.length; i++) {
        teamRoster[i] = json[teamRoster[i]];
      }
       
      updateWebSite();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status == 0) {
        document.getElementById("apiStatus").innerHTML = "ERROR";
        $('#apiStatus').css("color", "red");
      }
    }
  });
}

基本的な概念はこれです。rosterPullという関数があります。チームからプレイヤーデータを取得するために使います。詳しく説明しましょう。

url：C#上の位置とメソッド名です。
type：技術的には恐らく「GET」ですが、正確に言うと、このC#ではPOSTになります。
data：C#関数に渡す引数です。（rosterPull(playerIdString)を返すことと同等になります）
dataType：明らかにJSONを取得しようとしているため、jsonを記述します。
success：チュートリアル1で説明したように、実際には上のコードがうまくいった時のみ、この関数が実行されます。

C#まで進んだ（動いた）後、successの記述を実行し、JSON（C#から渡されたオブジェクト内にあります）を Javascript版のJSONに変換します。
最後に、各要素データを別のJavascript変数に格納します。（teamRoster[i] = json[teamRoster[i]];）
このように、APIキーを渡すことも、コード内に記述することもありません。ただJSONを要求し、取得しただけです。

C#の部分を見てみましょう

ここでの基本的なコンセプトは、私のメソッドを説明することです。私のメソッドは、Competitiveという名のControllerフォルダにあります。これがrosterPullメソッドです。

大事なのは以下の部分です。

webClient：これは、私が見つけたJSONをダウンロードしてくれるC#ユーティリティです。
- Javaの場合：JavaでのWebClient.DownloadStringは？（WebClient.DownloadString in Java?）
json2：DownloadString（webClientライブラリメソッドの一つ）を使っています。これがキーを含んだAPI URLです。
return JSON：最後に、Json()オブジェクトを返します。これが、Javascript関数に返すオブジェクトです。

このように、実にシンプルです。Javascript関数がしたことは、安全なメソッドにAPIを呼び出してもらっただけです。そうすれば、上記のように、より具体的な呼び出を行うための引数データを返すことができます。

安全であることを分かってもらえましたか？

もし、これでもまだ安全なのか疑問に思うようでしたら、当然何もかも盗まれてしまいます。もしAPIキーを手に入れようとしたら、以下のことをするしかないでしょう。

Webホストサーバを壊します。
プログラムのバイナリデータをダウンロードします（コンパイルした時、C#コードは読めない機械語に変わるため）。
逆コンパイルしなければならないでしょう。ここで彼らが何をしているのか気付くことを願います。
これでようやく、キーのある場所を見つけられると思います。
Stack Overflowの頭の良い人達により、この事実は裏付けられています。

ASP .NET Controllerはどれくらい「安全」なのですか（How "secure" is the ASP .NET Controller）

でももし誰かがこれをしたら、人生が終わるか、あなたを恨むでしょうね。はは。
Riotに関して言えば、プログラム内にコンパイルされたキーがあることは問題視していません。私の質問により分かっています。
~~Controller内にキーを記述しても安全ですか？（Is storing my key in the Controller safe enough?）~~（リンク切れ）

原文：Austin Anderson　様
Lord Imrhial（@Lord_Imrhial）－NA

ulg

Search This Blog