Passer un jeton d'API en Javascript: comment le garder en sécurité

Le script suivant interroge les informations d'une API et les affiche dans le HTML, en utilisant simplement AJAX et Javascript.Passer un jeton d'API en Javascript: comment le garder en sécurité

Le TOKEN pour l'API est exposé dans le Javascript. À mon avis, ce n'est pas sûr, car quiconque peut accéder à la page peut voir le jeton. SI cette méthode n'est pas sûre, existe-t-il une méthode supplémentaire pour cacher le jeton? Idéalement, je voudrais utiliser Javascript, HTML et PHP si nécessaire. Le script existant est très simple et je me demande s'il existe une façon relativement simple de protéger le jeton ... plutôt que d'avoir à ajouter beaucoup de nouveau code ou de nouvelles méthodes.

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

Source

2017-09-03 Daniel C

définitivement son pas en sécurité d'appeler un api privé de votre client, au lieu vous devez appeler 'votre server', et votre serveur peut alors appeler l'API 'eventbrite'. – webdeb

créer un script php sur votre site qui gère l'appel réel sur le site distant et utiliser ajax pour envoyer le e demande à votre script PHP local (donc il agit plus ou moins comme un proxy) – RamRaider

Non seulement votre clé "secrète" ne peut pas être secrète dans le navigateur, mais en plus, vous ne pouvez même pas faire une croix demande de domaine. La seule solution à votre problème est d'utiliser le serveur, pas le navigateur. –

Vous pouvez faire un script simple proxy sur votre serveur en utilisant PHP!

Votre JavaScript appellera alors ce script, y compris l'ID d'événement et rien d'autre dans le paramètre GET, afin d'appeler votre PHP Proxy serait quelque chose comme /proxy.php?eventid=123

Pour fancify encore cet exemple, vous pouvez utiliser $_SESSION etc pour faire Assurez-vous que votre utilisateur a visité la page avant la visite et n'autorise que 1 demande par pageload ou quelque chose de similaire.

J'ai préparé un échantillon, mais vous devez le modifier pour répondre à vos besoins!

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

Ressources: What is a Proxy (Wikipedia)

Mise à jour: 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); 
});

Source

2017-09-03 16:15:43

Merci, c'est très utile. Pour les paramètres var existants, j'essaye de modifier ces paramètres pour me connecter au script PHP au lieu de l'URL externe, comme URL = proxy.php? Eventid = 123 .. mais je me demande si ce script doit aussi être modifié pour fonctionner avec cette nouvelle configuration? –

@DanielC j'ai mis à jour ma réponse avec un exemple de code de javascript :) –

wow merci! Y a-t-il d'autres javascript dont j'ai besoin? Quand je remplace mon script par le vôtre, j'obtiens une erreur dans la console: 'data is not defined' –

Vous ne devriez probablement pas stocker la clé API côté client, pourquoi ne pas la stocker dans les scripts PHP auxquels le JS appelle?

Si vous insistez vraiment pour le stocker côté client, vous aurez certainement envie de crypter, mais je ne voudrais pas compter sur cela.

Source

2017-09-03 14:40:30 jconder

Cela déplace simplement le problème sur le serveur. Maintenant, tout ce qu'un attaquant doit faire est de frapper le script PHP sur le serveur, plutôt que l'API avec le jeton. – BenM

Je pense que nous avons différentes prises sur ce que l'objectif OP est. Je suppose que OP a une API orientée public qui repose sur les appels à une autre API, et il stocke actuellement les autres jetons API côté client.C'est dangereux. S'il le place dans son script d'API public sur le serveur, le jeton d'autres API est désormais sécurisé. Il semble que vous comprenez la situation que ce jeton API est de fournir à l'utilisateur l'accès à l'API côté serveur OP, mais si tel est le cas, il n'y a rien de mal à stocker le côté client clé à moins qu'il ne soit pas unique par client (mais alors c'est le problème.) – jconder

Stockez votre clé d'API un serveur et faites-lui des requêtes lorsque vous en avez besoin. Pour le rendre encore plus sécurisé côté serveur, ne renvoyez la clé API que si un jeton (que vous avez défini) est passé et validé pour éviter les requêtes AJAX frauduleuses.

Par exemple:

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

Source

2017-09-03 14:44:59 Script47

Je vais avoir du mal à suivre ça. Si je stocke la clé API sur un serveur, dans un script PHP, alors j'appelle une fonction pour que le jeton mette le code Javascript au-dessus, cela ne conduit-il pas au jeton quand il est passé à la page? Avez-vous un exemple de la façon dont l'exemple de code que j'ai fourni serait modifié pour fonctionner avec votre solution proposée? –

Passer un jeton d'API en Javascript: comment le garder en sécurité

Répondre

Questions connexes