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 through
fetch()
accessbaiduNo problem - inbaiduWeb console through
fetch()
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.
- Cookies, localStorage, and indexedDB of non-homogeneous web pages cannot be obtained.
- DOM (IFrame) of non-cognate web pages cannot be accessed.
- 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:
- The user logs in to his bank page
mybank.com
.mybank.com
Add the user id to the user’s cookie. - Users browse malicious pages
evil.com
. The malicious AJAX request code in the page is executed. evil.com
tohttp://mybank.com
When making an AJAX HTTP request, the request will default tohttp://mybank.com
The corresponding cookie is sent at the same time.- 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.
- 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:
- Create a fake website that uses iframe to nest a bank website
mybank.com
. - 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.
- At this point, if the user enters the account password, our main website can be accessed across domains
http://mybank.com
Dom 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
@CrossOrigin
Annotations 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