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.
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.
- 1.Go to your org control panel
- 2.Click
Settings > Scriptsand clickNew Script - 3.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 modified 9mo ago