How To Detect Third-party Cookies Had Being Blocked Without A Page Refresh; [?]
Solution 1:
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!!");
} elseif (evt.data === 'MM:3PCsupported') {
// Third party cookies are supported
}
};
window.addEventListener("message", receiveMessage, false);
};
functionsamplestorage(){
var iframe = document.getElementById('iframeCookies');
iframe.src = iframe.src;
}
</script></head><body><divclass="small">
go at Privacy & Security, under browser settings, "Chrome,Opera"<br> then check\uncked [ ] Block third-party cookies and site data;
</div><br><divclass="testbutton"onclick="samplestorage();">
Test Button
</div><br> page has to be refreshed if cookie settings are changed at browser settings;
<iframeid="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
Solution 2:
Check if localStorage is null
if (localStorage === null) {
alert("localStorage is disabled");
}
Solution 3:
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
Post a Comment for "How To Detect Third-party Cookies Had Being Blocked Without A Page Refresh; [?]"