Assurer la sécurité de l'importation de variables React

Question

Si j'importe un objet dans un fichier React pour utiliser certaines de ses valeurs, cela provoquera-t-il des problèmes de sécurité ?

Par exemple, si j'ai un objet comme celui-ci :

var data = {
     'name': 'Adam',
     'id': 12345,
     'secret': 98765
}

Et je l'importe comme ceci :

import { data } from 'db.js';
 
function Index(){
     return(
          <>
             {data.name}
             {data.id}
          </>
     );
}

Est-ce que je créerais un scénario dans lequel quelqu'un pourrait appeler et afficher la valeur « secrète » à l'aide de l'objet « données » importé, ou React empêcherait-il que cela se produise ?

Answer 1

Vous devez traiter tout code que vous envoyez à la machine client comme public. Tout développeur suffisamment dévoué peut éventuellement faire de l'ingénierie inverse (bien que la taille et la minification/obscurcissement du code puissent augmenter la difficulté).

La seule façon de garder secret un secret est de ne pas l'envoyer au client en premier lieu - cela peut être réalisé en effectuant tout le travail de rendu sur le serveur, puis en envoyant le balisage HTML résultant au client. (Cela étant dit, en raison de la plus grande flexibilité des composants rendus côté client, il est souvent préférable de ne pas inclure des valeurs sensibles dans le bundle du client.)