The article directories

  • What is cross-domain for browsers
    • 1. Same-origin policy
    • 2. Ajax cross-domain
    • 3. Why cross-domains
  • Cross-domain solutions
    • 1. Spring boot configuration

What is cross-domain for browsers

  • inbaiduWeb console throughfetch()accessbaiduNo problem
  • inbaiduWeb console throughfetch()accesstaobao, will report an error, this is often said to cross domain

1. Same-origin policy

The same origin policy was introduced to browsers by Netscape in 1995. Currently, all browsers implement this policy.

Originally, it meant that the Cookie set by page A could not be opened on page B unless the two pages were “homologous”. By homology we mean “three of the same” :

  • The agreement is the same
  • Domain name is the same
  • The same port

The purpose of the same origin policy is to ensure the security of user information and prevent malicious websites from stealing data.

Imagine A situation like this: website A is A bank. After the user logs in, website A sets A Cookie on the user’s machine, which contains some privacy information (such as the total amount of deposit). After users leave website A, they visit website B. If there is no same-origin restriction, website B can read the Cookie of website A, and the privacy information will be leaked. What’s more, cookies are often used to save the user’s login status. If the user does not log out, other websites can pretend to be the user and do whatever they want. Because browsers also specify that submitting forms is not subject to the same origin policy.

Therefore, the same origin policy is necessary, otherwise cookies can be shared and the Internet is not safe at all.

With the development of the Internet, the same origin policy has become more and more strict. Currently, there are three behaviors that are restricted if they are not homologous.

  1. Cookies, localStorage, and indexedDB of non-homogeneous web pages cannot be obtained.
  2. DOM (IFrame) of non-cognate web pages cannot be accessed.
  3. You cannot send AJAX requests or FETCH requests to non-same-origin addresses (you can send, but the browser refuses to accept the response).

2. Ajax cross-domain

The browser’s same-origin policy can lead to cross-domain, meaning that if a protocol, domain name, or port is different, it is treated as a different domain and cannot use Ajax to send HTTP requests to servers from different sources. First we need to clarify a question, the request is cross-domain, the request is sent? The answer is yes, but the browser blocks the response.

3. Why cross-domains

Ajax’s same-origin policy is mainly used to prevent CSRF (cross-site request forgery) attacks. Without Ajax’s same-origin policy, it is very dangerous. Every HTTP request we initiate will carry the cookie corresponding to the request address, so we can do the following attacks:

  1. The user logs in to his bank pagemybank.com.mybank.comAdd the user id to the user’s cookie.
  2. Users browse malicious pagesevil.com. The malicious AJAX request code in the page is executed.
  3. evil.comtohttp://mybank.comWhen making an AJAX HTTP request, the request will default tohttp://mybank.comThe corresponding cookie is sent at the same time.
  4. The bank page extracts the user id from the cookie sent, verifies that the user is correct, and returns the request data in response. That’s when the data gets leaked.
  5. And because Ajax is executed in the background, the user is unaware of the process.

DOM same-origin policy is the same. If iframes can be accessed across domains, they can be attacked as follows:

  1. Create a fake website that uses iframe to nest a bank websitemybank.com.
  2. Adjust the width and height of the iframe to the entire page, so that users come in just like the bank’s website, except for the domain name.
  3. At this point, if the user enters the account password, our main website can be accessed across domainshttp://mybank.comDom node, can get the user’s input, then complete an attack.

So with the cross-domain restriction, we can access the Internet more safely.

Cross-domain solutions

In order to solve the problem of cross-domain browser, W3C proposed a cross-source Resource Sharing scheme, that is, CROSS-origin Resource Sharing (CORS). It allows the browser to issue XMLHttpRequest requests across source servers.

In fact, to be precise, the cross-domain mechanism prevents data from being fetched across domains, not requests from being sent.

Therefore, the key to CORS communication is the server. As long as the server implements the CORS interface, it can communicate across domains.

CORS divides requests into two categories: simple and non-simple, which support cross-domain communication, respectively.

1. Spring boot configuration

Spring MVC version 4.2 adds support for CORS, making cross-domain access very easy with Spring Boot.

  • use@CrossOriginAnnotations to realize
package com.xdx97.backstage.controller;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
/** * resolves the */ of cross-domain requests
 
@Configuration
public class CorsConfig {
    private CorsConfiguration corsFilter(a) {
        CorsConfiguration config= new CorsConfiguration();
        // You need a cross-domain address
        // * Indicates that all addresses are accessible
        config.addAllowedOrigin("*");
        // Request headers across domains
        config.addAllowedHeader("*"); / / 2
        // Cross-domain request methods
        config.addAllowedMethod("*"); / / 3
        You can carry cookies with you
        // The end result is that the same session can be retrieved on cross-domain requests
        config.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        // Configure the accessible address
        source.registerCorsConfiguration("/ * *", config()); / / 4
        return newCorsFilter(source); }}Copy the code