1. Browser-Origin policy
- The same-origin policy restricts how documents or scripts loaded from the same source interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.
2. A definition of a source
If the two-page protocol, the port and the domain name are the same, then two pages have the same source, which is the same origin.
http://www.example.com/dir/page.html
This URL, the protocol is http://
, the domain name is www.example.com
, the port is 80
(the default port can be omitted). Its homologous situation is as follows.
http://www.example.com/dir2/other.html:
Homologous
http://example.com/dir/other.html:
Different sources (domain names are different)
http://v2.www.example.com/dir/other.html:
Different sources (domain names are different)
http://www.example.com:81/dir/other.html:
Different sources (ports are different)
Reference articles
- Https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
- Http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
The same-Origin policy stipulates that AJAX requests can only be sent to the same-origin URL, or error.
Jsonp enabling cross-domain access to data
JSONP (JSON with Padding) is a "usage pattern" of JSON
Because of the same-origin policy, the Web page that is generally located server1.example.com
cannot communicate with the server1.example.com
server that is not, and HTML
the <script>
element is an exception.
Ajax requests are affected by the same-origin policy, and cross-domain requests are not allowed
The link in the SRC attribute of the script tag can access the cross-domain JS script, using this feature, the server no longer returns JSON-formatted data, but instead returns a section of the JS code called a function, called in SRC, so that the cross-domain is implemented.
Jsonp is a common method for server-to-client cross-origin communication. The biggest feature is simple to use, old browsers all support, server transformation is very small.
The basic idea of JSONP is to dynamically create an <script>
element where the script element sends requests that are not ripe for the same origin policy and can only send a GET request. After the server receives the request, it returns the data in a callback function with the specified name.
<script>//srl server rendered JavaScript button.addeventlistener (' click ', (e) + = {/ /dynamically Create script var script = document.createelement (' script ') let Functionname= ' Blog1 ' +parseint (Math.ran Dom () *100000,10)//callback window[functionname]=function (Result) {if (res ult=== ' success ') {Amount.innertext=amount.innertext-1}else{}}/ /Send Request SCRIPT.SRC = ' http://feile.com/pay?callback= ' +functionname document.body.appendChild (script) Script.onload = function (e) {//Debugger E.currenttarget.remove () Delete Window[functionname]} script.onerror = function (e) {alert (' FAI L ') e.currenttarget.remove () Delete Window[functionname]}) </SCRI Pt>
The above code sends a request to the server by dynamically creating the Add script element, and the query string must have the callback parameter to specify the name of the callback function.
response.write(`${query.callback}.call(undefined,‘success‘)`)
After the server receives the request, it returns the data in the parameter position of the callback function. As soon as the browser defines the corresponding callback function, the function is immediately called.
SOURCE Download Link: Github
JSONP cross-domain