现代刨沙艺术 ~weng cv blog 博客 misc contact


跨域 Recap

1. 什么是跨域

Same-origin policy 同源策略

An origin is defined by the scheme, host, and port of a URL. Generally speaking, documents retrieved from distinct origins are isolated from each other. For example, if a document retrieved from http://example.com/doc.html tries to access the DOM of a document retrieved from https://example.com/target.html, the user agent will disallow access because the origin of the first document, (http, example.com, 80), does not match the origin of the second document (https, example.com, 443). For networking APIs, the same-origin policy distinguishes between sending and receiving information. Broadly, one origin is permitted to send information to another origin, but one origin is not permitted to receive information from another origin. The prohibition on receiving information is intended to prevent malicious web sites from reading confidential information from other web sites, but also prevents web content from legitimately reading information offered by other web sites.[1]

The same-origin policy also applies to XMLHttpRequests unless the server provides a Access-Control-Allow-Origin (CORS) header. Notably WebSockets are not subject to same-origin policy. [2]

要点:

比如我在tail.moe:8765运行一个Web Service,在tail.moe:80运行一个Web Site。tail.moe:8765和tail.moe:80不是同一个origin,该Site的JavaScript脚本无法请求Web Service。要突破 同源策略,使得JavaScript脚本可以请求Web Service,需要使用跨域方法(“源”和“域”是一个意思……大概)。

2. 常见的跨域方法

2.1 JSONP

JSONP or “JSON with padding” is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on

Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results. The JSONP parameters passed as arguments to a script are defined by the server.

要点:

2.2 Cross-origin resource sharing (CORS)

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. In particular, JavaScript’s AJAX calls can use the XMLHttpRequest mechanism. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. [3]

要点:

关于如何开启服务器的CORS,enable-cors.org上有详尽的描述。只允许GET/POST方法的simple CORS requests比较简单。

3 Hacking

流氓会武术,谁也挡不住。1中举的例子,如果Web Site和Web Service都是自己的服务,又懒得开启CORS,可以在Web Site的服务器上使用消息转发,将tail.moe:80/foobar/转发至tail.moe:8765。一秒钟跨域变同域。。。