23

ユーザーのブラウザ内で JavaScript を使用して他のサーバーにリクエストを送信する (つまり、任意のサーバーからページを取得する) にはどうすればよいですか? XMLHttpRequest などのメソッドでこれを防止するための制限があります。それらをバイパスする方法や他のメソッドはありますか?

これは一般的な質問です。具体的には、一連のランダムな Web サイトをチェックして、特定の要素が含まれているかどうかを確認したいので、追加のファイルをダウンロードせずに Web サイトの HTML コンテンツが必要です。サーバー上での転送やプロキシ メカニズムを使用せずに、すべて JavaScript ファイルで行います。

(注: 1 つの方法は、Greasemonkey とその GM_xmlhttpRequest を使用することです。)

4

8 に答える 8

23

jQueryをチェックアウトする必要があります。AJAX 機能の豊富な基盤があり、これらすべてを実行できるようになります。外部ページを読み込んで、直感的なCSS のようなセレクターを使用してその HTML コンテンツを解析できます。

使用例$.get();

$.get("anotherPage.html", {}, function(results){
  alert(results); // will show the HTML from anotherPage.html
  alert($(results).find("div.scores").html()); // show "scores" div in results
});

外部ドメインの場合、仲介者として機能するローカル PHP スクリプトを作成する必要がありました。jQuery は別のサーバーの URL を引数として渡してローカル PHP スクリプトを呼び出し、ローカル PHP スクリプトはデータを収集し、jQuery はローカル PHP スクリプトからデータを読み取ります。

$.get("middleman.php", {"site":"http://www.google.com"}, function(results){
  alert(results); // middleman gives Google's HTML to jQuery
});

middleman.phpに次の行に沿って何かを与える

<?php

  // Do not use as-is, this is only an example.
  // $_GET["site"] set by jQuery as "http://www.google.com"
  print file_get_contents($_GET["site"]);

?>
于 2009-02-23T15:50:01.120 に答える
5

2018年更新：

次の4つの条件でのみクロスドメインにアクセスできます

  • 応答ヘッダーにはAccess-Control-Allow-Origin: *

デモ

$.ajax({
  url: 'https://api.myjson.com/bins/bq6eu',
  success: function(response){
    console.log(response.string);
  },
  error: function(response){
    console.log('server error');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  • サーバーをターゲットへのブリッジまたはプロキシとして使用する

デモ：

$.ajax({
  url: 'https://cors-anywhere.herokuapp.com/http://whatismyip.akamai.com/',
  success: function(response){
    console.log('server IP: ' + response);
  },
  error: function(response){
    console.log('bridge server error');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  • ブラウザのアドオンを使用して有効にするAllow-Control-Allow-Origin: *
  • ブラウザの Web セキュリティを無効にする

クロム

chrome.exe --args --disable-web-security

ファイアフォックス

about:config -> security.fileuri.strict_origin_policy -> false

終わり

noob 古い答え 2011

$.get(); jsbin.comからデータを取得できますが、google.com などの別のサイトからデータを取得できない理由がわかりません

$.get('http://jsbin.com/ufotu5', {},
  function(results){  alert(results); 
});

デモ: http://jsfiddle.net/Xj234/ firefox、chrome、safari でテスト済み。

于 2011-05-29T21:48:50.320 に答える
3

これはかなり簡単です...「秘密」のトリックを知っていれば、ほとんど誰も共有しません..

それはヤフーyqlと呼ばれています...

したがって、'ユーザーの力' を取り戻す (そして便利なマントラ: '絶対に受け入れない' に戻る) には、(php? プロキシ サーバーサイド スクリプトの代わりに) http://query.yahooapis.com/を使用します。
jQuery は厳密には必要ありません。

例 1:
SQL に似たコマンドを使用する: 

select * from html 
where url="http://stackoverflow.com" 
and xpath='//div/h3/a'

次のリンクは、最新の質問の SO をスクレイピングします (クロスドメイン セキュリティ ブル $#!7 をバイパスします):
http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20html%20where %20url%3D%22http%3A%2F%2Fstackoverflow.com%22%20and%0A%20%20%20%20%20%20xpath%3D%27%2F%2Fdiv%2Fh3%2Fa%27%0A%20 %20%20%20&format=json&callback=cbfunc

ご覧のとおり、これは JSON 配列 (xml を選択することもできます) を返し、 callback-function: を呼び出しますcbfunc。

実際、「ボーナス」として、「tag-soup」からデータを正規表現する必要がなくなるたびに 、子猫も保存します。

自分の中の小さなマッドサイエンティストがくすくす笑い始めているのが聞こえますか?

詳細については、この回答を参照してください (その他の例については、コメントであることを忘れないでください)。

幸運を！

于 2013-03-08T07:02:06.163 に答える
3

ドメインからの http 要求に沿って転送するプロキシ スクリプトを記述します。これにより、XMLHttpRequest の制限が回避されます。

PHP を使用している場合は、cURL を使用してページを要求して読み取り、ドメインからのものであるかのように html を吐き出すだけです。

于 2009-02-23T15:51:38.417 に答える
1

iframe を使用して ajax リクエストをエミュレートすることもできます。これにより、フロントエンドの問題に対してバックエンド ソリューションをコーディングする手間が省けます。次に例を示します。

function setUploadEvent(typeComponet){
       var eventType = "";
       var iframe = document.getElementById("iframeId");
       try{
           /* for Mozilla / Opera9 */
           if (/(?!.*?compatible|.*?webkit)^mozilla|opera/i.test(navigator.userAgent)) {
                eventType = "onload";
           }else{
           /* IE  */
                eventType = "onreadystatechange";
           }

           iframe[eventType] = function(){
                var doc = iframe.contentDocument || iframe.contentWindow.document;
                var response = doc.body.innerHTML; /* or what ever content you are looking for */
             }
           }
       catch(e){
           alert("Error loading content")}
       }

これでうまくいくはずです。ブラウザ検出ラインは最もクリーンではないことに注意してください。最も一般的なすべての JS フレームワーク (Prototype、JQuery など) で提供されているものを絶対に使用する必要があります。

于 2009-02-23T17:34:50.667 に答える
0

これを行うには、サーバーにプロキシを作成する必要があります。すべてのリクエストはサーバーに送られ、サーバーはhtmlをロードしてクライアントに送り返します。そして、これを JavaScript だけで実装する良い方法はありません。
jQuery には、XmlHttpRequest を使用して JSON データまたは外部スクリプトをロードする機能が含まれていますが、この機能は html ページには使用できません。また、jQuery メーリング リストのこのスレッドを確認することもできます。

于 2009-02-23T15:51:10.400 に答える
0

<script language="JavaScript" type="text/javascript" src="http://www.example.com/hello.js"></script>

データを配列、JSON などとして hello.js に追加します。例: var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

別のサーバーから JavaScript を取得するのはそれほど簡単ではありません.. :-)

于 2010-01-20T17:11:28.750 に答える