The same-origin policy

homologous

The source

Window. origin or location.origin can get the current source

Source = Protocol + domain name + port number

Homologous definitions

If the protocol, domain name, and port number of two urls are the same, the two urls are of the same origin

For example –

Qq.com, http://www.baidu…. Different source

Baidu.com, http://www,baidu.com different sources

It must be identical to be homologous

The same-origin policy

Browser rules

If JS runs in source A, it can only obtain data from source A, not source B, that is, cross-domain is not allowed

Example (omit HTTP protocol)

If river.com/index.html references cdn.com/1.js, then say “1.js runs in the source river.com”

Note that this has nothing to do with cdn.com, although 1.js was downloaded from it

Therefore, 1.js can only obtain the data of river.com, not 1.river.com or QQ.com

That’s what the browser does

The browser is deliberately designed to protect user privacy

If there is no same-origin policy

Take QQ Space as an example

Source for user.qzone.qq.com

Assume that the current user is logged in (with cookies), and assume that the AJAX request /friends.json retrieves the user’s friends list

The hacker attacks

If anyone shared the phishing site of qzone-qq.com

Click on this page, which requests a list of the user’s friends

User.qzone.qq.com/friends.jso…

The hackers got their hands on the friends list

Root of the problem
Unable to distinguish the sender

There is almost no difference between the JS in the Qzone page and the JS in the hacker page in sending requests (referer is different).

If the backend developer doesn’t check the referer, it makes no difference

So, without the same origin policy, any page can steal qzone data

Check the referer?

Safety rule: a safety chain is only as strong as its weakest link

Therefore, browsers should proactively prevent this behavior. In short, browsers have strict same-origin policies for user privacy

For example

The source code

steps
Create a directory

Qq.com has a server.js, used to simulate QQ space

Baidu.com has a server.js, which is used to simulate hacker websites

qq.com

/ index. HTML is the home page

/qq.js is a JS script file

/friends.json is emulated friend data

Port listening is 8888, visit http://127.0.0.1:8888

baidu.com

/ index. HTML is the home page

/frank.js is a JS script file

Port listening is 9999, visit http://127.0.0.1:9999

Example Set the local domain name mapping

Map qq.com to 127.0.0.1 and go directly to qq.com:8888/index.html

Let baidu.com mapped to 127.0.0.1, direct access to the baidu.com: 9999 / index. HTML

AJAX
Normal Use of AJAX

JS running in qq.com:8888 can access /friends.json

Hackers steal data

JS running in Baidu.com :9999 cannot be accessed

Browsers need CORS

Ask questions

Hacker’s request sent successfully, qq.com has a log in the background. But the hacker didn’t get the response because the browser didn’t give the data.

The other question

  1. Why does a.qq.com visit qq.com also count as cross-domain?

    Because historically, there have been different corporate common domain names, a.qq.com and QQ.com are not necessarily the same site, and the browser is cautious to assume that these are different sources.

  2. Why do different ports count as cross-domain?

    For the same reason, one port for one company.

  3. Why are the IP addresses of two websites the same?

    For the same reason, IP addresses can be shared.

  4. Why can CSS, JS, and images be used across domains?

    The same-origin policy restricts data access. We refer to CSS, JS, and images without actually knowing what they are, just referring to them.

CORS

Implement cross-domain methods

The root cause

By default, different sources cannot access each other’s data.

If qq.com and Baidu.com are actually my websites, I want the two websites to visit each other, and the browser also provides a way to share data.

Using CORS

Please note in advance that baidu.com can be accessed in the response header of QQ.com.

Access-Control-Allow-Origin

JSONP

IE 6, 7, 8, and 9 do not support CORS. To be compatible with IE, use JSONP.

define

JSONP has nothing to do with JSON

steps

Qq.com writes the data to /friends.js

Baidu.com references /friends.js with the script tag

/ friends. Js

Baidu.com defines the window. XXX function in advance

({/ friends. Js execution window. XXX friends: […]. })

Frank.com then retrieved the data from window. XXX

To optimize the

  1. Window. XXX can be changed to another name, as long as the function name defined by Baidu.com is the same as the function name executed by qq.com/friends.js

  2. encapsulation

    Encapsulated into the json (‘ url ‘). Then (f1, f2)

What is JSONP?

When cross-domain, JSONP can be used if the current browser does not support CORS.

This is done by creating a script request JS file that performs the callback, which contains the required data.

The advantage of JSONP is that it can support cross-domain, but the disadvantage is that it is a script tag, so it can not do the exact state of AJAX. It can only send GET requests, but does not support POST.