PHP andmete edastamine JavaScripti: brauseri kuvamise vältimine

Andmete tõhus edastamine PHP-st JavaScripti

Üks levinumaid ülesandeid veebiarenduses on andmete saatmine serverist kliendile ilma neid otse kasutajale kuvamata. See on eriti kasulik tundliku teabe käsitlemisel või vastuse struktureerimisel, mida ainult JavaScript peaks tõlgendama. Paljud arendajad puutuvad selle väljakutsega kokku, töötades koos PHP ja JavaScriptiga.

Selle stsenaariumi korral kasutame kasutajaandmete serverisse saatmiseks XMLHttpRequesti. Seejärel töötleb server päringu, otsib andmebaasist ja hangib vajalikud andmed. Nende andmete tagasisaatmine JavaScripti ilma neid brauseris avaldamata on aga keeruline.

Andmeid on võimalik tagasi saata erinevatel viisidel, näiteks kasutades küpsiseid või manustades need JavaScripti või HTML-i. Kuid kõigil neil meetoditel on puudusi, eriti kui tegemist on XMLHttpRequestiga, mis sageli põhjustab selliseid probleeme nagu andmete tahtmatu kuvamine või mittetäielik andmetöötlus.

See artikkel uurib lähenemist, kuidas PHP-st saadud andmed turvaliselt saata JavaScripti, tagades, et andmed on kasutaja vaate eest peidetud, kuid JavaScripti jaoks juurdepääsetavad.

Andmete turvaline edastamine PHP-st JavaScripti XMLHttpRequesti abil

Ülaltoodud lahendus näitab, kuidas edastada andmeid PHP taustaprogrammist JavaScripti ilma neid otse brauseris kuvamata. See on eriti kasulik siis, kui käsitlete andmeid, mis peaksid olema edasiseks töötlemiseks saadaval ainult JavaScriptile (nt dünaamilise sisu renderdamiseks või kasutaja interaktsioonide haldamiseks). Võti on siin kasutada XMLHttpRequest vastulause andmete asünkroonsele saatmisele ja vastuvõtmisele. See võimaldab kliendil küsida taustal serverilt andmeid, vältides lehe uuesti laadimist ja tagades, et tundlikke andmeid ei avaldata kasutajale otse HTML-is.

PHP-skript loob ühenduse MySQL-i andmebaasiga ja hangib vajaliku teabe, mis seejärel kodeeritakse JSON-vormingusse, kasutades json_encode funktsiooni. JSON on selle kasutusjuhtumi jaoks ideaalne, kuna see on kerge ja JavaScripti abil hõlpsasti sõelutav. JSON-i vastus saadetakse tagasi kliendipoolsele skriptile, mis kuulab serveri vastust kasutades valmisoleku muutmisel sündmuste käitleja. Andmed kogutakse ja töödeldakse, kui server annab märku, et vastus on valmis (kui readyState jõuab 4-ni ja olek on 200).

Kui JavaScript on andmed vastu võtnud, JSON.parse() meetodit kasutatakse JSON-stringi teisendamiseks JavaScripti objektiks. See samm on kriitilise tähtsusega, kuna võimaldab skriptis andmetega manipuleerida, ilma et oleks vaja neid lehel kuvada või kasutajale avaldada. JavaScripti paindlikkus võimaldab arendajatel kasutada andmeid mitmel viisil, näiteks DOM-i värskendamine, kasutajate interaktsioonide käsitlemine või saadud andmete põhjal täiendavate asünkroonsete päringute tegemine.

Alternatiivses lähenemisviisis, mis kasutab Fetch API-t, kasutatakse HTTP-päringute tegemiseks kaasaegsemat ja lihtsustatud meetodit. Fetch API on lubaduspõhine, mis muudab asünkroonsete operatsioonidega töötamise lihtsamaks. Võrreldes sellega pakub see puhtamat ja loetavamat süntaksit XMLHttpRequest. Mõlemad lähenemisviisid saavutavad aga sama eesmärgi: tagada andmete turvaline töötlemine ja käitlemine JavaScripti abil ilma neid brauseris renderdamata. Lisaks on sisseehitatud veakäsitlus, mis tagab, et probleemide ilmnemisel (nt serveriühenduse ebaõnnestumine või kehtetud andmed) tagastatakse ja logitakse vastavad veateated.

// 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();
}
?>

Tõhus andmeedastus PHP ja JavaScripti vahel AJAXi abil

Teine viis andmete turvaliseks saatmiseks PHP-st JavaScripti ilma neid brauseris kuvamata on AJAX-i kasutamine koos seansihaldusega. Andmete otsekajamise või JavaScripti manustamise asemel on turvalisem meetod andmete ajutine salvestamine PHP-seansis. See tagab, et tundlikke andmeid ei avaldata otseselt ja et neid saab vajaduse korral JavaScripti abil alla laadida.

Selle stsenaariumi korral, kui kasutaja saadab XMLHttpRequesti, töötleb server päringu, hangib vajalikud andmed ja salvestab need seansi. Kliendipoolne JavaScript saab seejärel nõuda neid andmeid ilma neid HTML-is renderdamata. See mitte ainult ei paranda turvalisust, vaid väldib ka tarbetuid vormindamisprobleeme, mis sageli ilmnevad andmete otse HTML-i või JavaScripti manustamisel. Seansid on eriti kasulikud suuremate andmekogumite käsitlemiseks või siis, kui andmed peavad püsima mitme päringu jooksul.

Teine oluline aspekt on õige tagamine vigade käsitlemine ja kinnitamine andmeedastusprotsessi ajal. Rakendades kontrolle nii serveri kui ka kliendi poolel, saavad arendajad tagada, et PHP tagastatud andmed on täpsed ja oodatud vormingus. Lisaks kasutades selliseid tööriistu nagu CSRF märgid või seansihaldus tagab, et tundlikele andmetele pääsevad juurde ainult volitatud päringud, muutes selle lähenemisviisi turvalisemaks ja usaldusväärsemaks.