[IMPROVE] Add cookie to identify widget calls

src/api.js

@@ -4,6 +4,6 @@ import queryString from 'query-string';
 const host = window.SERVER_URL
 	|| queryString.parse(window.location.search).serverUrl
 	|| (process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null);
-const useSsl = host && host.match(/^https:/) !== null;
+export const useSsl = host && host.match(/^https:/) !== null;
 
 export const Livechat = new LivechatClient({ host, protocol: 'ddp', useSsl });

src/components/App/index.js

@@ -19,7 +19,7 @@ import Register from '../../routes/Register';
 import SwitchDepartment from '../../routes/SwitchDepartment';
 import TriggerMessage from '../../routes/TriggerMessage';
 import { Provider as StoreProvider, Consumer as StoreConsumer, store } from '../../store';
-import { visibility, isActiveSession } from '../helpers';
+import { visibility, isActiveSession, setInitCookies } from '../helpers';
 
 function isRTL(s) {
 	const rtlChars = '\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC';
@@ -54,6 +54,8 @@ export class App extends Component {
 				user,
 			} = this.props;
 
+			setInitCookies();
+
 			if (gdprRequired && !gdprAccepted) {
 				return route('/gdpr');
 			}

src/components/helpers.js

@@ -1,6 +1,6 @@
 import { Component } from 'preact';
 
-import { Livechat } from '../api';
+import { Livechat, useSsl } from '../api';
 import I18n from '../i18n';
 import store from '../store';
 
@@ -103,10 +103,20 @@ export function upsert(array = [], item, predicate, ranking) {
 	return array;
 }
 
+// This will allow widgets that are on different domains to send cookies to the server
+// The default config for same-site (lax) dissalows to send a cookie to a "3rd party" unless the user performs an action
+// like a click. Secure flag is required when SameSite is set to None
+const getSecureCookieSettings = () => (useSsl ? 'SameSite=None; Secure;' : '');
+
+export const setInitCookies = () => {
+	document.cookie = `rc_is_widget=t; path=/; ${ getSecureCookieSettings() }`;
+	document.cookie = `rc_room_type=l; path=/; ${ getSecureCookieSettings() }`;
+};
+
 export const setCookies = (rid, token) => {
-	document.cookie = `rc_rid=${ rid }; path=/`;
-	document.cookie = `rc_token=${ token }; path=/`;
-	document.cookie = 'rc_room_type=l; path=/';
+	document.cookie = `rc_rid=${ rid }; path=/; ${ getSecureCookieSettings() }`;
+	document.cookie = `rc_token=${ token }; path=/; ${ getSecureCookieSettings() }`;
+	document.cookie = `rc_room_type=l; path=/; ${ getSecureCookieSettings() }`;
 };
 
 export const createToken = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);