Web 跨域

为什么需要跨域?

浏览器 同源策略 (域名、协议、端口相同)限制其他网页对本网页进行非法篡改, 只有带有 src 属性的标签才允许跨域( </code> <code><script></code>)</p> <h3>JSONP</h3> <p><code>JSONP（JSON with Padding）</code>是一个非官方的协议，它允许在服务器端集成<code>Script tags</code>返回至客户端，通过<code>javascript callback</code>的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。利用<code><script/></code>标签对<code>javascript</code>进行动态解析来实现(其实也可以用<code>eval</code>函数),然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。</p> <h4>IE 兼容</h4> <p><strong>P3P 规范让 IE 跨域接受第三方 cookie</strong></p> <blockquote> <p>header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');</p> </blockquote> <h4>原理</h4> <p>1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。</p> <ol> <li>此时，服务器先生成 json 数据。</li> <li>然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.</li> <li>最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。</li> <li>客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）</li> </ol> <h4>缺点</h4> <ul> <li>只能采用<code>GET</code>请求,数据量大的跨域请求不能使用</li> <li>如果使用<code>eval</code>来解析会容易出现安全问题</li> <li>没有<code>JSONP调用的错误处理</code>,如果无效静默失败</li> <li>被不信任的服务使用时会很危险,因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。</li> </ul> <h4>代码示例</h4> <h5>原生实现JSONP跨域</h5> <pre><code class="javascript">// 客户端 <script> // 这是回调方法 function cb(data){ alert(data.website); } </script>  <script src="http://172.22.22.120/new/ajax_jsonp.php?callback=cb"></script> </code></pre> <pre><code class="php"> <?php $cb = htmlspecialchars($_GET['callback']); // 注意了，这里要做好过滤，防止xss攻击 echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据为：cb({"name":"hcoding"}) 这是一段js代码 ?> </code></pre> <h5>AJax实现JSONP</h5> <p>客户端代码：</p> <pre><code class="javascript"><script> // 客户端使用getJSON方法请求另一台机子上的脚本 // 浏览器会生成一个随机的callback参数 $.getJSON("http://172.22.22.120/new/ajax_jsonp.php?callback=?",function(json){ alert(json.website); }); // $.getJSON简单易用，但就是不能指定回调函数。 </script> //或者 <script> $.ajax({ type : "GET", url : "http://172.22.22.120/new/ajax_jsonp.php", dataType : "jsonp", // 数据格式指定为jsonp jsonp: "callback", // 服务点通过这个键值获取回调方法 jsonpCallback:"cb", // 指定回调方法 success : function(json){ }, }); // 回调方法 function cb(data){ alert(data.website); } </script> </code></pre> <p>服务端PHP脚本代码：</p> <pre><code class="php"><?php $cb = htmlspecialchars($_GET['callback']); // 注意了，这里要做好过滤，防止xss攻击 echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客户端的数据,这是一段js代码 ?> </code></pre> <h3>CORS (IE8+) 推荐使用</h3> <p>跨源资源共享标准( cross-origin sharing standard ) 使得以下场景可以使用跨站 HTTP 请求：</p> <ul> <li>如上所述，使用 XMLHttpRequest 发起跨站 HTTP 请求。</li> <li>Web 字体 (CSS 中通过 @font-face 使用跨站字体资源), 因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。</li> <li>WebGL 贴图</li> <li>使用 drawImage API 在 canvas 上画图</li> </ul> <h4>相关Header</h4> <p><strong>服务端设置Header: (ResponseHeader)</strong></p> <ul> <li> <code>Access-Control-Allow-Origin *</code> 服务器设置允许访问的源的网址</li> <li> <code>*</code> 可以为网站网址如<code>http://api.a.com</code> </li> <li> <code>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header</code> 允许访问服务器的头信息</li> <li> <code>Access-Control-Max-Age: <delta-seconds></code> 允许预请求参数缓存的毫秒数,在此期间不用发出另一条预请求</li> <li><code>Access-Control-Allow-Credentials: true | false</code></li> <li><code>Access-Control-Allow-Methods: <method>[, <method>]*</code></li> <li> <code>Access-Control-Allow-Headers: X-PINGOTHER</code> 这样在实际的请求里请求头信息里就可以有这么一条:<code>X-PINGOTHER: pingpong</code>可以有多个自定义HTTP请求头,用逗号分隔.</li> <li><code>Access-Control-Allow-Headers: <field-name>[, <field-name>]*</code></li> </ul> <p><strong>HTTP 请求头(RequestHeader)</strong></p> <p><strong>注意这些请求头信息都是在请求服务器的时候已经为你设置好的,当开发者使用跨域的XMLHttpRequest的时候,不需要手动的设置这些头信息.</strong></p> <ul> <li> <code>Origin: <origin></code>注意,不仅仅是跨域请求,普通请求也会带有ORIGIN头信息.</li> <li><code>Access-Control-Request-Method: <method></code></li> <li><code>Access-Control-Request-Headers</code></li> <li><code>Access-Control-Request-Headers: <field-name>[, <field-name>]*</code></li> </ul> <h4>请求方式</h4> <ul> <li>简单请求</li> <li>只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。</li> <li>不会使用自定义请求头（类似于 X-Modified 这种）。</li> <li>预请求</li> <li>请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。</li> <li>使用自定义请求头（比如添加诸如 X-PINGOTHER）</li> <li>附带凭证信息的请求</li> <li>XMLHttpRequest和访问控制功能，最有趣的特性就是，发送凭证请求（HTTP Cookies和验证信息）的功能。一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将XMLHttpRequest的一个特殊标志位设置为true，浏览器就将允许该请求的发送。</li> </ul> <p><strong>安全问题</strong>:不要依赖CORS当中的权限制度，应当使用更多其它的措施来保障，比如<code>OAuth2</code></p> <h3>iframe 隐藏表单,进行POST提交(非现代浏览器)</h3> <ul> <li>建立一个iframe，iframe内的JS创建一个form表单，并可以将接收到的参数放入表单中POST提交</li> <li>将iframe页面插入到页面中。</li> </ul> <h3>window.name</h3> <p>有三个页面：</p> <ul> <li>a.com/app.html：应用页面。</li> <li>a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。</li> <li>b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。</li> </ul> <p>实现起来基本步骤如下：</p> <ul> <li>在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。<br> 数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：</li> </ul> <pre><code class="javascript"><script type="text/javascript"> window.name = 'I was there!'; // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右 // 数据格式可以自定义，如json、字符串 </script> </code></pre> <ul> <li>在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。app.html部分代码如下：</li> </ul> <pre><code class="javascript"><script type="text/javascript"> var state = 0, iframe = document.createElement('iframe'), loadfn = function() { if (state === 1) { var data = iframe.contentWindow.name; // 读取数据 alert(data); //弹出'I was there!' } else if (state === 0) { state = 1; iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件 } }; iframe.src = 'http://b.com/data.html'; if (iframe.attachEvent) { iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe); </script> </code></pre> <ul> <li>获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。</li> </ul> <pre><code class="javascript"><script type="text/javascript"> iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); </script> </code></pre> <p><strong>总结起来即：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。</strong></p> <h3>HTML5 postMessage(IE8+)</h3> <p><code>otherWindow.postMessage(message, targetOrigin);</code></p> <ul> <li>otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。</li> <li>message: 所要发送的数据，string类型。</li> <li>targetOrigin: 用于限制otherWindow，“*”表示不作限制</li> </ul> <p>a.com/index.html中的代码：</p> <pre><code class="javascript"><iframe id="ifr" src="b.com/index.html">

b.com/index.html中的代码：

用nginx/Apache把B网站的数据url反向代理。(数据转发)

参考

AJAX 跨域请求 - JSONP获取JSON数据
JavaScript跨域总结与解决办法
HTTP访问控制(CORS)

Web 跨域

为什么需要跨域?

用nginx/Apache把B网站的数据url反向代理。(数据转发)

参考

你可能感兴趣的:(Web 跨域)