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>
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);
});
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.
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'));
}