Comment sécuriser votre code frontal en le déplaçant vers le cloud

Nous examinons une approche moderne permettant de transférer en toute sécurité du code frontal vers le nuage en utilisant une approche sans serveur, en passant par deux exemples.

Le code frontal est intrinsèquement peu sûr. Oui, vous pouvez modifier votre code avec quelque chose comme UglifyJS ou utiliser un outil plus perfectionné d’obscurcissement comme Jscrambler mais à la fin de la journée, la nature publique de front-nd code signifie qu'il est accessible aux utilisateurs nuisibles.

La solution éprouvée à ce problème consiste à transférer du code sensible sur le serveur, ce qui fonctionne, mais peut prendre beaucoup de temps, en particulier dans les organisations où l'infrastructure côté serveur est une Désordre délicat de code Java, .NET et SAP qui a évolué au cours de nombreuses décennies.

Dans cet article, nous examinons une approche moderne de la migration du code frontal vers le nuage à l'aide d'un serveur sans serveur . approche. Nous allons examiner deux exemples: l'un dans lequel vous allez masquer une clé d'API tierce dans une fonction sans serveur et l'autre dans lequel vous déplacerez un algorithme JavaScript dans le cloud.

Commençons par là.

Scénario 1: Masquage d'une clé d'API tierce

Pour notre premier scénario, supposons que vous travaillez sur une application avec un écran indiquant le temps qu'il fait dans l'emplacement de l'utilisateur.

OpenWeatherMap un service qui vous permet d'obtenir des données météorologiques après En vous inscrivant pour une clé d’API. Comme OpenWeatherMap facture en fonction du nombre d’appels que vous effectuez sur son backend, vous ne voulez pas que votre clé d’API tombe entre de mauvaises mains – et vous ne souhaitez donc pas la renvoyer dans votre code côté client.

C’est un scénario dans lequel une approche sans serveur fonctionne très bien. En exploitant le cloud, vous peut rapidement et facilement déplacer cette fonctionnalité hors de votre code côté client. Vous pouvez non seulement déplacer votre clé vers un emplacement sûr, vous disposez également d'une fonction cloud sur un serveur que vous n'avez pas besoin de gérer et vous disposez d'une fonction que vous pouvez utiliser pour plusieurs applications.

Il existe un certain nombre de différents fournisseurs sans serveur, mais pour les exemples de cet article, nous utiliserons Progress Kinvey . Kinvey est une plate-forme sans serveur à haute productivité qui facilite la création de tout, des fonctions rapides sans serveur pour masquer les clés d'API aux scénarios plus avancés sans serveur que nous verrons plus loin dans cet article.

NOTE : Nouveau sur Kinvey? Créez un compte gratuit et suivez les étapes décrites dans cet article

Création de votre première fonction sans serveur

Après avoir créé un compte Kinvey et créé une application , vous verrez un tableau de bord qui ressemble à l’image ci-dessous. Commencez par cliquer sur «Points de terminaison personnalisés», qui est le moyen le plus simple pour démarrer sans serveur dans Kinvey.

Centre de développement de Kinvey .

À l'écran suivant, cliquez sur le bouton ADD AN ENDPOINT attribuez au terminal un nom «WeatherWrapper», sélectionnez Editeur de code puis cliquez sur . ] Bouton Créer un point d'arrivée .

nombreux SDK de Kinvey pour vous simplifier la vie. le code du kit de développement de Kinvey dont vous avez besoin doit atteindre le noeud final que vous venez de générer.

 const Kinvey = require ("kinvey-nativescript-sdk");

Kinvey.CustomEndpoint.execute ("WeatherWrapper", {})
  .then ((data) => {
    console.log (données); // Ceci enregistre votre clé API
  })

Maintenant que vous avez votre première première fonction sans serveur en place, allons un peu plus loin pour vous donner une idée de tout ce qui est possible dans ces fonctions sans serveur.

Appels HTTP dans des fonctions sans serveur

Pour que vos applications puissent faire une demande HTTP POST afin d’obtenir votre clé d’API OpenWeatherMap, faites ensuite une deuxième demande HTTP pour qu’elles touchent OpenWeatherMap pour obtenir des données météorologiques. Bien que cela fonctionne, vous pouvez simplifier les choses pour vos applications en plaçant tout l'appel à OpenWeatherMap dans votre fonction sans serveur.

Pour ce faire, il vous suffit de revenir à l'éditeur de points de terminaison personnalisés dans Kinvey, sélectionnez votre «WeatherWrapper» et remplacez le code actuel par le code suivant:

 function onRequest (demande, réponse, modules) {
  // Pour tester cela, vous pouvez vous inscrire pour un OpenWeatherMap gratuit.
  // Clé API sur https://openweathermap.org.
  var appId = "OPEN_WEATHER_MAP_KEY";
  var url = "https://api.openweathermap.org/data/2.5/weather?APPID=" + appId +
      "& units = imperial & lat =" + request.body.lat +
      "& lon =" + request.body.long;

  modules.request.get (url, fonction (err, résultat) {
    response.body = result;
    response.complete ();
  });
}

Ce code s'attend à ce qu'il y ait des paramètres lat et long dans le corps de la demande, formate les données si nécessaire, appelle directement l'API OpenWeatherMap, puis renvoie le résultat dans la réponse. body.

Pour tester votre fonction mise à jour, revenez à la console d'API Kinvey, puis sélectionnez «POST» et le noeud final «WeatherWrapper» dans les deux menus déroulants (exactement comme vous l'aviez fait la dernière fois que vous avez testé ce noeud final). Cette fois, incluez un corps de requête qui inclut les deux paramètres lat et longs comme indiqué dans l'image ci-dessous.

return Kinvey.CustomEndpoint.execute ("WeatherWrapper", {   lat: "42.733",   long: "-84.555" }). then (data => {   var weatherData = JSON.parse (données);   console.log (weatherData); });

Assez cool hein? Vous pouvez essayer ce code par vous-même dans cet exemple complet d'application météo qui utilise la fonction de cloud que vous venez d'écrire.

J'espère que cela vous donne une idée de ce qu'une approche sans serveur permet de rendre possible. Dans cet exemple, vous avez d'abord été en mesure de masquer une clé d'API tierce derrière une fonction sans serveur. Ensuite, vous avez étendu cette fonction pour qu'elle frappe directement le HTTP d'une API tierce, vous offrant ainsi une fonction utilitaire sécurisée que vous pouvez utiliser dans plusieurs applications.

Et nous commençons tout juste. Passons maintenant à un moyen plus avancé de passer des appels sans serveur.

Scénario 2: Déplacement d'un algorithme JavaScript

Pour notre deuxième scénario, supposons que vous travaillez pour une grande société financière et que vous soyez prêt à le dévoiler. une nouvelle application de budgétisation appelée BudgetScore.

// Suppose que les transactions sont un tableau. de transaction // données avec un montant numérique et une catégorie de chaîne. fonction Determine (transactions) {   score var = 100;   transactions.forEach ((transaction) => {     if (transaction.amount 5) {       score + = 10;     }     if (transaction.category === 'restaurant') {       score - = 5;     }   });   renvoie score.toString (); }

Bien que cette fonction soit simple, elle attend une collection de données de transaction, ce qui la rend déjà plus complexe que notre exemple précédent. Et dans le monde réel, il est probable qu'un algorithme comme celui-ci doit extraire des informations de différentes sources de données, et peut-être de différentes technologies.

Pour effectuer des tâches plus avancées sans serveur, Kinvey propose une fonctionnalité appelée Flex Services, qui sont essentiellement petites bibliothèques Node.js qui résident et fonctionnent dans l’infrastructure cloud de Kinvey. Voyons comment en configurer un pour votre application BudgetScore.

Création de votre premier service Flex

Dans Kinvey, vous créez et déployez des services Flex au moyen de la Kinvey CLI . Par conséquent, votre première étape consiste à installer le Kinvey CLI à partir de npm.

 npm install -g kinvey-cli

NOTE : Node.js doit être installé sur votre machine de développement pour que la commande ci-dessus fonctionne. Sinon, installez-le à partir du site Node.js .

À partir de là, créez un nouveau dossier contenant le code de votre nouveau service.

 mkdir BudgetScore
cd BudgetScore

Ensuite, utilisez la commande npm init pour créer un fichier de configuration package.json pour votre service. La commande vous posera un certain nombre de questions, mais pour l'instant, n'hésitez pas à accepter les valeurs par défaut.

 npm init

Ensuite, utilisez la commande ci-dessous pour installer le kit de développement Kinvey Flex, qui contient le code nécessaire à l’enregistrement de ce service sur la console dorsale de Kinvey.

 npm install --save kinvey-flex-sdk

Enfin, créez un fichier index.js et donnez-lui le code suivant, qui renvoie un nombre codé en dur sous forme de chaîne.

 const sdk = require ('kinvey-flex-sdk' )

sdk.service ((err, flex) => {
  fonction getBudgetScore (contexte, complet, modules) {
    complete (). setBody ({
      score: '80'
    }).terminé();
  }

  flex.functions.register ('getBudgetScore', getBudgetScore);
});

La plupart du code que vous voyez ici est le passe-partout pour tout service Flex que vous écrivez avec Kinvey. L'essentiel à noter ici est l'appel flex.functions.register ('getBudgetScore') car c'est ce qui enregistre le service avec le backend de Kinvey.

CONSEIL : Vous pouvez en savoir plus sur Les API de service Flex Kinvey sur le Kinvey DevCenter .

Déploiement de votre service

Maintenant que vous avez le code standard, vous devez ensuite enregistrer le service Flex dans le backend de Kinvey Console. 19659003] Pour ce faire, dans votre console Kinvey sélectionnez l'onglet Catalogue de services en haut de la page, puis cliquez sur le bouton Ajouter un service . 19659003] [19459] Test facile des services Kinvey Flex pour aide à la création d'un environnement de test local. Cela deviendra plus nécessaire à mesure que vous développerez des fonctions sans serveur plus avancées.

Le déploiement prend environ une minute et vous pouvez vérifier son statut à l'aide de la commande Kinvey flex status (recherchez un deploymentStatus de COMPLETE ).

Une fois l'opération terminée, voyons comment utiliser ce nouveau service Flex dans une application.

Utilisation de votre service

Procédure pour utiliser un Le service Flex dans Kinvey correspond presque exactement aux scénarios de logique métier que vous avez utilisés dans le premier scénario de cet article.

Dans la console Web Kinvey, vous souhaiterez revenir au menu Custom Endpoints et à nouveau cliquer sur le bouton ADD AN ENDPOINT .

CustomEndpoint.execute ("BudgetScore", {}, {})   .then ((data) => {       console.log (données);   })

Mais prenons un peu de recul et voyons la situation dans son ensemble. En quelques minutes à peine, vous avez créé une bibliothèque de nœuds sécurisée, installée dans le nuage, qui vous offre toutes sortes de possibilités. En premier lieu, vous avez satisfait à l'exigence de déplacer votre code confidentiel vers le nuage sans avoir à le réécrire dans un langage côté serveur plus traditionnel tel que .NET ou Java.

Mais ce n'est que le début. Avec Kinvey Flex Services, vous disposez d’un environnement nodal entièrement fonctionnel, ce qui signifie que vous pouvez installer des modules npm, réutiliser le code JavaScript et architecturer vos services comme vous le souhaitez. Lorsque vous avez terminé, vous pouvez déployer et gérer votre service en dehors de vos applications, ce qui signifie que vous pouvez mettre à jour vos services de production sans avoir à redéployer vos applications.

Et bien plus encore! Avec un service Kinvey Flex, vous pouvez accéder à un certain nombre d’autres fonctionnalités de Kinvey, telles que sa capacité à accéder aux données de différents systèmes. Par exemple, une fois que vous vous êtes connecté à vos données existantes voici un service Flex qui lit les données de transaction et utilise l'algorithme décrit plus haut dans cet article:

 const sdk = require ('kinvey-flex-sdk ');

fonction getTransactions (modules) {
  renvoyer une nouvelle promesse ((résoudre, rejeter) => {
    const store = modules.dataStore ({useUserContext: false});
    const collection = store.collection ('Transactions');
    requête const = new modules.Query ();

    collection.find (query, (err, result)) => {
      si (err) {
        rejeter (err);
      } autre {
        résoudre (résultat);
      }
    });
  });
}

fonction Determine (transactions) {
  score var = 100;
  transactions.forEach ((transaction) => {
    if (transaction.amount  5) {
      score + = 10;
    }
    if (transaction.category === "restaurant") {
      score - = 5;
    }
  });
  renvoie score.toString ();
}

sdk.service ((err, flex) => {
  fonction getBudgetScore (contexte, complet, modules) {
    getTransactions (modules) .then ((transactions) => {
      complete (). setBody ({
        score: Determine (transactions)
      }).terminé();
    }). catch ((err) => {
      complete (). setBody (nouvelle erreur (err)). runtimeError (). done ();
    });
  }

  flex.functions.register ('getBudgetScore', getBudgetScore);
});

Dans l’ensemble, Kinvey Flex Services permet de sécuriser votre code source dans le cloud, tout en vous offrant la possibilité d’en faire beaucoup plus. Pour voir le service Flex ci-dessus en action, consultez cette application complète de BudgetScore .

CONSEIL : Pour avoir une idée de ce qui est possible, voir l'intro de Brian Rinaldi aux Services Flex ainsi que sa collection d'exemples de services flexibles sur GitHub . Vous pouvez également en savoir plus sur la sécurité dans Kinvey avec cette vue d'ensemble de la sécurité de la plate-forme Kinvey .

Conclusion

Il n'a jamais été aussi facile de sécuriser votre code frontal en le déplaçant vers le cloud. Les fournisseurs sans serveur facilitent non seulement le déplacement de votre code, mais également l'exploitation de puissantes fonctionnalités dorsales, telles que la possibilité de faire appel à des API tierces.

Le passage à une approche sans serveur vous offre un certain nombre d'avantages supplémentaires, tels que avoir à vous soucier de la maintenance des serveurs, ce qui vous donne la possibilité d'accéder à votre code dans des applications et des plates-formes, et de le déployer indépendamment des déploiements d'applications.

Kinvey est une plate-forme sans serveur à haute productivité, conçue pour accélérer votre développement. de nombreuses façons différentes. Pour essayer sans serveur avec Kinvey, commencez dès aujourd'hui à l'adresse progress.com/kinvey .