Soru JSONP nedir?


JSON'u anlıyorum ama JSONP'yi değil. Wikipedia'nın Wikipedia'daki dokümanı JSONP için en iyi arama sonucudur. Şöyle diyor:

JSONP veya "JSON with padding", bir ön ekin aramanın kendisinin bir giriş argümanı olarak belirtildiği bir JSON uzantısıdır.

Ha? Ne çağrı? Bu benim için hiçbir şey ifade etmiyor. JSON bir veri biçimidir. Arama yok.

2. arama sonucu adında bir adamdan Remy, bunu JSONP hakkında yazan:

JSONP, sunucudan gelen yanıtı kullanıcı tarafından belirtilen bir işleve ileterek komut dosyası etiketi enjekte edilir.

Bunu anlayabiliyorum, ama hala hiç mantıklı değil.


Peki JSONP nedir? Neden oluşturuldu (hangi problem çözüldü)? Ve neden kullanmalıyım?


ek: Yeni oluşturdum JSONP için yeni bir sayfa Wikipedia'da; şimdi JSONP açık ve kapsamlı bir açıklama vardır, dayalı jvenemacevabı.


1835
2018-01-14 20:53


Menşei


Skaffman, sonra WIKIpedia'dan mükemmel mantıklı soruları çıkaran kişi olan burun sesiyle mi almalıyım? Bir şey eklemeden ya da geliştirmeden mi? Nasıl bir soru sormak "vandalizm". Sheesh. Ve evet, şu anda wikipedia sayfasını, jüvenemin sağladığı bilgilerle geliştireceğim. - Cheeso
Harika, daha iyi bir bilgi varsa, o zaman ekleyin. Ama sen wikipedia hakkında soru sormuyorsun, gerçekleri ekliyorsun. - skaffman
Kayıt için,% 100 ile konuştuğunuz sunucuya güvenmiyorsanız JSONP kullanmayın. Güvenliği ihlal edilirse, web sayfanız önemsiz bir şekilde ele alınacaktır. - ninjagecko
Ayrıca JSONP’a da dikkat edin kaçırılmış olabilir doğru şekilde uygulanmadıysa. - Pacerier
Bu soru, "yinelenen" sorusu 10 aylık olarak sorulduğunda neden yinelenen olarak etiketlenir? sonra Bu? - jvenema


Cevaplar:


Aslında fazla karmaşık değil ...

Example.com adresinde olduğunuzu varsayalım ve example.net alanına bir istekte bulunmak istiyorsunuz. Bunu yapmak için, tarayıcı alanlarının çoğunda alan adı sınırlarını geçmeniz gerekir.

Bu sınırlamayı atlayan bir öğe <script> etiketleri. Bir komut dosyası etiketi kullandığınızda, alan sınırlaması göz ardı edilir, ancak normal şartlar altında gerçekten olamaz yap sonuçlarla ilgili herhangi bir şey, senaryo sadece değerlendirilir.

JSONP girin. İsteğinizi JSONP etkinleştirilmiş bir sunucuya yaptığınızda, sunucunuza sayfanız hakkında biraz bilgi veren özel bir parametre iletirsiniz. Bu şekilde, sunucu cevabını sayfanızın ele alabileceği şekilde güzelce tamamlayabilir.

Örneğin, sunucunun JSONP yeteneklerini etkinleştirmek için "geri arama" adlı bir parametre beklediğini varsayalım. O zaman isteğin şöyle olurdu:

http://www.example.net/sample.aspx?callback=mycallback

JSONP olmadan, bu bazı temel JavaScript nesnelerini geri verebilir:

{ foo: 'bar' }

Ancak, JSONP ile, sunucu "geri arama" parametresini aldığında, sonucu biraz farklı şekilde tamamlar, böyle bir şey döndürür:

mycallback({ foo: 'bar' });

Gördüğünüz gibi, şimdi belirttiğiniz yöntemi çağırır. Dolayısıyla, sayfanızda geri arama işlevini tanımlarsınız:

mycallback = function(data){
  alert(data.foo);
};

Ve şimdi, betik yüklendiğinde, değerlendirilecek ve işleviniz yürütülecek. Voila, etki alanları arası istekler!

Ayrıca JSONP ile ilgili önemli bir soruna dikkat çekmeye değer: Talebin çok kontrolünü kaybedersiniz. Örneğin, uygun hata kodlarını geri almak için "güzel" bir yol yoktur. Sonuç olarak, her zaman biraz şüpheli olan isteği izlemek için zamanlayıcılar kullanarak sonuçlanırsınız. İçin teklif JSONRequest çapraz etki alanı komut dosyasına izin vermek, güvenliği sağlamak ve isteğin doğru şekilde kontrol edilmesine izin vermek için harika bir çözümdür.

Bu günlerde (2015), CORS JSONRequest'e göre önerilen yaklaşımdır. JSONP eski tarayıcı desteği için hala yararlıdır, ancak CORS seçiminiz olmadıkça güvenlik sonuçları dikkate alındığında daha iyi bir seçimdir.


1796
2018-01-14 21:08



JSONP kullanmanın bazı güvenlik sonuçları olduğunu lütfen unutmayın. JSONP gerçekten javascript olduğundan, javascript'in yapabileceği her şeyi yapabilir, bu yüzden JSONP verilerinin sağlayıcısına güvenmeniz gerekir. Bu konuda bir blog yazısı yazdım: erlend.oftedal.no/blog/?blogid=97 - Erlend
JSONP'de <script> etiketinde bulunmayan yeni bir güvenlik uygulaması var mı? Bir komut dosyası etiketiyle tarayıcı, tarayıcının, körü körüne değerlendirdiği zararlı olmayan Javascript'i sunmak için dolaylı olarak sunucuya güvenir. JSONP bu gerçeği değiştiriyor mu? Öyle görünmüyor. - Cheeso
Hayır, değil. Javascript'i teslim etmek için güvendiniz, aynı şey JSONP için de geçerli. - jvenema
Verilerin nasıl iade edildiğini değiştirerek güvenliği biraz artırabilirsiniz. Eğer betiği mycallback ('{"foo": "bar"}') gibi gerçek JSON biçiminde döndürürseniz (parametrenin artık bir dize olduğunu unutmayın), daha önce verileri "temizlemek" için kendiniz elle ayrıştırabilirsiniz. değerlendirilmesi. - jvenema
CURL, istemci tarafı değil, sunucu tarafı bir çözümdür. İki farklı amaca hizmet ediyorlar. - jvenema


JSONP gerçekten üstesinden gelmek için basit bir hile XMLHttpRequest aynı alan adı politikası. (Bildiğiniz gibi biri gönderilemez AJAX (XMLHttpRequest) farklı bir alan adına istekte bulunabilirsiniz.

Yani - yerine kullanmak XMLHttpRequest kullanmak zorundayız senaryo Js'nin başka bir etki alanından veri alabilmesi için genellikle js dosyalarını yüklemek için kullandığınız HTML etiketleri. Kulağa garip geliyor?

Şey - çıkıyor senaryo etiketler benzer bir şekilde kullanılabilir XMLHttpRequest! Şuna bak:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

Sonunda bir senaryo veriyi yükledikten sonra buna benzeyen segment:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Ancak bu biraz rahatsız edici çünkü bu diziyi senaryo etiket. Yani JSONP İçerik oluşturucular, bunun daha iyi çalışacağına karar verdi (ve şöyle):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data? Geri arama = my_callback';

Dikkat edin my_callback Oradaki işlev mi? Öyleyse ne zaman JSONP sunucu isteğinizi alır ve geri arama parametresini bulur - düz js dizisini döndürmek yerine şunu döndürür:

my_callback({['some string 1', 'some data', 'whatever data']});

Kârın nerede olduğunu görün: Şimdi verileri aldıktan sonra tetiklenecek otomatik geri arama (my_callback) alıyoruz.
Bilmeniz gereken tek şey bu. JSONP: Bu bir geri arama ve komut dosyası etiketleri.

NOT: Bunlar JSONP kullanımının basit örnekleridir, bunlar üretim hazır komut dosyaları değildir.

Temel JavaScript örneği (JSONP kullanarak basit bir Twitter yayını)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

Temel jQuery örneği (JSONP kullanarak basit Twitter beslemesi)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONP anlamına gelir Dolgu ile JSON. (çoğu insanın “yastıklama” olarak düşüneceği şeyle hiçbir ilgisi olmadığı için çok zayıf bir şekilde adlandırılmış bir tekniktir.)


640
2017-07-29 21:40



Komut dosyası açıklaması için teşekkürler. Çapraz etki güvenlik ilkesinin JSONP tarafından nasıl atlandığını anlayamadım. Açıklamadan sonra, noktayı kaçırmak için aptalca bir his duyuyorum. - Eduard
Bu, Jvenema'nın cevabına çok iyi bir tamamlayıcı cevaptır - json verilerinin aksi takdirde komut dosyası aracılığıyla erişilmesi gerektiğine işaret edene kadar geri aranmanın neden gerekli olduğunu anlamadım. - Matt
Script etiketinin XMLHttp olarak çalıştığını bilerek harika hissetmek :-) Güzel bir açıklama için teşekkürler - ravisoni
Bu berrak açıklama için teşekkürler. Keşke kolej ders kitaplarının senin gibi insanlar tarafından yazılmasını diliyorum :) - hashbrown
Bir öncekinden daha iyi bir sonuç. Tabii ki - "js dosyalarını başka bir alandan veri almak için genellikle js dosyalarını yüklemek için kullandığınız alıntılar. Tuhaf sesler?" benim için göz açıcıdır. Örnek kod çok şahane. - SIslam


JSONP, bir "komut dosyası" öğesi (HTML işaretlemesinde veya JavaScript aracılığıyla DOM'a eklenmiş) oluşturarak çalışır ve bu da uzaktaki bir veri hizmeti yerini ister. Yanıt, tarayıcınıza, önceden tanımlanmış işlevin adıyla, JSON verilerinin talep edildiği parametre ile birlikte yüklenen bir javascripttir. Komut dosyası yürütüldüğünde, işlev, istek sayfasının verileri almasına ve işlemesine izin vererek JSON verileriyle birlikte çağrılır.

İleri Okuma Ziyareti İçin:  https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

istemci tarafı kod snippet'i

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

PHP kodunun sunucu tarafı parçası

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

38
2018-03-17 13:32



en üstteki link şimdi sadece 404s - Man Personson
Bu bağlantının içeriği şu anda http://scn.sap.com/community/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp. - ᴠɪɴᴄᴇɴᴛ


Çünkü sunucudan döndürülen JSON nesnesine bir önek eklemesini isteyebilirsiniz. Örneğin

function_prefix(json_object);

tarayıcı için eval "inline" ifadesi olarak JSON dizesi. Bu hile, sunucunun Javascript kodunu doğrudan İstemci tarayıcısında "enjekte etmesini" ve "aynı menşe" kısıtlamalarını atlamayı mümkün kılar.

Başka bir deyişle, sahip olabilirsiniz etki alanları arası veri değişimi.


Normalde, XMLHttpRequest etki alanları arası veri alışverişine doğrudan izin vermez (aynı alandaki bir sunucudan geçmesi gerekir);

<script src="some_other_domain/some_data.js&prefix=function_prefix> `biri, kaynaktan farklı bir alandaki verilere erişebilir.


Ayrıca not etmeye değer: sunucu "hile" denemeden önce "güvenilir" olarak düşünülse de, nesne biçimindeki vb. Olası değişikliklerin yan etkileri de içerilebilir. Eğer bir function_prefixJSON nesnesini almak için (yani uygun bir js fonksiyonu kullanılır), bahsedilen işlev, iade edilen verileri kabul etmeden / işlemeden önce kontrolleri gerçekleştirebilir.


37
2018-01-14 20:58





JSONP, etki alanları arası komut dosyası hatalarıyla karşılaşmak için harika bir yerdir. Sunucu tarafında bir AJAX proxy'si uygulamak zorunda kalmadan bir JSONP hizmetini yalnızca JS ile tüketebilirsiniz.

Kullanabilirsiniz b1t.co nasıl çalıştığını görmek için servis. Bu, URL'lerinizi küçültmenizi sağlayan ücretsiz bir JSONP hizmetidir. Hizmet için kullanacağınız URL:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

Örneğin, çağrı http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

dönecekti

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

Ve bu nedenle, js'nize bir src olarak yüklendiğinde, geri arama fonksiyonunuz olarak uygulamanız gereken navlunAdını otomatik olarak çalıştırır:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

JSONP çağrısını gerçekten yapmak için, bunu birkaç yolla (jQuery'yi kullanarak) yapabilirsiniz, ancak burada saf bir JS örneği:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Bir adım adım örnek ve üzerinde çalışılacak bir jsonp web servisi şu adreste bulunabilir: bu gönderi


17
2018-03-28 15:59



Cevabınızı gönderdiğiniz için teşekkürler! Lütfen buradaki cevabın temel kısımlarını, bu sitede veya postalama risklerinizi silmeniz gerektiğini unutmayın. 'Bağlantıdan biraz daha fazlası' olan cevaplardan bahsettiği SSS bölümüne bakın. Bağlantıyı hala isterseniz, sadece 'referans' olarak ekleyebilirsiniz. Cevap, bağlantıya ihtiyaç duymadan kendi başına kalmalıdır. - Taryn♦


JSONP kullanımı için basit bir örnek.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

10
2018-06-06 06:45





JSONP'yi anlamadan önce JSON formatını ve XML'i bilmeniz gerekir. Şu anda web'deki en sık kullanılan veri formatı XML'dir, ancak XML çok karmaşıktır. Web sayfalarına gömülü olarak işlem yapmak için kullanıcılara rahatsızlık verir.

JavaScript'in veri alışverişi yapabildiği gibi kolayca veri alışverişi yapabilmesi için, ifadeleri JavaScript nesnelerine göre kullanırız ve JSON olan basit bir veri değişim formatı geliştirdik. JSON veri olarak veya bir JavaScript programı olarak kullanılabilir.

JSON, doğrudan belirli JSON programını yürütebilmeniz için JavaScript'e gömülebilir, ancak güvenlik kısıtlamaları nedeniyle, tarayıcı Sandbox mekanizması, etki alanları arası JSON kod yürütülmesini devre dışı bırakır.

JSON'un yürütmeden sonra geçebilmesi için bir JSONP geliştirdik. JSONP, tarayıcının JavaScript sınırlama işlevselliği ve <script> etiketi ile güvenlik sınırlarını atlar.

Kısacası, JSONP'ın ne olduğunu, hangi problemi çözdüğünü (ne zaman kullanacağını) açıklar.


9
2017-12-08 04:02



Bunu reddettim çünkü XML'in 'Aralık ayında web'de en çok kullanılan dat formatı olduğuna inanıyorum. - RobbyD