Set third-party cookies

Medable's session authentication requires session cookies. However, for a web app such as this, these cookies are considered 3rd-party cookies and some browsers don't allow for these types of cookies to be set without modifying security settings. Primarily this applies to Safari (including mobile Safari) and IE Edge. However, there's a simple solution to this issue involving an invisible iframe.

1. Create a custom route

We're going to create our first custom script - a route that we navigate to from an invisible iframe in the web app to allow Medable to set an auth cookie on the browser.

Go to your org control panel
Click Settings > Scripts and click New Script
Match the configuration to the image below

The script you want included is the following. The only modification you make is the loginURL.

const res = require('response'),
      loginUrl = 'https://www.theurlyouwanttoredirectto.com'

res.write('<html><head><script>window.onload=function(){if(-1!=navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("Chrome")){var e=document.cookie;top.location!=document.location?e||(href=document.location.href,href=-1==href.indexOf("?")?href+"?":href+"&",top.location.href=href+"reref="+encodeURIComponent(\''+loginUrl+'\')):(ts=(new Date).getTime(),document.cookie="ts="+ts,rerefidx=document.location.href.indexOf("reref="),-1!=rerefidx&&(href=decodeURIComponent(document.location.href.substr(rerefidx+6)),window.location.replace(href)))}};</script></head><body><b>This is a test</b></body></html>')

Next, we include the invisible iframe on our login page.

<iframe src="https://api.dev.medable.com/*your_org_code_goes_here*/v2/routes/authcheck" height="0" frameborder="0"/>

Login and Registration now work on browsers like Safari that have a more restrictive 3rd-party cookie policy. Congratulations on achieving cross-browser compatibility!

Last updated 2 years ago

Was this helpful?