Several common solutions across domains

directory

1. Background

2. Knowledge analysis

3. Frequently Asked Questions

4. Solutions

5. Coding

6. Expand your thinking

7. References

8. More discussion

1.1 What is Cross-domain?

Cross-domain refers to a document or script in one domain trying to request a resource in another domain. Cross-domain is defined broadly here.

In a broad sense, cross-domain:

1.) Resource jump: A link, redirection, form submission

2.) Resource embedding: LINK Script IMG frame and other DOM tags, as well as style background: URL (), @font-face() and other file external links

3.) Script request: AJAX request initiated by JS, cross-domain operation of DOM and JS objects, etc

In the front end, what we usually mean by cross-domain is narrowly defined, a class of request scenarios that are limited by the browser’s same-origin policy.

1.2 So what is the same-origin policy? The Same Origin Policy (SOP) is a convention introduced by Netscape into the browser in 1995. It is the core and most basic security function of the browser. Without the Same Origin policy, the browser is vulnerable to XSS and CSFR attacks. Same-origin means that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin.

The same origin policy restricts the following behaviors:

1.) Cookie, LocalStorage, and IndexDB cannot be read. 2.) DOM and Js objects cannot be obtainedCopy the code

1.3 Common Cross-domain scenarios

2. Knowledge analysis

2.1 Common cross-domain mode

Jsonp encounters the same origin policy problem when sending HTTP requests using the XMLHTTPRequest object. Different domain requests are blocked by the browser. At this point, you can choose to bypass, or rather not use, the XMLHTTPRequest object to send cross-domain HTTP requests.

When you write HTML, you'll find things likeCopy the code

This tag does not run into ‘cross-domain’ issues. Strictly speaking, this is not cross-domain. Cross-domain means sending HTTP requests in script code to non-homologous domains, which are simply cross-site resource requests

We can then try to implement a cross-domain HTTP request using this cross-site resource request approach

// If jsonp requests GET

if ( ctx.method === ‘GET’ && ctx.url.split(‘? ‘)[0] === ‘/getData’) {

// Get the JSONp callbackCopy the code

let callbackName = ctx.query.callback || ‘callback’

let returnData = {

success: true,

data: {

text: ‘this is a jsonp api’,

time: new Date().getTime(),

}

}

// jsonp script string let jsonpStr = '; ${callbackName}(${json.stringify (returnData)}) '// text/javascript, Type = 'text/javascript' // Output the jSONp string ctx.body = jsonpStrCopy the code

} else {

ctx.body = ‘hello jsonp’

}

})

Reverse proxy for nGINx The Nginx supports reverse proxies to implement load balancing on websites. This part first write a nginx configuration, then need to in-depth study of nginx proxy module and load balancing module.

Nginx uses proxy_pass_http to configure proxy sites while upstream implements load balancing.Copy the code

Window. name + iframe window.name Basic principles of the transmission technology: When a page is opened in the browser or an iframe is added to the page, a corresponding Window object is created. The window name attribute does not change when the page loads a new page. This can be done by dynamically adding an iframe to the page and then loading the data page by SRC, where the required data is assigned to window.name. However, the parent page carrying the iframe cannot be accessed directly, and the name attribute of the iframe is not in the same domain. In this case, you only need to load the IFrame to a blank page in the same domain as the carrying page to read the data of window.name

Name is a property of a global /window object in the browser environment, and the value of the name property remains the same when a new page is loaded in the frame. The target page sets the name property of the frame by loading a resource in the iframe. The name property value can be retrieved to access the information sent by the Web service. However, the name attribute is accessible only to the frame of the same domain name. This means that in order to access the Name property, the frame must be navigated back to the original domain when the remote Web service page is loaded. The same origin policy still prevents other frames from accessing the name property. Once the name property is obtained, the frame is destroyed.

At the top level, the name attribute is not secure, and any information set in the name attribute is available for all subsequent pages. However, the windowName module always loads resources in an iframe, and the iframe is destroyed once the data is retrieved, or when you browse a new page at the top level, so other pages can never access the window.name property.

iframe= document.createElement(‘iframe’);

iframe.style.display= ‘none’;

var state = 0;

iframe.onload= function() {

if(state === 1) {

var data= JSON.parse(iframe.contentWindow.name);

console.log(data);

iframe.contentWindow.document.write(”);

iframe.contentWindow.close();

document.body.removeChild(iframe);

}else if(state === 0) {

state = 1;

iframe.contentWindow.location= ‘http://localhost:81/cross-domain/proxy.html’; // Point to an empty file in your root directory

}

};

iframe.src= ‘http://localhost:8080/data.php’; // Different source data to request

document.body.appendChild(iframe);

Node.js or other servers set the CORS header to authorize cross-domains

3. Frequently Asked Questions

4. Solutions

5. Coding

6. Expand thinking 6.1 Forward proxy

A forward proxy is like a jump board in that the proxy accesses external resources.

I am a user, I can’t visit a web site, but I can visit a proxy server, the proxy server, he can access that I can’t access the website, so I even on a proxy server first, tell him I need that can not visit the web site content, the proxy server to get back, and then return to me. From the site’s point of view, only once is recorded when the proxy server comes to pick up the content, sometimes without knowing it is the user’s request and hiding the user’s information, depending on whether the proxy tells the site or not.

The client must set up the forward proxy server, of course, if you know the IP address of the forward proxy server, and the port of the proxy program.

To sum up: a forward proxy is a server located between the client and the origin server. In order to get content from the origin server, the client sends a request to the proxy and specifies the target (the origin server). Then the proxy forwards the request to the original server and returns the obtained content to the client. Clients must make some special Settings to use forward proxies.

   Copy the code

Forward proxy uses:

(1) Access previously inaccessible resources, such as Google

(2) Can do cache, speed up access to resources

(3) Authorize client access and authenticate Internet access

(4) The agent can record user access records (online behavior management) and hide user information externally

6.2 Reverse Proxy

The client is not aware of the existence of proxy, the reverse proxy is transparent to the outside, visitors do not know that they are accessing a proxy. Because the client doesn’t need any configuration to access it.

The actual operation mode of Reverse Proxy refers to that the Proxy server receives Internet connection requests, forwards the requests to the server on the internal network, and returns the results obtained from the server to the client requesting Internet connection. In this case, the proxy server behaves as a server.

Reverse proxy functions:

(1) To ensure Intranet security, you can use the reverse proxy to provide the WAF function and prevent Web attacks

For large Web sites, the reverse proxy is used as the IP address of the public network, and the Web server is the Intranet.

(2) Load balancing, through the reverse proxy server to optimize the load of the website

6.3 Differences between the two

Let me explain it with a picture of a soul painter

7. References front-end common cross-domain solutions: https://www.cnblogs.com/roam/p/7520433.html

Js in several cross domain to use a: https://www.cnblogs.com/2050/p/3191744.htmlCopy the code

8. More discussion Thanks for watching

Today’s share is over here, welcome everyone to like, forward, leave a message, pat brick ~

Skill tree.IT Monastery

“We believe that everyone can become an engineer. From now on, find a senior to guide you to the entrance, control the pace of your own learning, and no longer feel confused on the way to learning.”

Here is the skill tree.IT Shuzhen Institute, where thousands of brothers find their own learning route, learning transparent, growth visible, brothers 1 to 1 free guidance.

Come with me learn ~ http://www.jnshu.com/login/1/21109035