安全なJSONP? Bing APIの興味深い機能

Microsoftの新しいBing検索エンジン (実際にはLive Searchのブランド変更であり、ドキュメントをより柔軟に使用できるように「低帯域幅で表示」に切り替える)のAPIを調べたところ、例外をスローしないようにコードを保護する興味深いトリックが見つかりました。

開発者にJSON出力形式を提示する場合、「コールバック関数」パラメーターの受け渡しも有効にすることは理にかなっています。 これにより、Ajaxを使用せずに、scriptタグを使用するだけで出力形式を使用できます。 たとえば、ビートルズグループのメンバーの名前を返すAPIを提供し、出力形式を設定するためのエンドポイントとパラメーターを提供するとします。

example.com/API/getBeatles?output=json

返されるデータは次の形式で表示されます。
{
"members" :
[
'Paul' :{ ... more info ... },
'Ringo' :{ ... more info ... },
'John' :{ ... more info ... },
'George' :{ ... more info ... }
]
}


* This source code was highlighted with Source Code Highlighter .

これをJavaScriptでフェイントなしで使用することはできません。 受信したデータに対してeval(またはより安全なJSON.parse )を実行する必要があり、通常のAjaxに加えて、ドメイン外のデータにアクセスできません。 JSONデータへのアクセスを容易にするために、コールバックパラメーターを提供できます。

example.com/API/getBeatles?output=json&callback=eleanorRigby

このパラメーターを使用すると、結果は関数呼び出しでラップされます。つまり、結果は既に計算されており、ユーザーはこの情報を読み取るコールバック関数を定義しています。
eleanorRigby({
"members" :
[
'Paul' :{ ... more info ... },
'Ringo' :{ ... more info ... },
'John' :{ ... more info ... },
'George' :{ ... more info ... }
]
});


* This source code was highlighted with Source Code Highlighter .

eleanorRigby(o){}ような関数を定義すると、 oパラメーターは受信したデータを持つオブジェクトになり、すぐに使用できます。
< script >
function eleanorRigby(o){
alert(o[ 'John' ]); // will alert the information about John
}
</ script >
< script src ="http://example.com/API/getBeatles?output=json&callback=eleanorRigby" ></ script >


* This source code was highlighted with Source Code Highlighter .

ただし、この場合、 eleanorRigby関数eleanorRigby定義されていない場合、例外がスローされるという問題が発生します。

Bing APIは、出力を次の形式でフレーム化した最初のサービスインスタンスです。
if ( typeof eleanorRigby == 'function' ) eleanorRigby(
{
"SearchResponse" :
{
"Version" : "2.2" ,
"Query" :
{
"SearchTerms" : "a hard day's night"
},
"Translation" :
{
"Results" :
[
{ "TranslatedTerm" : "einem harten Tag-Nacht " }
]
}
}
} /* pageview_candidate */ );


* This source code was highlighted with Source Code Highlighter .

コメント/ * pageview_candidate * /の意味がわかりません。if{}の後にブロック{}が存在しないのは好きではありませんが、アイデアは好きです。

このコードには1つだけ問題があります。この種のエラーは静かにスキップされるため、デバッグプロセスが複雑になる可能性があります。 エラーが発生した場合、コールバック関数が定義されていない場合、おそらくコンソールにメッセージを書き込む方がより美しいでしょう。
if ( typeof callback === 'function' ) {
callback(... data ... );
} else {
if ( typeof console!== 'undefined' &&
typeof console.log !== 'undefined' ){
console.log( 'Error: Callback method not defined' );
}
}


* This source code was highlighted with Source Code Highlighter .

全体的に非常に興味深いアプローチです!

翻訳者から:ところで、スクリプトタグを介してデータを取得することは、evalに比べて生産性が高い場合が多く、ネイティブJSON.parseに比べることもあります。 ただし、参照により、JSONPとの比較はありません。

Source: https://habr.com/ru/post/J62314/


All Articles