サードパーティのCookieが有効になっているかどうかを確認する 質問する

サードパーティのCookieが有効になっているかどうかを確認する 質問する

クライアント ブラウザーでサードパーティ Cookie が有効になっているかどうかを確認する必要があるアプリケーションがあります。JavaScript でこれを行う方法をご存知の方はいませんか?

ベストアンサー1

技術的背景

サードパーティは、HTTP 経由で (JavaScript ではなく) Cookie を設定および読み取ります。

したがって、サードパーティの Cookie が有効になっているかどうかをテストするには、外部ドメインへの 2 つのリクエストが必要です。

  1. 第三者がクッキーを設定するもの
  2. 2 番目は、ブラウザが 2 番目のリクエストで同じサードパーティに Cookie を返したかどうかに応じて応答が異なります。

DOM セキュリティ モデルのため、XMLHTTPRequest (Ajax) は使用できません。

明らかに、両方のスクリプトを並行して読み込むことはできません。そうしないと、2番目のリクエストが実行される場合があります。前に最初のリクエストの応答が返され、テスト クッキーは設定されません。

コード例

与えられた条件:

  1. ファイル.htmlは1つのドメインにあり、

  2. ファイル.js.phpは 2 番目のドメインにあります。

HTMLテストページ

保存名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 = function(cookieSuccess){
  var resultsEl = document.getElementById('3rd_party_cookie_test_results'),
    errorEl = document.getElementById('3rd_party_cookie_test_error');
  // Show message
  resultsEl.innerHTML = (cookieSuccess ? 'Third party cookies are <b>functioning</b> in your browser.' : 'Third party cookies appear to be <b>disabled</b>.');

  // Done, so remove loading class
  resultsEl.className = resultsEl.className.replace(/\bloading\b/,' ');
  // And remove error message
  errorEl.className = 'hidden';
}
</script>
</head>
<body id="thebody">

  <h1>Test if Third-Party Cookies are Enabled</h1>

  <p id="3rd_party_cookie_test_results" class='loading'>Testing&hellip;</p>
  <p id="3rd_party_cookie_test_error" class="error hidden">(If this message persists, the test could not be completed; we could not reach the third-party to test, or another error occurred.)</p>

  <script type="text/javascript">
  window.setTimeout(function(){
    var errorEl = document.getElementById('3rd_party_cookie_test_error');
    if(errorEl.className.match(/\berror\b/)) {
      // Show error message
      errorEl.className = errorEl.className.replace(/\bhidden\b/,' ');
    } else {
    }
  }, 7*1000); // 7 sec timeout
  </script>
  <script type="text/javascript" src="http://third-party.example.com/step1.js.php"></script>
</body>
</html>

最初のサードパーティJavaScriptファイル

保存名step1.js.php

これは PHP で記述されているため、ファイルの読み込み時に Cookie を設定できます。(もちろん、任意の言語で記述することも、サーバー設定ファイルで行うこともできます。)

<?php
  header('Content-Type: application/javascript; charset=UTF-8');
  // Set test cookie
  setcookie('third_party_c_t', 'hey there!', time() + 3600*24*2);
?>
window._3rd_party_test_step1_loaded();

2番目のサードパーティJavaScriptファイル

保存名step2.js.php

これは PHP で書かれているので、応答する前にサーバー側で Cookie を読み取ることができます。また、テストを繰り返すことができるように Cookie をクリアします (ブラウザの設定をいじって再試行する場合)。

<?php
  header('Content-Type: application/javascript; charset=UTF-8');
  // Read test cookie, if there
  $cookie_received = (isset($_COOKIE['third_party_c_t']) && $_COOKIE['third_party_c_t'] == 'hey there!');
  // And clear it so the user can test it again 
  setcookie('third_party_c_t', '', time() - 3600*24);
?>
window._3rd_party_test_step2_loaded(<?php echo ($cookie_received ? 'true' : 'false'); ?>);

最後の行では、三項演算子を使用して、テスト クッキーが存在するかどうかに応じてtrueリテラルJavascript を出力します。false

ここでテストする

ぜひテストにご利用くださいhttps://alanhogan.github.io/web-experiments/3rd/third-party-cookies.html

(最後に他人のサーバーを使わない許可なくサードパーティの Cookie をテストすることは、突然壊れたり、マルウェアが侵入したりする可能性があります。これは失礼です。

おすすめ記事