1. Same-Origin Policy

The same-origin policy is the cornerstone of browser security.
The definition of same-origin covers three aspects:

• Same protocol
• Same domain
• Same port

Scope of the restrictions:

• Cookie, LocalStorage, and IndexDB cannot be read
• The DOM cannot be obtained
• AJAX requests cannot be sent

Simply put, two URLs whose protocol, domain, and port differ in any way are not allowed to communicate with each other, and the scope covers reading each other’s cookies and DOM and sending AJAX requests.

2. Cross-Origin Communication

• Sharing cookies. When the top-level domain is the same but the subdomains differ, cookies can be shared to achieve cross-origin access.
• Fragment identifier. In http://x.com/x.html#data, the data after the URL’s # is the fragment identifier; an iframe can obtain the data, thereby achieving cross-origin access.
• window.name. Regardless of whether they are same-origin, as long as they are in the same window, if the previous page sets window.name, the next page can read it.
• window.postMessage. A cross-document messaging API that allows communication across windows, whether or not the two windows are same-origin.

3. AJAX

• JSONP
  The page adds a script element and requests JSON data from the server; after receiving the request, the server places the data in a designated callback function. However, it can only send GET requests.
• WebSocket
  WebSocket is a communication protocol that uses ws:// (unencrypted) and wss:// (encrypted) as protocol prefixes. This protocol does not enforce the same-origin policy, because the Origin field can set the request source.
• CORS
  CORS requires support from both the browser and the server, and CORS communication is no different from same-origin AJAX communication.
  Once the browser detects that an AJAX request is cross-origin, it automatically adds some additional header information.
  The server side needs to set (1) Access-Control-Allow-Origin, the allowed origin; (2) Access-Control-Allow-Credentials, whether to send cookies and HTTP authentication information; (3) Access-Control-Expose-Headers, the response headers that scripts are allowed to access.

4. django-cors-headers

Install

1

pip install django-cors-headers

settings.py configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

INSTALLED_APPS = (
    'corsheaders',
)
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

For more detailed configuration, see the project homepage, Go

5. References

• https://github.com/ottoyiu/django-cors-headers
• http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
• http://www.ruanyifeng.com/blog/2016/04/cors.html
  https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS