Front-end browser cross-domain related clearance secrets

1. Same-origin policy

(1) What is the same-origin policy

Why do we talk about the same origin policy first, because what happens when you cross domains is you violate the same origin policy

Refer to MDN for an explanation of homology

The same origin policy is an important security policy that restricts how an Origin document or the scripts it loads can interact with resources from another source. It can help block malicious documents and reduce the number of vectors that can be attacked.

(2)homologousthedefine

Two urls are cognate if their protocol, port (en-us) (if specified), and host are the same. This scheme is also known as a “protocol/host/port tuple”, or simply “tuple”. (” tuple “refers to the whole of a group of items, in the general form of double/triple/quadruple/quintuple/etc.).

The following table gives the comparing with the URL http://store.company.com/dir/page.html source example:

URL	The results of	why
`http://store.company.com/dir2/other.html`	homologous	Only the path is different
`http://store.company.com/dir/inner/another.html`	homologous	Only the path is different
`https://store.company.com/secure.html`	failure	Agreement is different
`http://store.company.com:81/dir/etc.html`	failure	Different ports (`http://`The default port is 80)
`http://news.company.com/dir/other.html`	failure	The host different

2. How to solve cross-domain problems?

Cross-domain problems occur not because the server does not return the data in response, but because the browser restricts it

(1) the json

The json principle

Web pages can get JSON data dynamically generated from other sources by taking advantage of the <script> tag’s lack of cross-domain limitations. JSONP requests must be supported by the other party’s server.

Remark:

Comparison between JSONP and AJAX JSONP is the same as AJAX in that the client sends a request to the server to obtain data from the server. But AJAX is a same-origin policy,JSONP is a non-same-origin policy (cross-domain request)

The whole implementation process of JSONP

Advantages and disadvantages JSONP is simple and compatible, and can be used to solve the problem of cross-domain data access in mainstream browsers. The disadvantages are that supporting only get methods is limited and insecure and may be subject to XSS attacks.

Declare a callback function whose name (such as show) is passed to the server that requests data across domains and whose parameter is to fetch the target data (the data returned by the server).
Create a
Once the server receives the request, it needs to do something special: concatenate the name of the function passed in with the data it needs to give you into a string, for example: the name of the function passed in is show, and the data it prepares is show(‘ I like ping-pong ‘).
Finally, the server returns the data to the client through HTTP protocol, and the client calls the callback function (show) previously declared to operate on the returned data.

/ / encapsulates the json

jsonp.html
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = s, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function jsonp({ url, params, callback }) {
            return new Promise((resolve, reject) = > {
                let script = document.createElement('script');
                params = JSON.parse(JSON.stringify(params));
                let arrs = [];
                for (let key in params) {
                    arrs.push(`${key}=${params[key]}`);
                }
                arrs.push(`callback=${callback}`);
                script.src = `${url}?${arrs.join('&')}`;
                document.body.appendChild(script);
                window[callback] = function (data) {
                    resolve(data);
                    document.body.removeChild(script); }})}// front-end call
        jsonp({
            url: 'http://localhost:3000/hobby'.params: {
                wd: 'I Love play pingpang'
            },
            callback: 'show'
        }).then(data= > {
            console.log(data)
        })


    </script>
</body>
</html>
Copy the code

// The back-end code uses Express to create a back-end service

server.js
// Express is used here
var express = require('express');
var router = express.Router();
var app = express();
router.get('/hobby'.function(req,res,next) {
 // The data to respond back
  let data = {
    username : 'zhangsan'.password : 123456
  }

  let {wd , callback} = req.query;
  console.log(wd);
  console.log(callback);
  // Call the callback function and respond
  res.end(`${callback}(The ${JSON.stringify(data)}) `);
})
app.use(router);
app.listen(3000);
Copy the code

Start the service using node Server

(2) CORS (Cross-origin Resource Sharing)

CORS requires both browser and backend support. IE8 and IE9 need to use XDomainRequest to realize that the browser will automatically carry out CORS communication. The key to realize CORS communication is the back end. As long as the backend implements CORS, it implements cross-domain. To enable CORS, set access-Control-allow-Origin on the server. This attribute indicates which domain names can access resources. If a wildcard is set, all websites can access resources. Although setting up CORS has nothing to do with the front end, solving cross-domain problems in this way can result in two cases of simple and complex requests being sent.

A simple request

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

Condition 1: Use one of the following methods:

GET
HEAD
POST

Condition 2: The value of the content-Type is limited to one of the following:

text/plain
multipart/form-data
Any XMLHttpRequestUpload object in the Application/X-www-form-urlencoded request does not register any event listeners;

Complex request

A request that does not meet the above conditions is a complex request. A CORS request of a complex request will add an HTTP query, called “precheck” request, before formal communication. This request is the option method, through which the server can know whether to allow cross-domain request. When a PUT request is sent to the background, it is a complex request. The background configuration is as follows:

// Which method is allowed to access me
res.setHeader('Access-Control-Allow-Methods'.'PUT')
// Precheck the survival time
res.setHeader('Access-Control-Max-Age'.6)
// OPTIONS request no processing
if (req.method === 'OPTIONS') {
  res.end() 
}
// Define what is returned in the background
app.put('/getData'.function(req, res) {
  console.log(req.headers)
  res.end('I like playing table tennis')})Copy the code

// Front-end code

cors.html
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let xhr = new XMLHttpRequest();
        document.cookie = 'name=hw';
        xhr.withCredentials = true; // Set whether cookies are included in the front end
        xhr.open('PUT'.'http://localhost:4000/getData'.true);
        xhr.setRequestHeader('name'.'hw');
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    console.log(JSON.parse(xhr.response));
                    console.log(xhr.getResponseHeader('name'))
                }
            }
        }
        xhr.send();
    </script>
</body>
</html>
Copy the code

// Create a port service for the front-end

let express = require('express');
let app = express();
app.use(express.static(__dirname))
app.listen(3000)
Copy the code

// Back-end code

cors.js
// Back-end code
let express = require('express')
let app = express()
let whitList = ['http://127.0.0.1:3000'] // Set the whitelist
app.use(function(req, res, next) {
  let origin = req.headers.origin
  if (whitList.includes(origin)) {
    // Set which source can access me
    res.setHeader('Access-Control-Allow-Origin', origin)
    // Which header is allowed to visit me
    res.setHeader('Access-Control-Allow-Headers'.'name')
    // Which method is allowed to access me
    res.setHeader('Access-Control-Allow-Methods'.'PUT')
    // Cookies are allowed
    res.setHeader('Access-Control-Allow-Credentials'.true)
    // Precheck the survival time
    res.setHeader('Access-Control-Max-Age'.6)
    // Allow return headers
    res.setHeader('Access-Control-Expose-Headers'.'name')
    if (req.method === 'OPTIONS') {
      res.end() // OPTIONS request no processing
    }
  }
  next()
})
app.put('/getData'.function(req, res) {
  let data = {
      username : 'zhangsan'.password : 123456
  }
  console.log(req.headers)
  res.setHeader('name'.'jw') // Return a response header that needs to be set in the background
  res.end(JSON.stringify(data))
})
app.get('/getData'.function(req, res) {
  console.log(req.headers)
  res.end('hhhhaha')
})
app.listen(4000)
Copy the code

// In the browser address bar, enter 127.0.0.1:3000/ cers.html

You can see that there are two getData requests

PUT request

The response Headers section

The Request Headers section

This implements a cross-domain request access from port 3000 to port 4000

The OPTIONS request

(3) Nginx solves cross-domain problems

In many ways to solve the cross domain, it is inevitable to need the support of the server, using Nginx can be pure front-end to solve the request cross domain problem

server
{
    listen 3002;
    server_name localhost;
    location /ok {
        proxy_pass http://localhost:3000;

        # specify methods that are allowed across domains, * for all
        add_header Access-Control-Allow-Methods *;

        # precheck the cache of the command, if not cached will send two requests each time
        add_header Access-Control-Max-Age 3600;
        # Cookie requests require this field and set to true
        add_header Access-Control-Allow-Credentials true;

        # indicates that this domain is allowed to make cross-domain calls (the domain name and port from which the client sends the request)
        # $http_origin does not use * because requests with cookies do not support *
        add_header Access-Control-Allow-Origin $http_origin;

        # represents the dynamic retrieval of fields in the request header
        add_header Access-Control-Allow-Headers 
        $http_access_control_request_headers;

        The request will not be sent until the precheck command passes
        Check whether the type of request is a precheck command
        if ($request_method = OPTIONS){
            return200; }}}Copy the code