apikey schützen

-Linix · 13. Dezember 2019

Hallo,

Wie kann ich meinen APIkey schützen, damit man diesen nicht im Quelltext auslesen kann

Stef · 13. Dezember 2019

Hi,

dafür fällt mir gerade nur ein diesen zu verschlüsseln.

Warum willst du deinen API Key schützen? Ist er nicht schon sicher?

Sempervivum · 13. Dezember 2019

Serverseitig die API lesen?

-Linix · 13. Dezember 2019

Zitat von Stef

Hi,

dafür fällt mir gerade nur ein diesen zu verschlüsseln.

Warum willst du deinen API Key schützen? Ist er nicht schon sicher?

Es ist so der url wird ja im Quelltext angezeigt und das möchte ich verhindern falls das geht

-Linix · 13. Dezember 2019

Zitat von Sempervivum

Serverseitig die API lesen?

Wie meinst du?

Sempervivum · 13. Dezember 2019

Ein PHP-Skript, das die API mit file_get_contents ausliest. Dann steht der Key nur im PHP-Code und der ist im Browser nicht sichtbar. Die Daten kannst Du dann gleich in PHP auswerten, wenn sie in HTML umgesetzt werden sollen, oder an ein Javascript übergeben, das sie clientseitig verarbeitet.

-Linix · 13. Dezember 2019

function getThem(selHeader, selSection, url) {

function populateHeader(jsonObj) {

var myH1 = document.createElement('h1');

myH1.textContent = jsonObj['squadName'];

header.appendChild(myH1);

var myPara = document.createElement('p');

myPara.textContent = '' + jsonObj.result.test

header.appendChild(myPara);

}

var header = document.querySelector(selHeader);

var section = document.querySelector(selSection);

var requestURL = url;

var request = new XMLHttpRequest();

request.open('GET', requestURL);

request.responseType = 'json';

request.send();

request.onload = function () {

var superHeroes = request.response;

populateHeader(superHeroes);

// showHeroes(superHeroes);

}

getThem('#api', 'section', 'apikeyhier')

Also wie würde das anhand von dem code gehen?

Sempervivum · 13. Dezember 2019

Wenn das so aussieht, ist es relativ einfach: Die URL brauchst Du nicht als Parameter. Statt direkt die API-URL zu lesen, ruft Du ein PHP-Skript auf deinem Server auf:

Code

        function getThem(selHeader, selSection/*, url*/) {

            function populateHeader(jsonObj) {

                var myH1 = document.createElement('h1');

                myH1.textContent = jsonObj['squadName'];

                header.appendChild(myH1);

                var myPara = document.createElement('p');

                myPara.textContent = '' + jsonObj.result.test

                header.appendChild(myPara);

            }

            var header = document.querySelector(selHeader);

            var section = document.querySelector(selSection);

            // var requestURL = url;

            var request = new XMLHttpRequest();

            // Anstatt die API direkt zu lesen, rufen wir ein
            // PHP-Skript auf dem eigenen Server auf
            //request.open('GET', requestURL);
            request.open('GET', 'getdata.php');

            request.responseType = 'json';

            request.send();

            request.onload = function () {

                var superHeroes = request.response;

                populateHeader(superHeroes);

                // showHeroes(superHeroes);

            }

        }

        getThem('#api', 'section'/*, 'apikeyhier'*/)
    </script>

Alles anzeigen

getdata.php:

PHP

<?php
$theurl ='die-url-der-API-mit-key';
// die API auslesen
$response = file_get_contents($theurl);
// und den Inhalt ausgeben
echo $response;
// ginge auch mit einem Einzeiler,
// aber so ist es IMO übersichtlicher
    ?>

Die URL mit dem Key steht jetzt nur noch im PHP-Skript und das ist im Browser nicht sichtbar.

Ungestestet aber ich bin relativ sicher, dass es so funktionieren wird.

-Linix · 13. Dezember 2019

Ich werde es später mal testen. Danke

-Linix · 13. Dezember 2019

Ich habe jetzt mal nachgeschaut aber es funktionier nicht ich denke es liegt daran getThem('#api', 'section'/*, 'apikeyhier'*/)Da dort normalerweise der apikey reinkommt

Sempervivum · 13. Dezember 2019

Aber das ist ja gerade der Sinn der Sache, dass der Key nicht mehr im Quelltext deiner Seite steht.

Wie hast Du denn getestet? Auf deinem Webspace oder mit lokalem Webserver?

Ich schrieb ja, dass ich es nicht getestet habe, es können also noch Fehler drin sein.

Poste am besten erst Mal das neue Javascript und das PHP, Key kannst Du ja löschen.

-Linix · 13. Dezember 2019

Code

<h5 class="mb-30 fw-700"><Strong><h5><div id="tes3"></div>
                                                        <section></section>
                                                        <script>
                                                                    function getThem(selHeader, selSection/*, url*/) {
            function populateHeader(jsonObj) {
                var myH1 = document.createElement('h1');
                myH1.textContent = jsonObj['squadName'];
                header.appendChild(myH1);
                var myPara = document.createElement('p');
                myPara.textContent = '' + jsonObj.response[0].name
                header.appendChild(myPara);
            }
            var header = document.querySelector(selHeader);
            var section = document.querySelector(selSection);
            // var requestURL = url;
            var request = new XMLHttpRequest();
            // Anstatt die API direkt zu lesen, rufen wir ein
            // PHP-Skript auf dem eigenen Server auf
            //request.open('GET', requestURL);
            request.open('GET', 'getdata.php');
            request.responseType = 'json';
            request.send();
            request.onload = function () {
                var superHeroes = request.response;
                populateHeader(superHeroes);
                // showHeroes(superHeroes);
            }
        }
        getThem('#tes3', 'section'/*, ''*/)
    </script>
                                                          
                                                            </script></Strong></h5>

Alles anzeigen

PHP

<?php


$theurl ='https://api.truckyapp.com/v2/traffic/servers';
// die API auslesen
$response = file_get_contents($theurl);
// und den Inhalt ausgeben
echo $response;
// ginge auch mit einem Einzeiler,
// aber so ist es IMO übersichtlicher
    ?>

Alles anzeigen

Hab mal hier ein Beispiel. Ich habe es schon auf meinen Vserver verschoben da geht es aber auch nicht

-Linix · 13. Dezember 2019

wenn ich jetzt auf die Seite schaue steht dort nichts

Sempervivum · 13. Dezember 2019

Dann müssen wir mal debuggen. Schalte die Fehleranzeigen im PHP-Skript ein:

PHP

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
$theurl ='die-url-der-API-mit-key';
// die API auslesen
$response = file_get_contents($theurl);
// und den Inhalt ausgeben
echo $response;
// ginge auch mit einem Einzeiler,
// aber so ist es IMO übersichtlicher
    ?>

Alles anzeigen

Dann rufe es direkt im Browser auf ohne das Javascript.

-Linix · 13. Dezember 2019

https://prnt.sc/qakkte

-Linix · 13. Dezember 2019

Also so oder?

Sempervivum · 13. Dezember 2019

Das sind offensichtlich die Ausgaben in der Console. Wir sollten erst Mal sicher gehen, dass das PHP-Skript funktioniert. Rufe es direkt auf, also

https://deine-domain.de/dein-pfad/getdata.php

-Linix · 13. Dezember 2019

Das script funktionier jetzt muss es nur noch richtig auf die seite übertragen werden https://prnt.sc/qakn1r

Sempervivum · 13. Dezember 2019

Das sieht ja schon Mal gut aus! Dann sollten wir im JS weiter debuggen: Füge eine Consolausgabe ein:

Code

            request.onload = function () {
                var superHeroes = request.response;
                console.log(superHeroes);
                populateHeader(superHeroes);
                // showHeroes(superHeroes);
            }

-Linix · 13. Dezember 2019

Zitat von Sempervivum

Das sieht ja schon Mal gut aus! Dann sollten wir im JS weiter debuggen: Füge eine Consolausgabe ein:

Code

            request.onload = function () {
                var superHeroes = request.response;
                console.log(superHeroes);
                populateHeader(superHeroes);
                // showHeroes(superHeroes);
            }

Das hab ich ja schon drinnen stehen request.open('GET', 'getdata.php'); request.responseType = 'json'; request.send(); request.onload = function () { var superHeroes = request.response; populateHeader(superHeroes); // showHeroes(superHeroes); }

apikey schützen

Jetzt mitmachen!

Teilen