How to detect third-party cookies had being blocked without a page refresh; [?]

问题

[?] detect third-party cookies had being blocked at runtime; without a page refresh;

JavaScript; localStorage Cookie; Block third-party cookies and site data;

creating Dynamic Self-Contained HTML Documents in which "the Project" is Offline First;
the detection of Third-party cookies happens by changing the browser settings, the cookie continue to set until the page is refreshed;

sample code: using a try to catch "access" had failed(blocked);

if (typeof(Storage) !== "undefined") {
  try{
    localStorage.setItem("document","test");
    localStorage.removeItem("document");
  } catch(err) {
    alert("Cookies had failed to be set; Blocked!!");
  }
}

sample code: using navigator.cookieEnabled;

if (!navigator.cookieEnabled) {
  //Sample Code here;
} else { //Sample Code Here; }

this situation only detects without a refresh the main cookie setting, not the third-party data;

回答1:

Check if localStorage is null

if (localStorage === null) {
  alert("localStorage is disabled");
}

回答2:

The solution here is based on the one at https://github.com/mindmup/3rdpartycookiecheck

There are three files involved in this. The client file, let's call it ThirdPartyCookies.html, and two other files in a different server (the 3rd party server). Let's call these two other files ThirdPartyCookies2.html and ThirdPartyCookies3.html. This is an all JavasScript solution. Your 3rd party server can be a static CDN.

ThirdPartyCookies.html (client side): This file is the client side file. No need to refresh the page to test for third party cookies. Modify the code by using the location of your own 3rd party server or CDN where it says LOCATION OF THE FILE in the code.

<!DOCTYPE html>
<html>
<head>  
<style>
.testbutton {
  background-color: blue;
  color: yellow;
  text-align: center;
  border: 1px solid #000000;
  border-radius: 8px;
  min-width: 100px;
  max-width: 100px;
  cursor: pointer;
}

.testbutton:hover {
  background-color: darkgreen;
  color: yellow;
}

.small {
  font-family: "Verdana";
  font-size: x-small;
}
</style>
<script>
window.onload = function (){
    var receiveMessage = function (evt) {
      if (evt.data === 'MM:3PCunsupported') {
        alert("Cookies had failed to be set; Blocked!!");
      } else if (evt.data === 'MM:3PCsupported') {
        // Third party cookies are supported
      }
    };
    window.addEventListener("message", receiveMessage, false);
};
function samplestorage(){
    var iframe = document.getElementById('iframeCookies');
    iframe.src = iframe.src;
}
</script>
</head>
<body>
    <div class="small">
      go at Privacy &amp; Security, under browser settings, "Chrome,Opera"<br> then check\uncked [ ] Block third-party cookies and site data;
    </div>

    <br>

    <div class="testbutton" onclick="samplestorage();">
      Test Button
    </div>

    <br> page has to be refreshed if cookie settings are changed at browser settings;


  <iframe id="iframeCookies" src="LOCATION OF THE FILE/ThirdPartyCookies2.html" style="display:none" />
</body>
</html>

ThirdPartyCookies2.html (in your 3rd party server):

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
    document.cookie="thirdparty=yes";
    document.location="ThirdPartyCookies3.html";
</script>
</body>
</html>

ThirdPartyCookies3.html (in your 3rd party server):

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
 if (window.parent) {
    if (/thirdparty=yes/.test(document.cookie)) {
        window.parent.postMessage('MM:3PCsupported', '*');
    } else {
        window.parent.postMessage('MM:3PCunsupported', '*');
    }
 }
</script>
</body>
</html>

If you want to see other solutions check out this SO question Check if third-party cookies are enabled

来源：https://stackoverflow.com/questions/43923761/how-to-detect-third-party-cookies-had-being-blocked-without-a-page-refresh

标签

javascript

try-catch

local-storage

session-cookies

issue-tracking