Cross-domain problem

Why are there cross-domain problems

The root cause of the cross-domain problem is the same origin policy of the browser

Homologous definitions

Two urls are homologous if their protocol, port (en-us) (if specified), and host are the same.

The same origin policy controls the type of interaction between different sources

Cross-origin writes are generally allowed. Examples include links, redirects, and form submission. A small number of HTTP requests require adding preFlight.
Cross-origin embedding is generally allowed (as illustrated below).

1, < script SRC ="..."></script> tags embed cross-domain scripts. Syntax error messages can only be captured in the same origin script.2, < link rel ="stylesheet" href="..."> Tags embed CSS. Due to the loose syntax rules of CSS, CSS cross-domain requires a properly set HTTP header content-Type. Different browsers have different restrictions: IE, Firefox, Chrome, Safari (skip to CVE-)2010-0051) and Opera.3<img>. Supported image formats include PNG,JPEG,GIF,BMP,SVG...4, multimedia resources played through <video> and <audio>.5, plug-ins embedded with <object>, <embed>, and <applet>.6, the font introduced by @font-face. Some browsers allow cross-origin fonts, some require same-Origin fonts.7, any resources loaded by <iframe>. Sites can use x-frame-options headers to prevent this form of cross-domain interaction.Copy the code

Cross-origin reads are generally not allowed, but can often be cleverly read access with embedded resources. For example, you can read the height and width of an embedded image, call methods of embedded scripts, or availability of an Embedded Resource.

The purpose of the same Origin policy is security

Browsers approach the same origin policy in two ways, one for interface requests and the other for Dom queries.

For interface request

Example: e-commerce phishing sites

A user opens a phishing site, and since there is no same-origin policy, it can make a request to a real e-commerce site. Because the server will add the set-cookie field in the response header after verification, and then the next time the request is sent, the browser will automatically attach the Cookie to the HTTP request header field Cookie, so that the illegal website is equivalent to logging in your account, do whatever you want.

Queries against the Dom

Example: bank phishing sites

<iframe name="yinhang" SRC ="www.yinhang.com"></iframe> Phishing site can be directly to other sites Dom const iframe = window. The frames [' yinhang] const node = iframe. Document. GetElementById (' you enter the password Input) // If you open a phishing site, it will reveal your account and passwordCopy the code

It is true that the same origin policy can avoid some risks, but it does not mean that the same origin policy is completely safe. It just means that the same origin policy is a basic security mechanism of the browser, which can increase the cost of attacks a little bit.

How to cross domain

JSONP

Take advantage of the fact that tags such as script and IMG that fetch resources have no cross-domain limitations. But JSONP can only make GET requests.

iframe+form

You can make a POST request.

Cors

CORS is a W3C standard, which stands for cross-origin Resource Sharing.

CORS has two types of requests, simple and non-simple.

A simple request

As long as the following two conditions are met, it is a simple request.

(1) The request method is one of the following three methods: HEAD, GET, POST

(2) HTTP headers do not exceed the following fields:

Accept
Accept-Language
Content-Language
Last-Event-ID

Content-type: is limited to three values

application/x-www-form-urlencoded
multipart/form-data
text/plain

Nginx

Nginx helps us forward the request to the real back-end domain name to avoid cross-domain.

Nginx configuration:

Server {# listening in9099Port to listen9099;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/ API like this, all forward to the real server address HTTP://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;}}Copy the code

If the back-end interface is a public API, such as some public service that gets the weather, this scenario is not applicable.

The correct way to open A Dom query under the same origin policy

postMessage

Window.postmessage () is an HTML5 interface that focuses on cross-domain communication between different Windows and different pages.

document.domain

This mode applies only to iframes with the same primary domain name but different subdomain names. For example, the primary domain name is crossdomain.com:9099 and the subdomain name is http://child.cros… = crossDomain.com can access the respective window objects.