Lliurament de dades PHP a JavaScript: evitant la visualització del navegador

Passant dades de manera eficient de PHP a JavaScript

Una de les tasques més habituals en el desenvolupament web és enviar dades des del servidor al client sense mostrar-les directament a l'usuari. Això és especialment útil quan es maneja informació sensible o s'estructura una resposta que només ha d'interpretar JavaScript. Molts desenvolupadors es troben amb aquest repte mentre treballen amb PHP i JavaScript junts.

En aquest escenari, utilitzem XMLHttpRequest per enviar dades d'usuari al servidor. A continuació, el servidor processa la sol·licitud, cerca a la base de dades i recupera les dades necessàries. Tanmateix, tornar aquestes dades a JavaScript sense exposar-les al navegador és complicat.

És possible enviar les dades de tornada de diverses maneres, com ara utilitzant galetes o inserint-les dins de JavaScript o HTML. Però cadascun d'aquests mètodes té inconvenients, especialment quan s'implica XMLHttpRequest, que sovint provoca problemes com la visualització no desitjada de dades o el maneig de dades incomplet.

En aquest article s'explorarà un enfocament per enviar de manera segura les dades recuperades de PHP a JavaScript, assegurant-se que les dades estiguin ocultes a la vista de l'usuari però accessibles perquè JavaScript les manipuli.

Passant dades de forma segura de PHP a JavaScript mitjançant XMLHttpRequest

La solució proporcionada anteriorment mostra com passar dades d'un backend PHP a JavaScript sense mostrar-les directament al navegador. Això és especialment útil quan es gestionen dades que només haurien d'estar disponibles per a JavaScript per a un processament posterior, com ara la representació de contingut dinàmic o la gestió de les interaccions dels usuaris. La clau aquí és utilitzar el XMLHttpRequest objecte per enviar i rebre dades de manera asíncrona. Això permet que el client sol·liciti dades al servidor en segon pla, evitant una recàrrega de la pàgina i assegurant que les dades sensibles no s'exposin directament a l'usuari en HTML.

L'script PHP es connecta a la base de dades MySQL i recupera la informació necessària, que després es codifica en un format JSON mitjançant el json_encode funció. JSON és ideal per a aquest cas d'ús perquè és lleuger i fàcilment analitzat per JavaScript. La resposta JSON es torna a enviar a l'script del costat del client, que escolta la resposta del servidor mitjançant el en un canvi d'estat gestor d'esdeveniments. Les dades es capturen i es processen un cop el servidor indica que la resposta està preparada (quan el readyState arriba a 4 i l'estat és 200).

Una vegada que JavaScript rep les dades, el JSON.parse() El mètode s'utilitza per convertir la cadena JSON en un objecte JavaScript. Aquest pas és fonamental perquè permet manipular les dades dins de l'script, sense necessitat de mostrar-les a la pàgina o exposar-les a l'usuari. La flexibilitat de JavaScript permet als desenvolupadors utilitzar les dades de diverses maneres, com ara actualitzar el DOM, gestionar les interaccions dels usuaris o fer sol·licituds asíncrones addicionals basades en les dades rebudes.

En l'enfocament alternatiu que utilitza l'API Fetch, s'utilitza un mètode més modern i simplificat per fer sol·licituds HTTP. L'API Fetch es basa en promeses, cosa que facilita el treball amb operacions asíncrones. Proporciona una sintaxi més neta i llegible en comparació amb XMLHttpRequest. Ambdós enfocaments, però, aconsegueixen el mateix objectiu: assegurar-se que JavaScript processa i gestiona les dades de manera segura sense que es mostrin al navegador. A més, la gestió d'errors està integrada per assegurar-se que si sorgeixen problemes (per exemple, una connexió fallida del servidor o dades no vàlides), es retornin i registren els missatges d'error adequats.

// Frontend: HTML + JavaScript code
<button id="fetchDataBtn">Fetch Data</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_data.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data); // Data is available here, not visible to the user
      }
    };
    xhr.send('request=true');
  });
</script>

<?php
// Backend: PHP + MySQL code
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  // Example: Fetch data from database
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

// Frontend: HTML + JavaScript code using Fetch API
<button id="fetchDataBtn">Fetch Data with Fetch API</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    fetch('fetch_data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'request=true'
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
</script>

<?php
// Backend: PHP + MySQL code (same as previous example)
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

Transferència de dades efectiva entre PHP i JavaScript mitjançant AJAX

Un altre enfocament per enviar de manera segura dades de PHP a JavaScript sense mostrar-los al navegador és utilitzar AJAX en combinació amb la gestió de sessions. En lloc de fer ressò de dades directament o incrustar-les a JavaScript, un mètode més segur és emmagatzemar les dades temporalment en una sessió de PHP. Això garanteix que les dades sensibles no estiguin directament exposades i que JavaScript puguin recuperar-les segons sigui necessari.

En aquest escenari, quan un usuari envia una XMLHttpRequest, el servidor processa la sol·licitud, recupera les dades necessàries i les emmagatzema en una sessió. Aleshores, el JavaScript del costat del client pot sol·licitar aquestes dades sense representar-les en HTML. Això no només millora la seguretat, sinó que també evita problemes de format innecessaris que sovint es troben en incrustar dades en HTML o JavaScript directament. Les sessions són especialment útils per gestionar conjunts de dades més grans o quan les dades han de persistir en diverses sol·licituds.

Un altre aspecte crític és garantir l'adequació maneig d'errors i validació durant el procés de transferència de dades. Mitjançant la implementació de comprovacions tant al costat del servidor com al costat del client, els desenvolupadors poden assegurar-se que les dades retornades per PHP són precises i en el format esperat. A més, utilitzant eines com Fitxes CSRF o la gestió de sessions garanteix que només les sol·licituds autoritzades accedeixen a les dades sensibles, fent que aquest enfocament sigui més segur i fiable.