dttwois6098
2017-09-03 14:37
浏览 51

在Javascript中传递API令牌:如何保持安全

The following script queries information from an API and outputs it into the HTML, using simple AJAX and Javascript.

The TOKEN for the API is exposed in the Javascript. In my opinion this is not safe because anybody who can access the page can see the token. IF this method is not safe, is there some additional method to hide the token? Ideally I would like to use Javascript, HTML, and PHP if needed. The existing script is very simple and so I'm wondering if there is a relatively simple way to protect the token.. rather than having to add a lot of additional new code or methods.

<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>

图片转代码服务由CSDN问答提供 功能建议

以下脚本使用简单的AJAX和Javascript从API查询信息并将其输出到HTML中。

API的TOKEN在Javascript中公开。 在我看来,这是不安全的,因为任何可以访问该页面的人都可以看到令牌。 如果这种方法不安全,是否有一些隐藏令牌的额外方法? 理想情况下,如果需要,我想使用Javascript,HTML和PHP。 现有的脚本非常简单,所以我想知道是否有一种相对简单的方法来保护令牌......而不是必须添加许多额外的新代码或方法。

  &lt; html&gt; 
&lt; body&gt; 
 
&lt; script src =“http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”&gt;&lt;  ; / script&gt; 
 
&lt; script&gt; 
 var settings = {
“async”:true,
“crossDomain”:true,
“url”:“https://www.eventbriteapi.com/  v3 / events / eventid /?
token = TOKEN“,
”方法“:”GET“,
”标题“:{} 
} 
 
 $ .ajax(设置).done(函数(数据)  ){
 console.log(data); 
 var content =“&lt; h2&gt;”+ data.name.text +“&lt; / h2&gt;”+ data.description.html + 
data.start.utc;  
 $(“#eventbrite”)。append(content); 
}); 
&lt; / script&gt; 
 
&lt; div id =“eventbrite”&gt;&lt; / div&gt; 
 
&lt; / 正文&gt; 
&lt; / html&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douchujian8124 2017-09-03 16:15
    已采纳

    You can make a simple proxy script on your server using PHP!

    Your JavaScript will then call this script, including the event ID and nothing else in the GET parameter, so calling your PHP Proxy would be something like /proxy.php?eventid=123

    To further fancify this example you could utilize $_SESSION etc to make sure your user has visiter the page before visit and only allow 1 request per pageload or something similar.

    I have prepared a sample, but you have to modify it to fit your needs!

    <?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);
    

    Resources: What is a Proxy (Wikipedia)

    Update: 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);
    });
    
    打赏 评论
  • dswu26846 2017-09-03 14:40

    You probably should not store the API key client-side, why not store it in the PHP scripts that the JS calls to?

    If you really insist on storing it client-side you'll definitely want to encrypt it but I wouldn't want to rely on that.

    打赏 评论
  • dongzhao4036 2017-09-03 14:44

    Store your API key one the sever and make requests to it when you need it. To make it even more secure on your server side only return the API key if a token (which you've set) is passed and validated to prevent spoof AJAX requests.

    For example:

    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'));
    }
    
    打赏 评论

相关推荐 更多相似问题