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

Question

[?] 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;

Maybe the answers here will help http://stackoverflow.com/questions/3550790/check-if-third-party-cookies-are-enabled — alfredo, May 11 '17 at 20:57
had wondering individuals browsing other things on the Internet, that eventually from other document would make it block the cookies; then by continuing using the interested page, so by indicating the settings has changed and cookie data will be lost; because at least it continue to work dynamic without a page refresh; **to remember it is not a windows software program being made** — H3sDW11e, May 11 '17 at 23:22
I posted below a solution that doesn't require a page refresh. — alfredo, May 12 '17 at 14:51

score 2 · Answer 1 · edited May 23 '17 at 11:54

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

score 0 · Answer 2 · answered May 11 '17 at 19:12

0

Check if localStorage is null

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

answered May 11 '17 at 19:12

guest271314

1
15
104
177

no, the issued situation are the same; **localStorage ===** null does nothing to it; – H3sDW11e May 11 '17 at 19:42
`Storage` is a global function. `localStorage` can be disabled while `Storage` is still defined. Are you trying to check if `localStorage` is disabled? – guest271314 May 11 '17 at 19:46
No...see it must be then how the browser had being designed; it does not change at runtime; at least on Opera and Chrome browsers; the importance here is to know it had being blocked without a page refresh; this is probably besides nice graphics a webpage has, its logics to build are very low; ok, thanks; – H3sDW11e May 11 '17 at 20:07
@H3sDW11e Not sure what you mean. What are you trying to achieve? – guest271314 May 11 '17 at 20:11

score 0 · Answer 3 · answered Oct 07 '21 at 16:13

Detecting 3rd party cookies status can be a bit cumbersome. I experienced this problem and found nothing helpful online so I wrote a solution myself, here it is

The way that I come up with and which always works is adding an external iFrame which we will build now, it will detect whether iFrames can access cookies and will inform the parent application about the cookie's status. As weird as it sounds there is actually no way through which we can call parent functions through iFrame or visa-versa, but but but we have a superpower under our sleeves ⚡

The complete article along with an example

https://medium.com/devscollab/detecting-whether-3rd-party-cookies-are-enabled-or-not-in-javascript-4328715a527b

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 07 '21 at 18:16

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

3 Answers3

Linked