【Glossary】
Cross-Origin: https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript
Same Origin Policy (note the Network Access section): http://www.w3.org/Security/wiki/Same_Origin_Policy
【Problem Description】
For security reasons (to prevent malicious websites from easily reading the content displayed by other websites, because the content may contain sensitive information, imagine iframe nested bank pages)
in principle, cross-domain writing is allowed and cross-domain reading is restricted
. Writing refers to the upstream/sending request of data, and reading refers to the downstream/receiving response of data. (However, cross-domain writing is also very insecure, and can easily lead to CSRF/clickjacking attacks. Browsers have restricted cross-domain reading, and if cross-domain writing is restricted, each page on the Internet will become an island. Avoid illegal cross-domain writing Tokens are required, which will not be discussed in this article.)
Consider the following situation:
- The link to the external domain name is the same as the get request to the external domain through the form, and it is also allowed. From the moment of clicking, the current domain name of the browser is transferred to the target website, that is, it is completely written and read within the domain.
- Post requests to external domains via forms are also allowed, for the same reason as above, the source website cannot read any content of the target website.
- AJAX (with XMLHttpRequest object) cross-domain get/post is prohibited, because AJAX is used to read the content of the response, which touches the cross-domain read limit.
- JSONP belongs to cross-domain reading, and the form is limited to get requests, because it takes advantage of the characteristics of the script tag (the browser considers cross-domain reading scripts to be an exception, similar to img, iframe, etc., pay attention to the src attribute they share).
Therefore, for browsers: 1 and 2 are not cross-domain; 3 follows the principle of restricting cross-domain reading; 4 is an allowed exception.
Although JSONP is very easy to use, it is destined to be a get request. The get request has semantic requirements (idempotent), length limit (limited to 255 bytes for compatibility), security risks (susceptible to csrf attacks, and the solution to csrf must be post request cooperation) token usage).
So, how to implement cross-domain post request?
【solution】
1 、 CORS
Overview:
Cross-Origin Resource Sharing
, a cross-site resource sharing standard formulated by W3C. An options sniff (called preflight, but
simple
requests will not appear) will be generated before the post to confirm whether there is permission for cross-domain requests; the client post will bring the Origin header to indicate the source website, and the server response needs to bring The Access-Control-Allow-Origin header above matches the value of the Origin header to indicate permission. ie8 provides an encapsulated XDomainRequest object that partially implements the standard; other browsers provide an
XMLHttpRequest (Level 2)
object.
Requirements: ie8(XDomainRequest)/ie10/safari4/GC/FF3.5
Reference:
cross-site xmlhttprequest with CORS
Reference: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
Reference (Chinese): http://www.zfkun.com/394.html (the definition description of simple reuest is incomplete)
Advantage: W3C standard scheme
Disadvantages: not compatible with old browsers,
Mobile browsers are not yet supported.
Desktop and Mobile Browser Compatibility
注意：若在多个iframe之间跨域通信，优先考虑
window.postMessage
2、invisible iframe
概述：通过js动态生成不可见表单和iframe，将表单的target设为iframe的name以此通过iframe做post提交。提交后由于跨域，无法直接读取响应内容。一般的做法是，iframe内通过js改变自身location的fragment，外部则监听iframe的onload事件，读取fragment的内容。有现成的跨域iframe通信类库，如jQuery PostMessage Plugin。
要求：ie6/safari/GC/FF4
优点：兼容性佳，facebook，google，新浪已/曾采用
缺点：依赖hack实现，响应数据量大时需要切片、多次设置fragment并轮询，响应频繁时可能失效。
3、server proxy
概述：当前域实现一个代理，所有向外部域名发送的请求都径由该代理中转。
缺点：每个使用方都需要部署代理，数据中转低效，对js有侵入。
4、flash proxy
概述：利用不可见的swf跨域post提交数据，需要部署crossdomain.xml。例如alirte会自动检测，若用户安装了flash，则以此实现跨域通信。
要求：flash9
优点：ADOBE标准方案，相对CORS兼容性佳，相对invisible iframe响应数据量较大时优势明显。
缺点：依赖flash。
http://www.cnblogs.com/davidwang456/p/3977627.html