Javascript

クロスオリジンを乗り越える方法

結論から言うと基本的には無理です。

自分の管理内ならいくつか方法はあります。

オリジン間リソース共有 (CORS)

参考：オリジン間リソース共有 (CORS) | MDN

接続先のWebサーバー側の「Access-Control-Allow-Origin」に接続元のオリジンや、「*」が指定されていればオリジンを乗り越えて接続が可能になります。

そのため、Ajaxなどで接続するためには「Access-Control-Allow-Origin」を設定して許可してもらうしかありません。

許可されれば通常通りにAjax通信が可能になります。

X-Frame-Options

参考：X-Frame-Options | MDN

接続先のWebサーバー側の「X-Frame-Options」に接続元のURIや、「*」が指定されていればオリジンを乗り越えて接続が可能になります。

そのため、iframeで接続するためには「X-Frame-Options」を設定して許可してもらうしかありません。

許可されればiframeを使用して通信元の画面にiframeで接続してiframe内のデータを使える可能性があります。

JavaScriptで超えられるか考えてみた

JavaScriptを使用して超えられるか少し考えてみました。

使うコードは以下の通りです。

var url = "https://www.google.com/";
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.send();
     
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log( JSON.parse(xhr.responseText) );
  }
}

サンプルのコードの接続先のGoogleは「Access-Control-Allow-Origin」で許可されていないので接続が出来ません。

setRequestHeaderを使用して接続元のhostを書き換えてしまえばいけるかと思いましたが以下の変更は出来ないようです。

• accept-charset
• accept-encoding
• access-control-request-headers
• access-control-request-method
• connection
• content-length
• content-transfer-encoding
• cookie
• cookie2
• date
• expect
• host
• keep-alive
• origin
• referer
• te
• trailer
• transfer-encoding
• upgrade
• user-agent
• via

引用元：XMLHttpRequest でsetRequestHeader出来ないヘッダー リスト - ASnoKaze blog

実現可能な方法

実現可能な方法としてはPHP等の他の言語との組み合わせです。

Ajaxで対象のURLを指定→バックエンド側で何らかの方法でURLに接続→Ajaxに返す。

これが簡単な接続方法になります。

JSONPの使用

方法としてはJSONPもありますが、脆弱性があるため使用は考えませんでした。

JSONP 注意点

まとめ

そもそも他サイトからAjaxを利用して接続できたら脆弱性の元になるので基本的に接続出来ません。

またブラウザ側で接続先に接続してheaderを見て中断してるのでヘッダーを書き換えたらいけるかと思いましたがやはりダメでした。（脆弱性になる）

設定変更が出来る接続先なら申請なりして対応してもらえばいいですが、出来ない場合は大人しく他の方法を考えましょう。