Why can’t XMLHTTPRequest request resources across domains

This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

The blunt answer is that the same origin policy prevents cross-domain resource requests, but we’ll look at why XMLHTTPRequest can’t cross-domain resource requests in more detail for the big prize.

So let’s just talk a little bit about what is XMLHTTPRequest

History: Born in 1999, Microsoft integrated the XMLHttpRequest object in Internet Explorer 5, but people didn’t take it seriously. Ajax technology began to gain traction in 2005 when Google used the object in its GTalk instant chat tool

There are two ways to create XMLHTTPRequest objects: IE (lower version) and NON-IE (mainstream)

Internet Explorer (before Internet Explorer 7) :

      var xhr = new ActiveXObject('Msxml2.XMLHTTP');
Copy the code

Non-internet Explorer (Chrome, Firefox, Safair, Sogou, etc., including after IE7+) (mainstream browsers):

 var xhr = new XMLHttpRequest();
Copy the code

Example: Create an XMLHttpRequest object compatible with pre-IE7 and mainstream browsers

// Create an XMLHttpRequest object compatible with both earlier and non-Internet Explorer browsers
function getXhr () {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // XMLHttpRequest objects are available in both IE7+ and non-IE
        xmlhttp = new XMLHttpRequest();
    } else {
    	// How to instantiate Internet Explorer of earlier versions
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }

    return xmlhttp;
}
Copy the code

Is the XMLHttpRequest object a W3C standard?

The XMLHttpRequest object is not specified by any W3C recommendation.

However, the W3C DOM Level 3 “Load and Save” specification contains some similar functionality, but no browser has implemented them yet.

What is cross-domain again

Cross-domain: Browsers cannot execute scripts from other sites. Simply put, site A calls site B’s data.

Weather forecast.

Cross-domain causes

Caused by the same origin policy of the browser, is the security restriction that the browser imposes on JavaScript.

What is the same origin policy

The Same Origin policy is a convention that is a security feature of the browser.

The same origin policy isolates DOM, page data, and network traffic from different sources to secure Web pages.

What is the same

Cognate: Same protocol, same domain name, same port; Different sources are cross-domain.

Example 👀 versus wwww.baidu.com/

Security and convenience trade-offs

The page can import third-party resources

For example, a malicious program inserts JavaScript code into the content of an HTML file. When the HTML file data is sent to the browser, the browser can’t tell whether the inserted file is malicious or normal, so the malicious script parasitically infuses the page. When the page is launched, It can modify the user’s search results, change the link direction of some content, and so on.

In addition, it can also send sensitive data such as cookies, IndexDB and LoacalStorage to the server through XSS. Specifically, when you accidentally click on a malicious link in a page, malicious JavaScript code can read the page data and send it to the server.

This is a very typical XSS attack. To address XSS attacks, a content security policy, called CSP, has been introduced in browsers. The core idea of CSP is to let the server decide what resources the browser can load and whether the browser can execute inline JavaScript code. By doing so, you can greatly reduce XSS attacks.

Cross-domain resource sharing and cross-document messaging mechanisms

Cross-domain Resource Sharing (CORS) Uses this mechanism to control cross-domain access and secure cross-domain data transmission. The cross-document messaging mechanism communicates with the DOM of different sources through the JavaScript interface of window.postMessage.

conclusion

The relationship between the same origin policy, CSP, and CORS: The same origin policy isolates DOM, page data, and network communication from different sources to ensure Web page security.

Non-homologous page browsers cannot operate on their own, but only in the manner provided by the browser.

Such as:

1. Read data and manipulate the DOM using a cross-document mechanism.
2. Cross-domain requests use the CORS mechanism.
3. Use CSP to reference third-party resources.

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Git Git

Easy to understand Git introduction

Git implements automatic push

How do I use Git in my work

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage