Intégrer l'intégrité des sous-ressources (SRI)

Contexte

Pour améliorer la sécurité de votre site, vous pouvez intégrer le SRI (SubResource Integrity).

Il correspond à une fonction de sécurité pour vérifier l'intégrité des fichiers externes, comme lors du chargement de nos librairies JS.

Plus d'informations

Fonctionnement

Le fonctionnement se déroule en 2 étapes :

Appelez une URL gérée par la plateforme pour récupérer le hash de la ressource correspondante :

Librairie JavaScript	URL SRI
Formulaire SmartForm (kr-payment-form.min.js)	https://static.lyra.com/static/js/krypton-client/V4.0/version.json
Authentification du payeur (kr-authenticate.umd.js)	https://static.lyra.com/static/js/authenticate-client/V1.0/version.json

Intégrez ce hash dans la balise script qui charge la librairie JavaScript sur votre page de paiement.

Hash

Les principales caractéristiques du hash sont les suivantes :

Dynamique car sa valeur varie à chaque nouvelle version de la librairie.
Base d'encodage : SHA-384.

En cas d'erreur de hash, la fenêtre modale (smartForm ou page d'authentification) ne se charge pas. Un message d'erreur s'affiche dans la console de navigation pour vous avertir de ce blocage.

Intégration

Intégrer le SRI en suivant ces étapes :

Appelez l'URL correspondant à la ressource que vous souhaitez charger sur votre page de paiement :

Librairie JavaScript	URL SRI
Formulaire SmartForm (kr-payment-form.min.js)	https://static.lyra.com/static/js/krypton-client/V4.0/version.json
Authentification du payeur (kr-authenticate.umd.js)	https://static.lyra.com/static/js/authenticate-client/V1.0/version.json

Récupérez le hash présent dans la réponse :

Dans cet exemple, la valeur du hash correspond à sha384-m2TqTgecvuLe1k+/eCJg3(...)TsYGcJfc5RMWYa/.

{
  "version": "V4.14",
  "build": "87",
  "target": "V4.0",
  "integrity": {
    "kr-payment-form.min.js": "sha384-m2TqTgecvuLe1k+/eCJg3(...)TsYGcJfc5RMWYa/"
  },
  "webservices": "V4"

Intégrez dynamiquement le hash dans le header de votre page. Dans la balise script lors du chargement de notre librairie JS, ajoutez le hash dans l'attribut integrity.

Exemple : Créez une variable sha_384 avec la valeur dynamique du hash.

    <script>
      src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
      integrity="sha_384"
      crossorigin="anonymous"
      (...)
      </script>

Vous pouvez utiliser une librairie comme cURL ou une API comme fetch pour réaliser cette intégration.

Exemple avec cURL

Appeler l'URL et récupérer le hash dans une variable. Dans cet exemple, le nom de la variable est sha_384.

<?php
// create a new cURL resource
$url = "/version.json";

// Initiate a cURL session.
$ch = curl_init();  
// Get page content
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//Enter the URL and pass it to the variable.
curl_setopt($ch, CURLOPT_URL, $url);
//Disable certificate verification if HTTPS
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//Execute the query
$result = curl_exec($ch);

//Encode in JSON
$res = json_decode($result, true);

// Get the hash
$sha_384 = $res["integrity"]["kr-payment-form.min.js"];

//Close the cURL session
 curl_close($ch);

(...)
?>

Intégrer la variable (sha_384) dans le HTML dans l'attribut integrity lors du chargement de notre librairie JS.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script src="/stable/kr-payment-form.min.js"
  integrity="<?php echo $sha_384; ?>"
  crossorigin="anonymous"
  (...)
  >
  </script>
  <link rel="stylesheet" href="/ext/neon-reset.min.css">
  <script
  src="/ext/neon.js">
 </script>
  <script type="text/javascript">
  (...)
  </head>
  <body>
  (...)
  </body>
  </html>

Catégories

Tags

Intégrer l'intégrité des sous-ressources (SRI)

Contexte

Fonctionnement

Hash

Intégration