JavascriptでのAPIトークンの受け渡し：セキュアにする方法

次のスクリプトは、APIから情報を照会し、単純なAJAXとJavascriptを使用してHTMLに出力します。JavascriptでのAPIトークンの受け渡し：セキュアにする方法

APIのTOKENはJavascriptで公開されています。私の意見では、ページにアクセスできる誰もがトークンを見ることができるので、これは安全ではありません。このメソッドが安全でない場合、トークンを隠す追加のメソッドがありますか？理想的には、必要に応じてJavascript、HTML、PHPを使用したいと思います。既存のスクリプトは非常に単純なので、トークンを保護する比較的簡単な方法があるのだろうかと思っています。追加の新しいコードやメソッドをたくさん追加する必要はありません。あなたはおそらく、APIキー、クライアント側に保存しないでください

<html> 
<body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
    var settings = { 
    "async": true, 
    "crossDomain": true, 
    "url": "https://www.eventbriteapi.com/v3/events/eventid/? 
token=TOKEN", 
    "method": "GET", 
    "headers": {} 
    } 

    $.ajax(settings).done(function (data) { 
    console.log(data); 
    var content = "<h2>" + data.name.text + "</h2>" + data.description.html + 
data.start.utc; 
    $("#eventbrite").append(content); 
    }); 
</script> 

<div id="eventbrite"></div> 

</body> 
</html>

出典

2017-09-03 Daniel C

間違いなく、その代わりに、あなたが 'あなたのserver'を呼び出す必要があり、あなたのクライアントからプライベートAPIを呼び出すために安全ではありません、あなたのサーバは 'eventbrite' APIを呼び出すことができます。 – webdeb

あなたのサイトにリモートサイトへの実際の呼び出しを処理するphpスクリプトを作成し、ajaxを使ってthを送りますあなたのローカルPHPスクリプトへのリクエスト（それは多かれ少なかれプロキシのように動作する） – RamRaider

"秘密"キーはブラウザでは秘密にすることができないだけでなく、その上に、ドメイン要求。問題の唯一の解決策は、ブラウザではなくサーバーを使用することです。 –

あなたがPHPを使用して、サーバー上の単純なプロキシスクリプトを作ることができます！

あなたのJavaScriptがそのようにあなたが作るために$_SESSIONなどを利用することができる、あなたのPHPのプロキシが、さらにこの例をfancifyするに/proxy.php?eventid=123

ようなものになるだろう呼び出し、GETパラメータのイベントIDと何も含めて、このスクリプトを呼び出します。あなたのユーザーは訪問前に訪問者ページを持っていることを確かめ、ページロードまたはそれに類するものにつき1回のリクエストしか許さない。

サンプルを用意しましたが、ニーズに合わせて修正する必要があります。

<?php 

//Get event ID you want to request: 
$eventID = isset($_GET['eventid']) ? $_GET['eventid'] : FALSE; 

//Exit if no ID provided: 
if (!$eventID) { 
    exit('No ID Provided.'); 
} 

//Set your token: 
$token = '<YOUR_TOKEN_HERE>'; 

//Set url, %s will be replaced later: 
$url = 'https://www.eventbriteapi.com/v3/events/%s/?token=%s'; 

//Set url, pass in params: 
$request_uri = sprintf($url, $eventID, $token); 

//Try to fetch: 
$response = file_get_contents($request_uri); 

//Set content-type to application/json for the client to expect a JSON response: 
header('Content-type: application/json'); 

//Output the response and kill the scipt: 
exit($response);

資源： What is a Proxy (Wikipedia)

更新： はJavaScript：

$.getJSON('/proxy.php', {eventid: '<id_here>'}, function(response){ 
    console.log(response); 
    var content = "<h2>" + data.name.text + "</h2>" + data.description.html + 
    data.start.utc; 
    $("#eventbrite").append(content); 
});

出典

2017-09-03 16:15:43

ありがとう、これは非常に便利です。既存のvar設定では、URL = proxy.php？eventid = 123 ..のような外部URLの代わりにPHPスクリプトに接続するようにこれらのパラメータを変更しようとしていますが、そのスクリプトをさらに修正する必要があるかどうか疑問ですこの新しい設定では？ –

@DanielC私はいくつかのjavascriptのサンプルコードで私の答えを更新しました:) –

ワウありがとう！私が必要とする他のjavascriptはありますか？私のスクリプトをあなたのものに置き換えると、コンソールで 'データが定義されていません'というエラーが表示されます。 –

、なぜJSはに呼び出すPHPスクリプトに保存していませんか？

あなたが本当にそれをクライアントサイドに格納することを強く主張するなら、間違いなくそれを暗号化したいと思うでしょうが、私はそのことに頼りたくありません。

出典

2017-09-03 14:40:30 jconder

これは問題をサーバーに移すだけです。さて、攻撃者は、トークンを持つAPIではなく、サーバー上のPHPスクリプトにヒットしなければなりません。 – BenM

私はOPの目標が何であるかを別のものと考えています。 OPには他のAPIへの呼び出しに依存する公開APIがあり、現在は他のAPIトークンをクライアント側に保存していると私は考えています。それは不安です。サーバー上の公開APIスクリプトに移動すると、他のAPIトークンが安全になります。このAPIトークンは、OPsサーバー側APIへのユーザーアクセスを提供することであるという状況を理解しているようですが、そうであれば、そうでない場合はキーのクライアント側を保管することに何も問題ありませんクライアントごとに一意です（ただし、それは問題です）。 – jconder

APIキーを1つ保存し、必要に応じてリクエストします。あなたのサーバー側でさらに安全にするためには、トークン（あなたが設定したもの）が渡され、AJAXスプーフィング要求を防ぐために検証された場合にのみ、APIキーを返します。例えば

：

PHP

/** Change $_POST respectively to what you need. **/ 
if (isset($_POST['request_api_key_token']) && $_POST['request_api_key_token'] == 'your_value') { 
    /** Return your API key. **/ 
} else { 
    exit(header('HTTP/1.0 403 Forbidden')); 
}

出典

2017-09-03 14:44:59 Script47

これには苦労しています。 APIキーをサーバー上にPHPスクリプトで保存すると、上のJavascriptコードに入れられるトークンを取得する関数を呼び出しますが、ページに渡されたときにトークンが公開されることはありませんか？私が提供したサンプルコードが、提案されたソリューションで動作するように変更される方法の例がありますか？ –

JavascriptでのAPIトークンの受け渡し：セキュアにする方法

答えて

関連する問題