Fermer

janvier 29, 2019

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.

 Application météo "title =" Application météo "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Pour obtenir ces données, vous utilisez une API fournie par <a href= 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.

 Kinvey Dashboard "title =" Kinvey Dashboard "data-openoriginalimageonclick =" true "/> </a> </p>
<blockquote>
<p><strong> CONSEIL </strong>: Kinvey fait bien plus que fonctionner sans serveur: vous pouvez stocker des fichiers et des données, vous connecter à des fournisseurs de données et d'authentification existants et même envoyer des notifications push. En savoir plus sur le <a href= 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 .

 Kinvey Dashboard 2 "title =" Kinvey Dashboard 2 "data-openoriginalimageonclick =" true "/> </a> </p>
<blockquote>
<p><strong> NOTE </strong> Le point de terminaison personnalisé Kinvey est un point de terminaison HTTP POST. Vous allez essayer ceci momentanément. </p>
</blockquote>
<p> Une fois ces opérations terminées, vous verrez l'éditeur de logique métier de Kinvey, sur lequel vous écrivez la fonction sans serveur que vous utiliserez dans vos applications. </p>
<p> <a href=  Editeur de logique logicielle "title =" Editeur de logique logicielle "data-openoriginalimageonclick =" true "/> </a> </p>
<p> La fonction sans serveur par défaut est un morceau de code standard qui renvoie une réponse vide. Pour notre exemple, scénario Si vous souhaitez inclure une clé API OpenWeatherMap dans votre réponse, copiez le code ci-dessous, collez-le dans l'éditeur de logique métier de Kinvey, puis cliquez sur le bouton <strong> Save </strong> (vous pouvez utiliser un espace réservé pour la clé d'API pour l'instant.) </p>
<pre><code> fonction onRequest (demande, réponse, modules) {
  response.body = "YOUR_API_KEY_HERE";
  response.complete ();
}
</code></pre>
<p> Avec ce code en place, il vous suffit d'envoyer une demande HTTP POST à ​​votre nouveau terminal avec les en-têtes appropriés. Le meilleur moyen de le faire est dans la console API Kinvey, à laquelle vous pouvez accéder en utilisant le lien ci-dessous. </p>
<p> <a href=  Console API Kinvey "title =" Console API Kinvey "data-openoriginalimageonclick =" true " /> </a> </p>
<p> Une fois dans la console, définissez le premier menu déroulant sur POST et le second menu déroulant sur le point de terminaison «WeatherWrapper» que vous venez de créer. </p>
<p> <a href=  API Console "title = "API Console" data-openoriginalimageonclick = "true" /> </a> </p>
<p> Ensuite, cliquez sur le bouton bleu <strong> SEND </strong> et faites défiler vers le bas pour afficher le résultat. Si tout s'est bien passé, vous devriez voir votre clé API d'espace réservé. </p>
<p> <a href=  Résultat clé API "title =" Résultat clé API "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Et c'est En un rien de temps, vous avez créé une fonction sans serveur qui peut renvoyer une clé d'API tierce que vous pouvez réutiliser dans plusieurs applications. </p>
<p> En ce qui concerne l'intégration de cette fonctionnalité dans vos applications, vous Vous pouvez envoyer une demande POST manuellement, à l’aide du client HTTP ou des API de votre choix, ou utiliser l’un des nombreux <a href= 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.

 Test de la console météo de l'API "title = "Test de la météo de la console d'API" data-openoriginalimageonclick = "true" /> </a> </p>
<p> Lorsque vous envoyez cette demande, les données renvoyées par OpenWeatherMap ressemblent à celles ci-dessous. </p>
<p> <a href=  OpenWeatherMap Data "title =" OpenWeatherMap Data "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Pour intégrer cette nouvelle fonctionnalité dans vos applications, il vous suffit de modifier votre appel Kinvey SDK existant pour le transmettre <code> lat </code> et <code> long </code> pour lesquels vous souhaitez récupérer des données météorologiques. Par exemple, voici comment obtenir des données météorologiques pour ma ville natale. </p>
<pre><code class= 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.

 BudgetScore "title =" BudgetScore "data-openoriginalimageonclick =" true "/> </a> </p>
<p> L'élément le plus important de BudgetScore est un algorithme Le code qui détermine cette note est une chose que votre entreprise ne veut pas que quiconque mette la main dessus, et que vous souhaitiez donc transférer sur un serveur. </p>
<p> Dans la réalité, l'algorithme qui détermine ce score serait probablement très complexe, mais pour simplifier les choses, supposons que le code permettant de déterminer le score ressemble à ceci: </p>
<pre><code class= // 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]  Ajouter un service "title =" Ajouter un service "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Ensuite, sélectionnez <strong> Flex </strong>puis <strong> Flex Durée des services </strong>. </p>
<p> <a href=  flex-runtime "title =" flex-runtime "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Après cela, gi Attribuez à votre service un nom (comme "BudgetScore") et définissez le service sur une application existante. Appuyez deux fois sur le bouton <strong> SAVE </strong> (une fois dans la boîte de dialogue, une fois sur l'écran suivant) pour terminer la création de votre service. </p>
<p> <a href=  Service de noms "title =" Service de noms "data-openoriginalimageonclick = "true" /> </a> </p>
<p> Avec le service créé dans la console Web, revenez sur votre terminal ou à l'invite de commande et utilisez la commande <code> kinvey flex init </code>. </p>
<pre><code> kinvey flex init
</code></pre>
<p> La commande vous invitera à poser quelques questions pour connecter le service que vous développez localement à celui que vous avez créé dans la console Web Kinvey. Pour les réponses rapides, sélectionnez <strong> APP </strong>l'application à laquelle vous avez associé le service dans la console Web et <strong> BudgetScore </strong>. </p>
<p> <a href=  Invites "title =" Invites "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Une fois la connexion établie, exécutez la prochaine opération <code>. Kinvey flex deploy </code> pour déployer la version actuelle de votre service Flex local. </p>
<p> <a href= [19459] Flex Deploy "title =" Flex Deploy "data-openoriginalimageonclick =" true "/> </a> </p>
<blockquote>
<p><strong> CONSEIL </strong>: Consultez l'article de Brian Rinaldi sur <a href= 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 .

 Points de terminaison 2 "title =" Points de terminaison 2 "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Nommez le point de terminaison. de «BudgetScore», sélectionnez <strong> Microservice </strong>puis cliquez sur le bouton <strong> CREER UN POINT D'ENVOI </strong>. </p>
<p> <a href=  Dialogue BudgetScore "title =" Dialogue BudgetScore "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Ensuite, sélectionnez votre <strong> BudgetScore </strong> ] service, l'environnement <strong> Development </strong> et le gestionnaire <code> getBudgetScore () </code>. (C'est le nom de la fonction que vous avez transmise au <code> flex.functions.register </code> dans le code de votre service.) </p>
<p> <a href=  BudgetScore Next "title =" BudgetScore Next "data-openoriginalimageonclick = "true" /> </a> </p>
<p> Et voilà, vous êtes prêt à commencer! Pour le tester, retournez dans la console d'API Kinvey, sélectionnez POST, sélectionnez votre nouveau point de terminaison «BudgetScore», puis cliquez sur le bouton <strong> SEND </strong> Si tout va bien, vous devriez voir votre valeur codée en dur de <code> "80" </code> dans le corps de la réponse. </p>
<p> <a href=  API Console Budget "title =" API Console Budget "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Pour utiliser votre nouveau service Flex dans une application, vous avez à nouveau plusieurs options. Comme dans l'exemple précédent, vous pouvez à nouveau envoyer manuellement des demandes de publication HTTP dans votre application, à l'aide des points de terminaison et des en-têtes spécifiés dans la console de l'API Kinvey. Vous pouvez également utiliser l'un des kits de développement logiciel Kinvey pour vous simplifier la vie. Par exemple, le code suivant utilise le kit de développement logiciel Kinvey pour atteindre votre nouveau point de terminaison. </p>
<pre><code class= 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 .




Source link