OOB: Set cross-site cookies based on config flag (#1031)

* refactor: Extract cookie management api creation into function

* refactor: Clean up interface's methods implementation

* chore: Bump js-cookie to 3.0.1

A breaking change introduced in 3.0.0 is the removal of build-in JSON
support (i.e `getJson()`) and automatic stringifying/parsing on set/get.

To avoid introducing breaking change in Monster UI's wrapper for cookie
handling, stringifying/parsing steps were moved inside the set/getJson's
innter methods/

Since the cookie library used to swallow exceptions in either
stringifying/parsing, that behavior was also reproduced in the wrapper.

* feat: Mark cookies for cross-site usage

* feat: Set cross site cookies based on config flag

docs/configuration.md

@@ -42,6 +42,7 @@ Key | Description | Type | Default | Required
 `resellerId` | The resellerId key is the accountId of your master account, and is needed for some reseller features. For example it won't prompt for a credit card the sub-accounts that have a different resellerId than this resellerId | `String` | | `false`
 `whitelabel` | Contains all the flags that are whitelabel-able via the Branding app. Setting them in the config file will set the defaults if you don't use any whitelabel. If the domain used is defined in the whitelabel database, we'll override the following settings by what is set in the whitelabel document. | `Object`([#whitelabel](#whitelabel)) | | `true`
 `allowedExtraDeviceTypes` | Contains types of additional devices corresponding to integrations. | `Array` | | `false`
+`allowCrossSiteUsage` | Whether Monster UI supports being embedded into a third-party context (e.g. iframe with different domain). | `Boolean` | `false` | `false`
 
 
 ### `api`

src/js/lib/monster.js

@@ -29,6 +29,7 @@ define(function(require) {
 	var defaultConfig = {
 		'api.default': [_.isString, window.location.protocol + '//' + window.location.hostname + ':8000/v2/'],
 		currencyCode: [isCurrencyCode, defaultCurrencyCode],
+		allowCrossSiteUsage: [_.isBoolean, false],
 		'developerFlags.showAllCallflows': [_.isBoolean, false],
 		'developerFlags.showJsErrors': [_.isBoolean, false],
 		'port.loa': [_.isString, 'http://ui.zswitch.net/Editable.LOA.Form.pdf'],
@@ -387,27 +388,7 @@ define(function(require) {
 			error: []
 		},
 
-		cookies: {
-			set: function set(key, value, options) {
-				Cookies.set(key, value, options);
-			},
-
-			get: function get(key) {
-				return this.has(key) ? Cookies.get(key) : null;
-			},
-
-			getJson: function getJson(key) {
-				return this.has(key) ? Cookies.getJSON(key) : null;
-			},
-
-			remove: function remove(key) {
-				Cookies.remove(key);
-			},
-
-			has: function has(key) {
-				return Cookies.get(key) === undefined ? false : true;
-			}
-		},
+		cookies: getCookiesManager(),
 
 		css: function(app, href) {
 			$('<link/>', { rel: 'stylesheet', href: monster.util.cacheUrl(app, href) }).appendTo('head');
@@ -730,6 +711,56 @@ define(function(require) {
 		getFeatureSet: getFeatureSet
 	};
 
+	/**
+	 * Returns wrapper over cookie management library.
+	 * @private
+	 * @returns {Object} Cookies manager module.
+	 */
+	function getCookiesManager() {
+		var mergeAttributes = function(attributes) {
+			var allowCrossSiteUsage = monster.config.allowCrossSiteUsage;
+			var crossSiteAttributes = {
+				samesite: 'none',
+				secure: true
+			};
+			return _.merge(
+				{},
+				attributes,
+				allowCrossSiteUsage && crossSiteAttributes
+			);
+		};
+
+		return {
+			set: function set(key, value, attributes) {
+				var result;
+				try {
+					result = JSON.stringify(value);
+				} catch (e) {
+					return;
+				}
+				Cookies.set(key, result, mergeAttributes(attributes));
+			},
+			get: _.flow(
+				Cookies.get,
+				_.partial(_.defaultTo, _, null)
+			),
+			getJson: function getJson(key) {
+				if (!this.has(key)) {
+					return null;
+				}
+				var value = Cookies.get(key);
+				try {
+					return JSON.parse(value);
+				} catch (e) {}
+			},
+			remove: Cookies.remove,
+			has: _.flow(
+				Cookies.get,
+				_.negate(_.isUndefined)
+			)
+		};
+	}
+
 	function getFeatureSet(jwt) {
 		var tokenPayload = monster.util.jwt_decode(jwt);
 		var entitlementsFeatureSet = _

src/js/main.js

@@ -9,7 +9,7 @@ require.config({
 		'chosen': 'js/vendor/jquery.chosen.min',
 		'clipboard': 'js/vendor/clipboard.min',
 		'config': 'js/config',
-		'cookies': 'js/vendor/js.cookie',
+		'cookies': 'js/vendor/js.cookie.min',
 		'crossroads': 'js/vendor/crossroads.min',
 		'date-holidays': 'js/vendor/date-holidays.min',
 		'ddslick': 'js/vendor/jquery.ddslick.min',