Detecting whether 3rd party cookies are enabled or not in JavaScript 🤔🍪
We often use Single sign-on (SSO) on our website to increase users on the platform by giving them the ability to easily sign-in and sign-up, but sometimes the user might have disabled 3rd party cookies or cookies altogether.
Why do we need to check whether cookies are enabled or not?
Most SSO services dynamically insert iframe on the website to implement the functionality, when these scripts are unable to access cookies they throw weird errors and break without proper error handling mechanism, this may lead to bad UX. As pro developers 👩💻👨💻 we should handle such cases and provide proper feedback to the user along with some call to action.
Why simple JS way of detecting cookies status doesn’t work?
function checkCookie(){
var cookieEnabled = navigator.cookieEnabled;
if (!cookieEnabled){
document.cookie = "testcookie";
cookieEnabled = document.cookie.indexOf("testcookie")!=-1;
}
return cookieEnabled || showCookieFail();
}
function showCookieFail(){
// do something here
}
// within a window load,dom ready or something like that place your:
checkCookie();The above snippet can be used to check whether cookies are enabled or not, but this will result in true condition even if 3rd party cookies are disabled 😢. The reason for this is how JS resolves the scope of scripts, when the above snippet is added to our main application it will check the access of cookies for that scope, not for the dynamically inserted iFrame.
Then how should we accomplish this task?
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 ⚡
We will use the Message Event provided by the window object, through this, we can send messages to other browsers based on the URL, in our case we will send the message from iframe to the parent application which may be on a different domain.
This may sound difficult and complex, but fear not we will through it together.
Step 1: Creating our custom iFrame
First, we add a function that will run as soon as the iFrame is loaded, this will add a message event listener which will fire when we will invoke it from the parent application. When invoked it will first validate the request (this is optional) then we call the checkCookiesEnable which checks the cookie status and returns it, now we will send a message to the parent application through parent.postMessage(); parent is implicit object available inside iframe.
Step 2: Using the iFrame and invoking functions
Here we will add the message event handler and then insert our iFrame before inserting any 3rd party scripts, as soon as the frame is loaded we will postMessage to our Iframe through the frame.contentWindow object and ‘*’ for allowing postMessage to any origin (different domain). Now the function inside iFrame checks the status of the cookies for iFrames and sends a message which is intercepted by our messagehandler. Check whether the message is sent by the IFrame or not (optional), the event will now hold the response from the result of the checkCookieEnable function inside iFrame.
Below I have shown a sample function that takes the iframeUri and a callback that will be called once the result is received.
You can directly use the above snippet inside your application and provide a callback that will render an appropriate message for the user.
Now we have successfully detected whether 3rd party cookies are enabled or not 🎯
Hey 👋 I’m building a #javascript library, Annoy.js, which will enable the developer to add over-interactivity to the website.
Follow me on:
Portfolio: https://suyashsonawane.me/
Twitter: Suyash Sonawane (@SuyashYSonawane) / Twitter
LinkedIn: Suyash Sonawane | LinkedIn
Github: SuyashSonawane (Suyash Sonawane)
