XSS in the same-origin policy and cross-domain issues

XSS in the same-origin policy and cross-domain issues

Transfer from https://www.cnblogs.com/chaoyuehedy/p/5556557.html

 

1 Same Origin Policy

The so-called same-origin policy, referring to the limit browser access to the different ways the source of the script or text carried out. Js source of such a set can not be read or introducing a source of element attributes b.

So first define what is the origin, the so-called homologous refers to two pages have the same protocol, host (also often said domain name), port, three elements are indispensable.

You can see below a few examples to more clearly understand what the concept of homology:

Uhrilal	URL2	Explanation	Whether to allow communication
http://www.foo.com/js/a.js	http://www.foo.com/js/b.js	Protocol, the domain name, the same port	allow
http://www.foo.com/js/a.js	http://www.foo.com:8888/js/b.js	Agreement, the same domain name, different ports	Not allowed
https://www.foo.com/js/a.js	http://www.foo.com/js/b.js	Host same domain, different protocols	Not allowed
http://www.foo.com/js/a.js	http://www.bar.com/js/b.js	Protocol, same port, different domain name	Not allowed
http://www.foo.com/js/a.js	http://foo.com/js/b.js	Protocol, the same port, the same primary domain, different subdomains	Not allowed

Origin policy limits the interaction between different sources, but some people may have a doubt, we often references js file to other domain names, style files, image files at the time of writing something before, you did not see the restrictions ah, this definition is not wrong. In actual fact, the interaction between the different sources of the same origin policy restrictions aimed primarily js the XMLHttpRequest and other requests, the following circumstances are not subject to the same origin policy restrictions.

• Page links, and redirects form submissions are not subject to the same origin policy restrictions. Link Needless to say, the navigation links on the site are links to other sites. The domain name you www.foo.comsubmit a form to the next www.bar.comis entirely possible.
• Cross-Origin Resource embedding is allowed, of course, the browser limits what Javascript can not read and write load . As mentioned previously embedded <script src="..."></script>，<img>，<link>，<iframe>等. Of course, if you want to prevent iframe embed resources on our website (or page js etc.), we can add a web server in X-Frame-Options DENYthe head to limit. nginx it can be set up add_header X-Frame-Options DENY;.

Since there are so many cases there is no same-origin policy restrictions, it is usually cross-domain problems come from? Go to the next section cross-domain issues.

2 cross-domain issues

This section on to the next cross-domain problem, of course preconditions that we set in the WEB server or server-side script in ACCESS-CONTROL-ALLOW-ORIGINthe head, if you set the domain name of the head and allow some cross-domain access, the browser will skip limit same-origin policy returns the corresponding content. In addition, if you are not going to get resources through a browser, for example, you go to call interface through a python script or get js file, not within the limits.

2.1 Ajax cross domain

Ajax call through the interface have other domains cross-domain issues. For example, the example below, I http://www.foo.com/index.htmlrequest via ajax calls http://www.bar.com/js/test.js, now the will of error.

XMLHttpRequest cannot load http://www.bar.com/js/test.js. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://www.foo.com' is therefore not allowed access.

This is because the WEB server is not set our ACCESS-CONTROL-ALLOW-ORIGINhead, by default, is to prohibit cross-domain reference resource. Of course, it must be noted here, in fact, the cross-domain request is sent successfully, the server also returns test.js content, but prohibits Javascript browser to fetch data response of it . To set ACCESS-CONTROL-ALLOW-ORIGIN header, nginx can use the following code

add_header 'Access-Control-Allow-Origin' 'http://www.foo.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST';

In addition, we see directly through Javascript to get the iframe element also will complain because different domain name. Given below

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://www.foo.com" from accessing a frame with origin "http://foo.com". 
The frame being accessed set "document.domain" to "foo.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

 

This is because we share the same primary domain name, it can be set up in the index.html and test.html in document.domain='foo.com'to access elements in the iframe. Note that the two files should be set below the domain, even if the same primary domain name. Of course, this is a special case, if it is two completely different domain, there is no way you can not put www.foo.comthe domainset www.163.com.

In addition, in index.html which can also be seen by <script>,<iframe>other labels are embedded cross-domain resources.

# index.html
<!DOCTYPE html>
<html>
<head>
<title>test cross domain</title>
<script src="/js/jquery.js"></script>
<script src="http://www.bar.com/js/test.js"></script>
<script>
$(function(){
    document.domain = 'foo.com'; //1 注释掉则会报错 
    var ifr = document.getElementById("testframe");
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
    }
});

$.ajax("http://www.bar.com/js/test.js"); //2 报错
</script>

</head>
<body>
<h1>Test Cross Domain</h1>
<iframe id="testframe" src="http://foo.com/test.html"></iframe>
</body>
</html>

Of course, you can also iframe，location.hash，window.name，HTML5的postMessagebe cross-domain resource access methods, see more Rain Manof this article  JavaScript summarized and cross-domain solutions .

2.2 JSONP cross-domain access

JSONP is common to the development of content, there is encapsulated in jquery by ajax request parameter can take a plurality of jsonp. JSONP also enables cross-domain access to a resource, but its implementation principle is not much to do with ajax, which is inserted through a dynamic <script>to achieve cross-domain access to a resource label, because we already know the contents of the foregoing, the embedded browser is a cross-domain resource Allowed.

Here a simple example to illustrate the principles of JSONP.
Two documents, the first one is http://www.foo.com/jsonp.html, by dynamically created script tag to load the http://www.bar.com/js/outer.jsfile, and then return the contents of outer.js file happens to be a function call, so to achieve a data transfer and callback procedure. Of course, the actual jsonp interface, and you will pass a function name in the past, and then return the data in the callback function name that you pass a function name, the callback function parameter is json format package. jQuery in jsonp achieve basic principle is this, more detailed jsonp principle can see this masterpiece in simple terms JSONP .

# jsonp.html
<script type="text/javascript">
    function callback(data) {
        alert(data.message);
    }
    function addScriptTag(src){
    var script = document.createElement('script');
        script.src = src;
        document.body.appendChild(script);
    }

    window.onload = function(){
        addScriptTag("http://www.foo.com/js/outer.js");
    }
</script>

# outer.js
callback({message:"success"});

 

posted @ 2019-06-03 10:12 Mr. Ching reading (...) Comments (...) edit collections