XMLHttpRequest mit SSL-Verschlüsselung

123abc

Hallo ,

Ich würde gerne eine .json-Datei (https://public-api.adsbexchange.com/VirtualRadar/A…DstL=0&fDstU=30) aus dem Internet in einer Variable in Javascript einfügen. Allerdings funktioniert das bei mir mit der eben genannten URL nicht. Wenn ich stattdessen die Datei auf meinem lokalen PC speichere und über file:///C:/Documents/AircraftList.json aufrufe oder andere Json-Dateien mit http:// oder (https://maps.googleapis.com/maps/api/geoco…dress=Frankfurt) aus dem Internet aufrufe funktioniert es dagegen schon.

Um die Datei zu bekommen verwende ich folgenden Javascript-Code:

Code

var url = "https://maps.googleapis.com/maps/api/geocode/json?address=vienna";    // URL
var radar; //Variable für den übermittelten Text

// start
req();      // Request


// Herunterladen von JSON-Datei:
function req() {

        var oReq = new XMLHttpRequest();        //neuer XMLHttpRequest
        oReq.onload = reqListener;                  // wenn heruntergeladen, dann Funktion reqListenenr
        oReq.open('get', url, false);        // Anfrage definieren
        oReq.send();                     // Anfrage Senden
}

// Wenn Datei geladen:
function reqListener() {
  radar = this.responseText;     // Text in Variable radar speichern
}
alert(radar); // Text anzeigen


var data = JSON.parse(radar);

Alles anzeigen

Dieses Beispiel funktioniert so. Wenn ich jetzt aber die URL ändere um die AircraftList.json zu erhalten kommt nichts an. Ich muss die Daten aber regelmäßig aktualisieren, weshalb ich nicht die lokale Kopie der Datei auf meinem Computer verwenden kann.

Kann mir jemand sagen, woran es liegt dass diese eine Seite über Javascript nicht gelesen werden kann. Hat das evtl. etwas mit dem https:// und einer SSL-Verschlüsselung zu tun?

Ich würde mich sehr freuen wenn jemand eine Idee hat, um das Problem zu lösen.

VG 123abc

basti1012

Wenn du in Der Fehler konsole kuckst, steht da

Zitat

pen.js:10 Failed to load https://public-api.adsbexchange.com/VirtualRadar/A…stL=0&fDstU=30: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

Das wird so nix.

Arne Drews

Es gibt eine SOP ( SameOriginPolicy ), die definiert, dass Anfragen nur von der eigenen Domain erlaubt sind.

Manche Seiten lassen XmlHttpRequests durch, einige sperren das. Ist ein Sicherheitsprinzip, das Du kaum umgehen kannst.

Evtl. hilft Dir CORS etwas, kannst Du ja mal durchlesen.

basti1012

Du könntest da aber was mit Php machen.

Oder wenn es nur für dich zuhause ist kannst du die CORS mit Greasmonkey/Tampermonkey umgehen.Damit hole ich auch mehrere Forums auf einer Seite.

123abc

Wie ungefähr würde man das machen, wenn man nur auf dem eigenen Pc die Cors mit Greasmonkey umgehen möchte? Leider habe ich davon überhaupt keine Ahnung.

basti1012

Kennst du dich mit Javascript den aus ? Greasemonkey ist zu 95 prozent das gleiche .Die haben zwar noch andere Befehle wie den GM_ Kram ,und auch die meta Daten sind anders ,aber sonst ist da nicht viel anders.

Das schöne da dran ist das du die einkommene Daten Manipulieren kannst für deine Zwecke.Wie gesagt habe auf einer Seite mehrere Forume eingebunden. Das wäre mit Javascript eigentlich nicht möglich ,auser bei welchen Seiten die das erlauben ,sehe #post 3 von Arne Drews . Greasemonkey umgeht das irgendwie ,aber wie weiß ich nicht ,aber es geht aufjedenfall. Das geht aber auch nur mit GET Requeste und mit POST nur auf den Seiten wo du hin senden willst.

Hoffe ich habe das jetzt richtig erklärt.

Hast du den Firefox oder Opera Browser? Ist da schon Tampermonkey oder greasemonkey drauf ?

Ich probiere das gleich aus mit Greasmonkey und wenn alles geklappt habt reden wir weiter da drüber.

Hast du möglichkeiten mit Php zu arbeiten ?

Mit Php sollte das eigentlich auch gehen mit file() oder so.Das können die Php Leute dir dann besser erklären.

basti1012

So habe es getestet und es geht.

Deswegen hier ein Mini Tutorial für dich.

1. Greasemonkey oder Tampermonkey Installieren ( Firefox oder Opera -Browser).

2. In den Einstellungen auf NEU bzw NEUE DATEI gehen und untern Code rein kopieren.

2a Include Angaben ändern ,auf der Seite wo das Script laufen soll.

3. Speichern und fertig.

4 Fals Einstellungen nicht gefunden werden ,oder sonst was dann kann man auch ein neues Textdokument öffnen,den Code reinkopieren und beim Speichern drauf achten das der name mit .user endet.

5. Ist das Script gespeichert ziehen wir es mit drop & drag ins Browser Fenster rein.

Script sollte jetzt Einsatzbereit sein. Da ich auf Include nur ein Stern rein gemacht habe läuft das Script auf allen Seiten und legt so alles larm. Deswegen Punkt 2a beachten.

Nehmen wir mal an du schreibst da *google.de* rein dann läuft das Script überall wo google.de in der Adressleiste steht.

In diesen Script wird nur eine Grüne Seite erstellt wo die Daten deines Linkes drinnen steht. Die weitere Bearbeitung der Daten kannst du jetzt ganz normal weiter führen wie du es von Javascript ,Html,Css gewohnt bist.

6. Bei weitern Fragen und Probleme einfach melden

Code

// ==UserScript==
// @name         request from json datei
// @namespace    by basti1012
// @description  Führt einen einfachen Request durch um die Daten einer Api zu bekommen
// @author       pennerhackisback
// @copyright    Basti1012 alias Pennerhack
// @icon         http://www.lildevil.org/greasemonkey/images/IC-icon.png
// @include      *
// @noframes
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @version      1.0
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// ==/UserScript==
 
GM_addStyle('#GMAPI{position:fixed;height:100%;width:100%;top:0;left:0;z-index:1000;background:lightgreen;overflow:auto;font-size:19px}');
var url="https://public-api.adsbexchange.com/VirtualRadar/AircraftList.json?lat=50.43&lng=8.008113&fDstL=0&fDstU=30";

GM_xmlhttpRequest({
           method: 'GET',
           url:url,
           onload: function(responseDetails) {
                  var content = responseDetails.responseText;
                   $('<div id="GMAPI">'+content+'</div>').appendTo('body')

           }
});

Alles anzeigen

Arne Drews

Würde man versuchen sich in CORS einzulesen und es zu verstehen, anstatt irgendwelche Plugins/Erweiterungen zu installieren, würde man vermutlich erahnen, was die Funktion GM_xmlhttpRequest() im Background macht und könnte das vielleicht mit wenigen Zeilen JS selber machen.

Aber ThirdParty-Gedöns zu verwenden, um den Kern nicht verstehen zu müssen, scheint Mode zu sein.

basti1012

Wenn du doch weißt wie es geht dann poste doch die Lösung.

Dann brauch der TE ja kein Greasemonkey.

Arne Drews

Ich persönlich habe mich mit CORS nie intensiv befasst, daher der Link in #3, schließlich soll der TE auch selber lernen und nicht immer fertige Scripte bekommen, die er am Ende sowieso nur bedingt einsetzen kann.

Aber um Deinen Wissensdurst zu stillen: Ich würde da einfach einen cURL-Request per PHP zwischensetzen und feddich!

Code

$c = curl_init();
curl_setopt_array( $c, [
        CURLOPT_URL => $url,
        CURLOPT_HEADER => false,
        CURLOPT_FORBID_REUSE => true,
        CURLOPT_RETURNTRANSFER => true
    ]);

echo curl_exec( $c );

Die JS sieht dann ganz simpel bspw. so aus:

Code

var o = new XMLHttpRequest();
o.addEventListener( 'load', function() {
        document.querySelector( 'code' ).innerText = this.responseText;
    });

o.open( 'GET', 'curl.php', true );
o.send();

simple way to go, let me show you: http://examples.php-rocks.de/curl/

basti1012

Mit Php ist ja schön und gut.Es soll aber auch ohne gehen und das wäre interesant das mal hinzubekommen.Die ganzen Scripte die man im Netzt bisher gefunden hat haben bei den neuen Browser alle nicht mehr Funktioniert.

Wenn der TE kein Php zu verfügung hat kommt er mit deiner Variante ja auch nicht weiter.

Fals doch ,ist es natürlich besser als sich Greasemonkey zu installieren.

Fals man GM sowieso schon nutzt muß man selbst wissen was man macht.

Deine Variante müßte dann bei iframes von fremden Seiten einbinden ja auch gehen oder?

Arne Drews

XAMPP kennst Du, das weiß ich aus anderen Beiträgen, womit das fehlende PHP Problem gelöst ist.

Das müsste man zwar auch zusätzlich installieren, aber das sollte Grundlage sein, wenn man lokale Webanwendungen verwendet, die zudem auch noch auf das Internet zugreifen!

Also hat der TE aus meiner Sicht PHP immer zur Verfügung, es sei denn er will nicht. Aber dann ist weitere Hilfe für dieses Szenario m.M.n. verschwendete Zeit.

Wenn man etwas aufbauen will und in einem Forum fragt, sollte man es auch schon richtig machen wollen.

iframes würde natürlich gehen, halte ich aber für Unfug.

basti1012

Wenn der TE XAMPP nutzt dann sollte er natürlich deine Variante nutzen.Da gebe ich dir recht.

Jetzt kommt es nur drauf an was der TE dazu sagt ,was er nutzt und was er sich so ausgedacht hat.

123abc

Vielen Dank für die Tipps und Ratschläge. Mit Tampermonkey in Chrome habe ich es jetzt hinbekommen. Wenn man es einmal verstanden hat geht das ganz gut. Hätte ich sonst bestimmt nicht hinbekommen.

XMLHttpRequest mit SSL-Verschlüsselung

Jetzt mitmachen!

Tags