クライアント ブラウザーでサードパーティ Cookie が有効になっているかどうかを確認する必要があるアプリケーションがあります。JavaScript でこれを行う方法をご存知の方はいませんか?
ベストアンサー1
技術的背景
サードパーティは、HTTP 経由で (JavaScript ではなく) Cookie を設定および読み取ります。
したがって、サードパーティの Cookie が有効になっているかどうかをテストするには、外部ドメインへの 2 つのリクエストが必要です。
- 第三者がクッキーを設定するもの
- 2 番目は、ブラウザが 2 番目のリクエストで同じサードパーティに Cookie を返したかどうかに応じて応答が異なります。
DOM セキュリティ モデルのため、XMLHTTPRequest (Ajax) は使用できません。
明らかに、両方のスクリプトを並行して読み込むことはできません。そうしないと、2番目のリクエストが実行される場合があります。前に最初のリクエストの応答が返され、テスト クッキーは設定されません。
コード例
与えられた条件:
ファイル
.html
は1つのドメインにあり、ファイル
.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…';
// 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…</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 をテストすることは、突然壊れたり、マルウェアが侵入したりする可能性があります。これは失礼です。