以前、クライアントサイドからリソースを利用するためにどうしたら良いか程度は、少し調べはしていたのですが、
今回は、サーバーサイドも含めて W3C の "Cross-Origin Resource Sharing" に記載されている内容を改めて読み直し & まとめておこうと思いました。
…が、結局、ほとんど仕様の日本語化になってしまいました。。
面倒で端折っている部分もありますが、ほぼ訳されています。
※ここに記載される内容は 2014年1月16日 の Cross-Origin Resource Sharing (Recommendation) 仕様になります。
目次
用語
単純なメソッド
単純なヘッダー
単純なレスポンスヘッダー
リクエスト / レスポンス ヘッダー
Acces ...
ラベル クロスドメイン通信 の投稿を表示しています。 すべての投稿を表示
クロスドメイン制約 を XmlHttpRequest level 2 で 回避 （プリフライト）
クロスドメイン制約 を 回避 する クライアント & サーバー 実装 を XmlHttpRequest level2 の プリフライト を利用して実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"クライアント側" と "サーバー側" 両方に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、XmlHttpRequest level2 の プリフライト を利用して クロスドメイン通信 を行えるようにします。
Akinari Tsugo
0:03
ASP.NET,
C#,
Web API,
クロスドメイン通信
クロスドメイン制約 を document.domain の 変更 で 回避
.monospace {
fontfamily: monospace;
}
クロスドメイン制約 を 回避 する クライアント実装 を document.domain を利用して実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"クライアント側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、document.domain を変更することで信頼する範囲を広げて クロスドメイン通信 を行えるようにします。
Akinari Tsugo
0:25
HTML,
JavaScript,
クロスドメイン通信
クロスドメイン制約 を JSONP で 回避 （WCF + jQuery）
クロスドメイン制約 を 回避 する サーバー実装 を WCF サービス を用いて JSONP で実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。
今回は、WCF サービス を利用しての実装を行います。
サーバーサイド （WCF サービス）
クライアントサイド （jQuery）
※ WCF サービス で JSONP に対応した サービス を実装した場合、コールバック関数名 を指定する パラメター は callback になるようです。 ...
Akinari Tsugo
21:48
C#,
jQuery,
WCF,
クロスドメイン通信
クロスドメイン制約 を JSONP で 回避 （ASP.NET MVC + jQuery）
クロスドメイン制約 を 回避 する サーバー実装 を ASP.NET MVC を用いて JSONP で実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。
サーバーサイド （ASP.NET MVC）
クライアントサイド （jQuery）
今回は次の図に示すような環境でのクロスドメイン通信を想定し、
この状況でサーバーBにおいて JSONP 形式 で応答する 実装 を載せます。
個人的な趣味趣向の都合で ASP.NET MVC でサンプル ...
Akinari Tsugo
16:57
ASP.NET,
C#,
jQuery,
クロスドメイン通信
クロスドメイン制約 を サーバー設定 で 回避
.inputvalue dt
{
width: 3em;
float: left;
}
.inputvalue dd
{
margin-left: 3em;
}
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" の設定変更で GET リクエスト に関してクロスドメイン通信を実現する方法を載せます。
具体的には、Access-Control-Allow-Origin ヘッダー を無条件に返す設定をすることで、
jQuery 等 で クロスドメイン通信 を行えるようにします。
Akinari Tsugo
0:53
JavaScript,
jQuery,
クロスドメイン通信
IE8, IE9 環境 において jQuery で クロスドメイン通信 する方法
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。
IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。
この XDomainRequest は XMLHttpRequest と似て非なるもの（詳細は こちら）なので、そのまま jQuery.ajax で使うことが出来ません。
jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。
で、その プラグイン と 使い方 は以下の通りです。
XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装
...
Akinari Tsugo
0:53
Internet Explorer,
JavaScript,
jQuery,
クロスドメイン通信
XDomainRequest と XMLHttpRequest level 2 の 違い
.table {
border: 1px solid #efefef;
border-collapse: collapse;
width: 100%;
}
.table thead {
font-weight: bold;
background-color: #fcfcfc;
text-align: center;
}
.table th, .table td{
border: 1px solid #efefef;
padding: 0.3em 0.8em;
}
Internet Explorer 系列 で クロスドメイン通信 を行う場合、
IE8, IE9 だと XDomainRequest 、IE10 では XMLHttpRequest を利用します。
ここでは、似て非なる両者を比べてその違いをまとめます。 ...
Akinari Tsugo
0:16
Internet Explorer,
JavaScript,
クロスドメイン通信
Ajax クロスドメインリクエスト 制約
JavaScript を用いて クロスドメイン で リクエストを行いたいと思うと、 "同一制限元ポリシー(Same Origin Policy)" に引っかかります。
そもそもその制約にある背景は何か…といったところから、制約内容、制約の例外、制約の回避についてまとめました。
制約する理由
制約の内容
制約の例外
制約の回避
制約する理由
クロスサイトリクエストフォージェリ（CSRF）対策。
悪意あるサイトからの不正な要求を拒否するため。
制約の回避方法を見ていてもそうですが、信頼できるサーバーかのリクエストしか受け付けないようになっているようです。
Akinari Tsugo
1:24
HTML,
JavaScript,
クロスドメイン通信,
セキュリティ