Technical Background

The third party sets & reads cookies over HTTP (not in JavaScript).

So we need two requests to an external domain to test if third-party cookies are enabled:

1. One where the third party sets the cookie(s)
2. The second, with a differing response depending on whether the browser sent the cookie(s) back to the same third party in a second request.

We cannot use XMLHTTPRequest (Ajax) because of the DOM security model.

Obviously you can't load both scripts in parallel, or the second request may be made before the first request’s response makes it back, and the test cookie(s) will not have been set.

Code Example

Given:

1. The .html file is on one domain, and

2. The .js.php files are on a second domain, we have:

The HTML test page

Saved as third-party-cookies.html

<!DOCTYPE html>
<html>
<head id="head">
  <meta charset=utf-8 />
  <title>Test if Third-Party Cookies are Enabled</title>
<style type="text/css">
body {
  color: black;
  background: white none;
}
.error {
  color: #c00;
}
.loading {
  color: #888;
}
.hidden {
  display: none;
}
</style>
<script type="text/javascript">
window._3rd_party_test_step1_loaded = function(){
  // At this point, a third-party domain has now attempted to set a cookie (if all went to plan!)
  var step2Url = 'http://third-party.example.com/step2.js.php',
    resultsEl = document.getElementById('3rd_party_cookie_test_results'),
    step2El = document.createElement('script');

  // Update loading / results message
  resultsEl.innerHTML = 'Stage one complete, loading stage 2&hellip;';
  // And load the second part of the test (reading the cookie)
  step2El.setAttribute('src', step2Url);
  resultsEl.appendChild(step2El);
}
window._3rd_party_test_step2_loaded = func