StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>The <code>document.domain</code> method</h2> <ul> <li>Method type: <strong>iframe</strong>.</li> </ul> <p>Note that this is an iframe method that sets the value of document.domain to a suffix of the current domain. If it does so, the shorter domain is used for subsequent origin checks. For example, assume a script in the document at <code>http://store.company.com/dir/other.html</code> executes the following statement:</p> <pre><code>document.domain = "company.com"; </code></pre> <p>After that statement executes, the page would pass the origin check with <code>http://company.com/dir/page.html</code>. However, by the same reasoning, company.com could not set <code>document.domain</code> to <code>othercompany.com</code>.</p> <p>With this method, you would be allowed to exectue javascript from an iframe sourced on a subdomain on a page sourced on the main domain. This method is not suited for cross-domain resources as browsers like Firefox will not allow you to change the <code>document.domain</code> to a completely alien domain.</p> <p>Source: <a href="https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript" rel="nofollow noreferrer">https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript</a></p> <h2>The Cross-Origin Resource Sharing method</h2> <ul> <li>Method type: <strong>AJAX</strong>.</li> </ul> <p><a href="http://www.w3.org/TR/access-control/" rel="nofollow noreferrer">Cross-Origin Resource Sharing</a> (CORS) is a W3C Working Draft that defines how the browser and server must communicate when accessing sources across origins. The basic idea behind CORS is to use custom HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail.</p> <p>For a simple request, one that uses either <code>GET</code> or <code>POST</code> with no custom headers and whose body is <code>text/plain</code>, the request is sent with an extra header called <code>Origin</code>. The Origin header contains the origin (protocol, domain name, and port) of the requesting page so that the server can easily determine whether or not it should serve a response. An example <code>Origin</code> header might look like this:</p> <pre><code>Origin: http://www.stackoverflow.com </code></pre> <p>If the server decides that the request should be allowed, it sends a <code>Access-Control-Allow-Origin</code> header echoing back the same origin that was sent or <code>*</code> if it’s a public resource. For example:</p> <pre><code>Access-Control-Allow-Origin: http://www.stackoverflow.com </code></pre> <p>If this header is missing, or the origins don’t match, then the browser disallows the request. If all is well, then the browser processes the request. Note that neither the requests nor responses include cookie information.</p> <p>The Mozilla team suggests in <a href="http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/" rel="nofollow noreferrer">their post about CORS</a> that you should check for the existence of the <code>withCredentials</code> property to determine if the browser supports CORS via XHR. You can then couple with the existence of the <code>XDomainRequest</code> object to cover all browsers:</p> <pre><code>function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr){ xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined"){ xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createCORSRequest("get", "http://www.stackoverflow.com/"); if (request){ request.onload = function() { // ... }; request.onreadystatechange = handler; request.send(); } </code></pre> <p>Note that for the CORS method to work, you need to have access to any type of server header mechanic and can't simply access any third-party resource.</p> <p>Source: <a href="http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/" rel="nofollow noreferrer">http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/</a></p> <h2>The <code>window.postMessage</code> method</h2> <ul> <li>Method type: <strong>iframe</strong>.</li> </ul> <p><code>window.postMessage</code>, when called, causes a <code>MessageEvent</code> to be dispatched at the target window when any pending script that must be executed completes (e.g. remaining event handlers if <code>window.postMessage</code> is called from an event handler, previously-set pending timeouts, etc.). The <code>MessageEvent</code> has the type message, a <code>data</code> property which is set to the string value of the first argument provided to <code>window.postMessage</code>, an <code>origin</code> property corresponding to the origin of the main document in the window calling <code>window.postMessage</code> at the time <code>window.postMessage</code> was called, and a <code>source</code> property which is the window from which <code>window.postMessage</code> is called.</p> <p>To use <code>window.postMessage</code>, an event listener must be attached:</p> <pre><code> // Internet Explorer window.attachEvent('onmessage',receiveMessage); // Opera/Mozilla/Webkit window.addEventListener("message", receiveMessage, false); </code></pre> <p>And a <code>receiveMessage</code> function must be declared:</p> <pre><code>function receiveMessage(event) { // do something with event.data; } </code></pre> <p>The off-site iframe must also send events properly via <code>postMessage</code>:</p> <pre><code><script>window.parent.postMessage('foo','*')</script> </code></pre> <p>Any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message. Consequently, any event listener used to receive messages must first check the identity of the sender of the message, using the origin and possibly source properties. This cannot be understated: <strong>Failure to check the <code>origin</code> and possibly <code>source</code> properties enables cross-site scripting attacks.</strong></p> <p>Source: <a href="https://developer.mozilla.org/en/DOM/window.postMessage" rel="nofollow noreferrer">https://developer.mozilla.org/en/DOM/window.postMessage</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload