Enable Secure attribute for frontend cookies

By default, all frontend cookies have been set to insecure, even when
HTTPS is enabled. This has tripped off some security scanners. While
most of these cookies probably contain a single user preference and do
not contain any personally-identifiable information, we should err on
the side of caution and enable the Secure attribute if an encrypted
channel is available.

We now centralize all the application logic for cookie setting to the
`setCookie` `getCookie` methods in `common_utils.js`.

Relates to https://gitlab.com/gitlab-org/gitlab/-/issues/24040

Changelog: security

app/assets/javascripts/activities.js

 /* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { localTimeAgo } from './lib/utils/datetime_utility';
@@ -55,7 +55,7 @@ export default class Activities {
     const filter = $sender.attr('id').split('_')[0];
 
     $('.event-filter .active').removeClass('active');
-    Cookies.set('event_filter', filter);
+    setCookie('event_filter', filter);
 
     $sender.closest('li').toggleClass('active');
   }

app/assets/javascripts/awards_handler.js

@@ -2,10 +2,10 @@
 
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { uniq } from 'lodash';
+import { getCookie, setCookie, scrollToElement } from '~/lib/utils/common_utils';
 import * as Emoji from '~/emoji';
-import { scrollToElement } from '~/lib/utils/common_utils';
+
 import { dispose, fixTitle } from '~/tooltips';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -506,7 +506,7 @@ export class AwardsHandler {
   addEmojiToFrequentlyUsedList(emoji) {
     if (this.emoji.isEmojiNameValid(emoji)) {
       this.frequentlyUsedEmojis = uniq(this.getFrequentlyUsedEmojis().concat(emoji));
-      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+      setCookie('frequently_used_emojis', this.frequentlyUsedEmojis.join(','));
     }
   }
 
@@ -514,7 +514,7 @@ export class AwardsHandler {
     return (
       this.frequentlyUsedEmojis ||
       (() => {
-        const frequentlyUsedEmojis = uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+        const frequentlyUsedEmojis = uniq((getCookie('frequently_used_emojis') || '').split(','));
         this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter((inputName) =>
           this.emoji.isEmojiNameValid(inputName),
         );

app/assets/javascripts/behaviors/shortcuts/shortcuts.js

 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { flatten } from 'lodash';
 import Mousetrap from 'mousetrap';
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import findAndFollowLink from '~/lib/utils/navigation_utility';
 import { refreshCurrentPage, visitUrl } from '~/lib/utils/url_utility';
 import {
@@ -161,10 +161,10 @@ export default class Shortcuts {
   static onTogglePerfBar(e) {
     e.preventDefault();
     const performanceBarCookieName = 'perf_bar_enabled';
-    if (parseBoolean(Cookies.get(performanceBarCookieName))) {
-      Cookies.set(performanceBarCookieName, 'false', { expires: 365, path: '/' });
+    if (parseBoolean(getCookie(performanceBarCookieName))) {
+      setCookie(performanceBarCookieName, 'false', { path: '/' });
     } else {
-      Cookies.set(performanceBarCookieName, 'true', { expires: 365, path: '/' });
+      setCookie(performanceBarCookieName, 'true', { path: '/' });
     }
     refreshCurrentPage();
   }
@@ -172,8 +172,8 @@ export default class Shortcuts {
   static onToggleCanary(e) {
     e.preventDefault();
     const canaryCookieName = 'gitlab_canary';
-    const currentValue = parseBoolean(Cookies.get(canaryCookieName));
-    Cookies.set(canaryCookieName, (!currentValue).toString(), {
+    const currentValue = parseBoolean(getCookie(canaryCookieName));
+    setCookie(canaryCookieName, (!currentValue).toString(), {
       expires: 365,
       path: '/',
       // next.gitlab.com uses a leading period. See https://gitlab.com/gitlab-org/gitlab/-/issues/350186

app/assets/javascripts/blob/pipeline_tour_success_modal.vue

 <script>
 import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import { getCookie, removeCookie } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -62,7 +62,7 @@ export default {
       return this.commitCookiePath || this.projectMergeRequestsPath;
     },
     commitCookiePath() {
-      const cookieVal = Cookies.get(this.commitCookie);
+      const cookieVal = getCookie(this.commitCookie);
 
       if (cookieVal !== 'true') return cookieVal;
       return '';
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     disableModalFromRenderingAgain() {
-      Cookies.remove(this.commitCookie);
+      removeCookie(this.commitCookie);
     },
   },
 };

app/assets/javascripts/broadcast_notification.js

-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 
 const handleOnDismiss = ({ currentTarget }) => {
   currentTarget.removeEventListener('click', handleOnDismiss);
@@ -6,7 +6,7 @@ const handleOnDismiss = ({ currentTarget }) => {
     dataset: { id, expireDate },
   } = currentTarget;
 
-  Cookies.set(`hide_broadcast_message_${id}`, true, { expires: new Date(expireDate) });
+  setCookie(`hide_broadcast_message_${id}`, true, { expires: new Date(expireDate) });
 
   const notification = document.querySelector(`.js-broadcast-notification-${id}`);
   notification.parentNode.removeChild(notification);

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -14,8 +14,8 @@ import {
   GlModal,
   GlSprintf,
 } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import { mapActions, mapState } from 'vuex';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -59,7 +59,7 @@ export default {
   mixins: [glFeatureFlagsMixin(), trackingMixin],
   data() {
     return {
-      isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
+      isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
       validationErrorEventProperty: '',
     };
   },
@@ -176,7 +176,7 @@ export default {
       'setVariableProtected',
     ]),
     dismissTip() {
-      Cookies.set(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
+      setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
       this.isTipDismissed = true;
     },
     deleteVarAndClose() {

app/assets/javascripts/contextual_sidebar.js

 import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { debounce } from 'lodash';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import { parseBoolean } from '~/lib/utils/common_utils';
 
 export const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed';
 
@@ -59,7 +58,7 @@ export default class ContextualSidebar {
     if (!ContextualSidebar.isDesktopBreakpoint()) {
       return;
     }
-    Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 });
+    setCookie('sidebar_collapsed', value, { expires: 365 * 10 });
   }
 
   toggleSidebarNav(show) {
@@ -111,7 +110,7 @@ export default class ContextualSidebar {
     if (!ContextualSidebar.isDesktopBreakpoint()) {
       this.toggleSidebarNav(false);
     } else {
-      const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
+      const collapse = parseBoolean(getCookie('sidebar_collapsed'));
       this.toggleCollapsedSidebar(collapse, true);
     }
 

app/assets/javascripts/cycle_analytics/components/base.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { toYmd } from '~/analytics/shared/utils';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
 import StageTable from '~/cycle_analytics/components/stage_table.vue';
@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+      isOverviewDialogDismissed: getCookie(OVERVIEW_DIALOG_COOKIE),
     };
   },
   computed: {
@@ -134,7 +134,7 @@ export default {
     },
     dismissOverviewDialog() {
       this.isOverviewDialogDismissed = true;
-      Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
+      setCookie(OVERVIEW_DIALOG_COOKIE, '1');
     },
     isUserAllowed(id) {
       const { permissions } = this;

app/assets/javascripts/deprecated_notes.js

@@ -13,7 +13,6 @@ deprecated_notes_spec.js is the spec for the legacy, jQuery notes application. I
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import Autosize from 'autosize';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import { escape, uniqueId } from 'lodash';
 import Vue from 'vue';
 import '~/lib/utils/jquery_at_who';
@@ -28,6 +27,7 @@ import { defaultAutocompleteConfig } from './gfm_auto_complete';
 import GLForm from './gl_form';
 import axios from './lib/utils/axios_utils';
 import {
+  getCookie,
   isInViewport,
   getPagePath,
   scrollToElement,
@@ -121,7 +121,7 @@ export default class Notes {
   }
 
   setViewType(view) {
-    this.view = Cookies.get('diff_view') || view;
+    this.view = getCookie('diff_view') || view;
   }
 
   addBinding() {
@@ -473,7 +473,7 @@ export default class Notes {
   }
 
   isParallelView() {
-    return Cookies.get('diff_view') === 'parallel';
+    return getCookie('diff_view') === 'parallel';
   }
 
   /**

app/assets/javascripts/design_management/components/design_sidebar.vue

 <script>
 import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui';
-import Cookies from 'js-cookie';
-import { parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
+
 import { s__ } from '~/locale';
 import Participants from '~/sidebar/components/participants/participants.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -53,7 +53,7 @@ export default {
   },
   data() {
     return {
-      isResolvedCommentsPopoverHidden: parseBoolean(Cookies.get(this.$options.cookieKey)),
+      isResolvedCommentsPopoverHidden: parseBoolean(getCookie(this.$options.cookieKey)),
       discussionWithOpenForm: '',
       isLoggedIn: isLoggedIn(),
     };
@@ -96,7 +96,7 @@ export default {
   methods: {
     handleSidebarClick() {
       this.isResolvedCommentsPopoverHidden = true;
-      Cookies.set(this.$options.cookieKey, 'true', { expires: 365 * 10 });
+      setCookie(this.$options.cookieKey, 'true', { expires: 365 * 10 });
       this.updateActiveDiscussion();
     },
     updateActiveDiscussion(id) {

app/assets/javascripts/diffs/index.js

-import Cookies from 'js-cookie';
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
+
 import { getParameterValues } from '~/lib/utils/url_utility';
 import eventHub from '../notes/event_hub';
 import diffsApp from './components/app.vue';
@@ -58,14 +58,14 @@ export default function initDiffsApp(store) {
       // Check for cookie and save that setting for future use.
       // Then delete the cookie as we are phasing it out and using the database as SSOT.
       // NOTE: This can/should be removed later
-      if (Cookies.get(DIFF_WHITESPACE_COOKIE_NAME)) {
-        const hideWhitespace = Cookies.get(DIFF_WHITESPACE_COOKIE_NAME);
+      if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
+        const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
         this.setShowWhitespace({
           url: this.endpointUpdateUser,
           showWhitespace: hideWhitespace !== '1',
           trackClick: false,
         });
-        Cookies.remove(DIFF_WHITESPACE_COOKIE_NAME);
+        removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
       } else {
         // This is only to set the the user preference in Vuex for use later
         this.setShowWhitespace({
@@ -77,7 +77,7 @@ export default function initDiffsApp(store) {
 
       const vScrollingParam = getParameterValues('virtual_scrolling')[0];
       if (vScrollingParam === 'false' || vScrollingParam === 'true') {
-        Cookies.set('diffs_virtual_scrolling', vScrollingParam);
+        setCookie('diffs_virtual_scrolling', vScrollingParam);
       }
     },
     methods: {

app/assets/javascripts/diffs/store/actions.js

-import Cookies from 'js-cookie';
 import Vue from 'vue';
+import {
+  setCookie,
+  handleLocationHash,
+  historyPushState,
+  scrollToElement,
+} from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
-import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
+
 import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
@@ -369,7 +374,7 @@ export const setRenderIt = ({ commit }, file) => commit(types.RENDER_FILE, file)
 export const setInlineDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
 
-  Cookies.set(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
+  setCookie(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
   const url = mergeUrlParams({ view: INLINE_DIFF_VIEW_TYPE }, window.location.href);
   historyPushState(url);
 
@@ -381,7 +386,7 @@ export const setInlineDiffViewType = ({ commit }) => {
 export const setParallelDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE);
 
-  Cookies.set(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
+  setCookie(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
   const url = mergeUrlParams({ view: PARALLEL_DIFF_VIEW_TYPE }, window.location.href);
   historyPushState(url);
 

app/assets/javascripts/diffs/store/getters.js

-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { __, n__ } from '~/locale';
 import {
@@ -175,7 +175,7 @@ export function suggestionCommitMessage(state, _, rootState) {
 }
 
 export const isVirtualScrollingEnabled = (state) => {
-  const vSrollerCookie = Cookies.get('diffs_virtual_scrolling');
+  const vSrollerCookie = getCookie('diffs_virtual_scrolling');
 
   if (state.disableVirtualScroller) {
     return false;

app/assets/javascripts/diffs/store/modules/diff_state.js

-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants';
 
 const getViewTypeFromQueryString = () => getParameterValues('view')[0];
 
-const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME);
+const viewTypeFromCookie = getCookie(DIFF_VIEW_COOKIE_NAME);
 const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 
 export default () => ({

app/assets/javascripts/emoji/components/utils.js

-import Cookies from 'js-cookie';
 import { chunk, memoize, uniq } from 'lodash';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { initEmojiMap, getEmojiCategoryMap } from '~/emoji';
 import {
   EMOJIS_PER_ROW,
@@ -13,7 +13,7 @@ export const generateCategoryHeight = (emojisLength) =>
   emojisLength * EMOJI_ROW_HEIGHT + CATEGORY_ROW_HEIGHT;
 
 export const getFrequentlyUsedEmojis = () => {
-  const savedEmojis = Cookies.get(FREQUENTLY_USED_COOKIE_KEY);
+  const savedEmojis = getCookie(FREQUENTLY_USED_COOKIE_KEY);
 
   if (!savedEmojis) return null;
 
@@ -30,13 +30,13 @@ export const getFrequentlyUsedEmojis = () => {
 
 export const addToFrequentlyUsed = (emoji) => {
   const frequentlyUsedEmojis = uniq(
-    (Cookies.get(FREQUENTLY_USED_COOKIE_KEY) || '')
+    (getCookie(FREQUENTLY_USED_COOKIE_KEY) || '')
       .split(',')
       .filter((e) => e)
       .concat(emoji),
   );
 
-  Cookies.set(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','), { expires: 365 });
+  setCookie(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','));
 };
 
 export const hasFrequentlyUsedEmojis = () => getFrequentlyUsedEmojis() !== null;

app/assets/javascripts/files_comment_button.js

@@ -4,7 +4,7 @@
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 
 const LINE_NUMBER_CLASS = 'diff-line-num';
 const UNFOLDABLE_LINE_CLASS = 'js-unfold';
@@ -29,7 +29,7 @@ export default {
         $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('canCreateNote') === '';
     }
 
-    this.isParallelView = Cookies.get('diff_view') === 'parallel';
+    this.isParallelView = getCookie('diff_view') === 'parallel';
 
     if (this.userCanCreateNote) {
       $diffFile

app/assets/javascripts/groups/landing.js

-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 class Landing {
   constructor(landingElement, dismissButton, cookieName) {
@@ -27,11 +26,11 @@ class Landing {
 
   dismissLanding() {
     this.landingElement.classList.add('hidden');
-    Cookies.set(this.cookieName, 'true', { expires: 365 });
+    setCookie(this.cookieName, 'true');
   }
 
   isDismissed() {
-    return parseBoolean(Cookies.get(this.cookieName));
+    return parseBoolean(getCookie(this.cookieName));
   }
 }
 

app/assets/javascripts/issuable/issuable_context.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import { loadCSSFile } from '~/lib/utils/css_utils';
 import UsersSelect from '~/users_select';
 
@@ -62,7 +62,7 @@ export default class IssuableContext {
       const supportedSizes = ['xs', 'sm', 'md'];
 
       if (supportedSizes.includes(bpBreakpoint)) {
-        Cookies.set('collapsed_gutter', true);
+        setCookie('collapsed_gutter', true);
       }
     });
   }

app/assets/javascripts/lib/utils/common_utils.js

@@ -705,7 +705,10 @@ export const scopedLabelKey = ({ title = '' }) => {
 };
 
 // Methods to set and get Cookie
-export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });
+export const setCookie = (name, value, attributes) => {
+  const defaults = { expires: 365, secure: Boolean(window.gon?.secure) };
+  Cookies.set(name, value, { ...defaults, ...attributes });
+};
 
 export const getCookie = (name) => Cookies.get(name);
 

app/assets/javascripts/merge_conflicts/store/actions.js

-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -51,7 +51,7 @@ export const setFailedRequest = ({ commit }, message) => {
 
 export const setViewType = ({ commit }, viewType) => {
   commit(types.SET_VIEW_TYPE, viewType);
-  Cookies.set('diff_view', viewType);
+  setCookie('diff_view', viewType);
 };
 
 export const setSubmitState = ({ commit }, isSubmitting) => {

app/assets/javascripts/merge_conflicts/store/state.js

-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { VIEW_TYPES } from '../constants';
 
-const diffViewType = Cookies.get('diff_view');
+const diffViewType = getCookie('diff_view');
 
 export default () => ({
   isLoading: true,

app/assets/javascripts/merge_request_tabs.js

 /* eslint-disable no-new, class-methods-use-this */
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
+import {
+  getCookie,
+  parseUrlPathname,
+  isMetaClick,
+  parseBoolean,
+  scrollToElement,
+} from '~/lib/utils/common_utils';
 import createEventHub from '~/helpers/event_hub_factory';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import Diff from './diff';
 import createFlash from './flash';
 import { initDiffStatsDropdown } from './init_diff_stats_dropdown';
 import axios from './lib/utils/axios_utils';
-import {
-  parseUrlPathname,
-  isMetaClick,
-  parseBoolean,
-  scrollToElement,
-} from './lib/utils/common_utils';
+
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
 import { __ } from './locale';
@@ -514,7 +515,7 @@ export default class MergeRequestTabs {
 
   // Expand the issuable sidebar unless the user explicitly collapsed it
   expandView() {
-    if (parseBoolean(Cookies.get('collapsed_gutter'))) {
+    if (parseBoolean(getCookie('collapsed_gutter'))) {
       return;
     }
     const $gutterBtn = $('.js-sidebar-toggle');

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

 <script>
 import { GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import Translate from '../../../../../vue_shared/translate';
 
 Vue.use(Translate);
@@ -17,13 +17,13 @@ export default {
   inject: ['docsUrl', 'illustrationUrl'],
   data() {
     return {
-      calloutDismissed: parseBoolean(Cookies.get(cookieKey)),
+      calloutDismissed: parseBoolean(getCookie(cookieKey)),
     };
   },
   methods: {
     dismissCallout() {
       this.calloutDismissed = true;
-      Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
+      setCookie(cookieKey, this.calloutDismissed);
     },
   },
 };

app/assets/javascripts/pages/projects/project.js

 /* eslint-disable func-names, no-return-assign */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import initClonePanel from '~/clone_panel';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import createFlash from '~/flash';
@@ -24,19 +24,19 @@ export default class Project {
     }
 
     $('.js-hide-no-ssh-message').on('click', function (e) {
-      Cookies.set('hide_no_ssh_message', 'false');
+      setCookie('hide_no_ssh_message', 'false');
       $(this).parents('.js-no-ssh-key-message').remove();
       return e.preventDefault();
     });
     $('.js-hide-no-password-message').on('click', function (e) {
-      Cookies.set('hide_no_password_message', 'false');
+      setCookie('hide_no_password_message', 'false');
       $(this).parents('.js-no-password-message').remove();
       return e.preventDefault();
     });
     $('.hide-auto-devops-implicitly-enabled-banner').on('click', function (e) {
       const projectId = $(this).data('project-id');
       const cookieKey = `hide_auto_devops_implicitly_enabled_banner_${projectId}`;
-      Cookies.set(cookieKey, 'false');
+      setCookie(cookieKey, 'false');
       $(this).parents('.auto-devops-implicitly-enabled-banner').remove();
       return e.preventDefault();
     });

app/assets/javascripts/pages/users/index.js

 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import UserCallout from '~/user_callout';
 import UserTabs from './user_tabs';
 
@@ -10,7 +10,7 @@ function initUserProfile(action) {
   // hide project limit message
   $('.hide-project-limit-message').on('click', (e) => {
     e.preventDefault();
-    Cookies.set('hide_project_limit_message', 'false');
+    setCookie('hide_project_limit_message', 'false');
     $(this).parents('.project-limit-message').remove();
   });
 }

app/assets/javascripts/right_sidebar.js

 /* eslint-disable func-names, consistent-return, no-param-reassign */
 
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 import { hide, fixTitle } from '~/tooltips';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -80,7 +80,7 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
   hide($this);
 
   if (!triggered) {
-    Cookies.set('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+    setCookie('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
   }
 };
 

app/assets/javascripts/serverless/survey_banner.vue

 <script>
 import { GlBanner } from '@gitlab/ui';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -19,13 +18,13 @@ export default {
     };
   },
   created() {
-    if (parseBoolean(Cookies.get('hide_serverless_survey'))) {
+    if (parseBoolean(getCookie('hide_serverless_survey'))) {
       this.visible = false;
     }
   },
   methods: {
     handleClose() {
-      Cookies.set('hide_serverless_survey', 'true', { expires: 365 * 10 });
+      setCookie('hide_serverless_survey', 'true', { expires: 365 * 10 });
       this.visible = false;
     },
   },

app/assets/javascripts/user_callout.js

 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 
 export default class UserCallout {
   constructor(options = {}) {
@@ -9,7 +9,7 @@ export default class UserCallout {
 
     this.userCalloutBody = $(`.${className}`);
     this.cookieName = this.userCalloutBody.data('uid');
-    this.isCalloutDismissed = Cookies.get(this.cookieName);
+    this.isCalloutDismissed = getCookie(this.cookieName);
     this.init();
   }
 
@@ -30,7 +30,7 @@ export default class UserCallout {
       cookieOptions.path = this.userCalloutBody.data('projectPath');
     }
 
-    Cookies.set(this.cookieName, 'true', cookieOptions);
+    setCookie(this.cookieName, 'true', cookieOptions);
 
     if ($currentTarget.hasClass('close') || $currentTarget.hasClass('js-close')) {
       this.userCalloutBody.remove();

app/assets/javascripts/vue_alerts.js

 import Vue from 'vue';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
 
 const getCookieExpirationPeriod = (expirationPeriod) => {
@@ -33,7 +33,7 @@ const mountVueAlert = (el) => {
             if (!dismissCookieName) {
               return;
             }
-            Cookies.set(dismissCookieName, true, {
+            setCookie(dismissCookieName, true, {
               expires: getCookieExpirationPeriod(dismissCookieExpire),
             });
           },

app/assets/javascripts/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue

 <script>
 import { GlIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
+
 import { USER_COLLAPSED_GUTTER_COOKIE } from '../constants';
 
 export default {
@@ -10,7 +10,7 @@ export default {
     GlIcon,
   },
   data() {
-    const userExpanded = !parseBoolean(Cookies.get(USER_COLLAPSED_GUTTER_COOKIE));
+    const userExpanded = !parseBoolean(getCookie(USER_COLLAPSED_GUTTER_COOKIE));
 
     // We're deliberately keeping two different props for sidebar status;
     // 1. userExpanded reflects value based on cookie `collapsed_gutter`.
@@ -46,7 +46,7 @@ export default {
       this.isExpanded = !this.isExpanded;
       this.userExpanded = this.isExpanded;
 
-      Cookies.set(USER_COLLAPSED_GUTTER_COOKIE, !this.userExpanded);
+      setCookie(USER_COLLAPSED_GUTTER_COOKIE, !this.userExpanded);
       this.updatePageContainerClass();
     },
   },

ee/app/assets/javascripts/burndown_chart/index.js

 import $ from 'jquery';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { setCookie } from '~/lib/utils/common_utils';
 import createDefaultClient from '~/lib/graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BurnCharts from './components/burn_charts.vue';
@@ -17,7 +17,7 @@ export default () => {
   const hint = $('.burndown-hint');
   hint.on('click', '.dismiss-icon', () => {
     hint.hide();
-    Cookies.set('hide_burndown_message', 'true');
+    setCookie('hide_burndown_message', 'true');
   });
 
   // generate burndown chart (if data available)

ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue

 <script>
 import { GlTabs, GlTab } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import { getCookie } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { COMPLIANCE_TAB_COOKIE_KEY } from '../constants';
@@ -60,7 +60,7 @@ export default {
   },
   methods: {
     showTabs() {
-      return Cookies.get(COMPLIANCE_TAB_COOKIE_KEY) === 'true';
+      return getCookie(COMPLIANCE_TAB_COOKIE_KEY) === 'true';
     },
     toggleDrawer(mergeRequest) {
       if (this.showDrawer && mergeRequest.id === this.drawerMergeRequest.id) {

ee/app/assets/javascripts/ee_trial_banner/ee_trial_banner.js

-import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 export default class EETrialBanner {
   constructor($trialBanner) {
@@ -55,23 +54,23 @@ export default class EETrialBanner {
     const today = new Date();
 
     // Check if Cookie is defined
-    if (!Cookies.get(this.COOKIE_KEY)) {
+    if (!getCookie(this.COOKIE_KEY)) {
       // Cookie was not defined, let's define with default value
 
       // Check if License is yet to expire
       if (today < this.licenseExpiresOn) {
         // License has not expired yet, we show initial banner of 7 days
         // with cookie set to validity same as license expiry
-        Cookies.set(this.COOKIE_KEY, 'true', { expires: this.licenseExpiresOn });
+        setCookie(this.COOKIE_KEY, 'true', { expires: this.licenseExpiresOn });
       } else {
         // License is already expired so we show final Banner with cookie set to 20 years validity.
-        Cookies.set(this.COOKIE_KEY, 'true', { expires: 7300 });
+        setCookie(this.COOKIE_KEY, 'true', { expires: 7300 });
       }
 
       this.toggleBanner(true);
     } else {
       // Cookie was defined, let's read value and show/hide banner
-      this.toggleBanner(parseBoolean(Cookies.get(this.COOKIE_KEY)));
+      this.toggleBanner(parseBoolean(getCookie(this.COOKIE_KEY)));
     }
   }
 
@@ -103,8 +102,8 @@ export default class EETrialBanner {
     this.toggleBanner(false);
     this.toggleMainNavbarMargin(false);
     this.toggleSecondaryNavbarMargin(false);
-    if (Cookies.get(this.COOKIE_KEY)) {
-      Cookies.set(this.COOKIE_KEY, 'false');
+    if (getCookie(this.COOKIE_KEY)) {
+      setCookie(this.COOKIE_KEY, 'false');
     }
   }
 }

ee/app/assets/javascripts/epic/epic_bundle.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Cookies from 'js-cookie';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mapActions } from 'vuex';
+import { setCookie, convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import { parseIssuableData } from '~/issues/show/utils/parse_data';
-import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
+
 import { defaultClient } from '~/sidebar/graphql';
 import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
 
@@ -35,7 +35,7 @@ export default () => {
   // Collapse the sidebar on mobile screens by default
   const bpBreakpoint = bp.getBreakpointSize();
   if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm' || bpBreakpoint === 'md') {
-    Cookies.set('collapsed_gutter', true);
+    setCookie('collapsed_gutter', true);
   }
 
   return new Vue({

ee/app/assets/javascripts/epic/sidebar_context.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 
 export default class SidebarContext {
   constructor() {
@@ -35,7 +35,7 @@ export default class SidebarContext {
       // collapsed_gutter cookie hides the sidebar
       const bpBreakpoint = bp.getBreakpointSize();
       if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm' || bpBreakpoint === 'md') {
-        Cookies.set('collapsed_gutter', true);
+        setCookie('collapsed_gutter', true);
       }
     });
   }

ee/app/assets/javascripts/epic/utils/epic_utils.js

 import $ from 'jquery';
-import Cookies from 'js-cookie';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 
 import { sanitize } from '~/lib/dompurify';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
 
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { dateInWords, parsePikadayDate } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 
@@ -33,9 +32,9 @@ const toggleContainerClass = (className) => {
   }
 };
 
-const getCollapsedGutter = () => parseBoolean(Cookies.get('collapsed_gutter'));
+const getCollapsedGutter = () => parseBoolean(getCookie('collapsed_gutter'));
 
-const setCollapsedGutter = (value) => Cookies.set('collapsed_gutter', value);
+const setCollapsedGutter = (value) => setCookie('collapsed_gutter', value);
 
 const getDateValidity = (startDateTime, dueDateTime) => {
   // If both dates are defined

ee/app/assets/javascripts/namespace_storage_limit_alert.js

-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 
 const handleOnDismiss = ({ currentTarget }) => {
   const {
     dataset: { id, level },
   } = currentTarget;
 
-  Cookies.set(`hide_storage_limit_alert_${id}_${level}`, true, { expires: 30 });
+  setCookie(`hide_storage_limit_alert_${id}_${level}`, true, { expires: 30 });
 
   const notification = document.querySelector('.js-namespace-storage-alert');
   notification.parentNode.removeChild(notification);

ee/app/assets/javascripts/namespace_user_cap_reached_alert.js

-import Cookies from 'js-cookie';
+import { setCookie } from '~/lib/utils/common_utils';
 
 const handleOnDismiss = ({ currentTarget }) => {
   const {
     dataset: { cookieId },
   } = currentTarget;
 
-  Cookies.set(cookieId, true, { expires: 30 });
+  setCookie(cookieId, true, { expires: 30 });
 };
 
 export default () => {

ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerability_report.vue

 <script>
-import Cookies from 'js-cookie';
 import { difference } from 'lodash';
+import { getCookie, setCookie, parseBoolean } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+
 import { translateScannerNames } from '~/security_configuration/utils';
 import SecurityTrainingPromo from 'ee/security_dashboard/components/shared/security_training_promo.vue';
 import ReportNotConfiguredProject from '../shared/empty_states/report_not_configured_project.vue';
@@ -31,7 +31,7 @@ export default {
       scannerAlertDismissed: false,
       securityScanners: {},
       shouldShowAutoFixUserCallout:
-        this.glFeatures.securityAutoFix && !Cookies.get(this.$options.autoFixUserCalloutCookieName),
+        this.glFeatures.securityAutoFix && !getCookie(this.$options.autoFixUserCalloutCookieName),
     };
   },
   apollo: {
@@ -73,7 +73,7 @@ export default {
   },
   methods: {
     closeAutoFixUserCallout() {
-      Cookies.set(this.$options.autoFixUserCalloutCookieName, 'true');
+      setCookie(this.$options.autoFixUserCalloutCookieName, 'true');
       this.shouldShowAutoFixUserCallout = false;
     },
     setScannerAlertDismissed(value) {

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report.vue

 <script>
-import Cookies from 'js-cookie';
 import { PortalTarget } from 'portal-vue';
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -58,7 +58,7 @@ export default {
     const shouldShowAutoFixUserCallout =
       this.dashboardType === DASHBOARD_TYPES.PROJECT &&
       this.glFeatures.securityAutoFix &&
-      !Cookies.get(this.$options.autoFixUserCalloutCookieName);
+      !getCookie(this.$options.autoFixUserCalloutCookieName);
 
     return {
       filters: null,
@@ -103,7 +103,7 @@ export default {
       this.filters = filters;
     },
     handleAutoFixUserCalloutClose() {
-      Cookies.set(this.$options.autoFixUserCalloutCookieName, 'true');
+      setCookie(this.$options.autoFixUserCalloutCookieName, 'true');
       this.shouldShowAutoFixUserCallout = false;
     },
   },

ee/app/assets/javascripts/vulnerabilities/components/resolution_alert.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
 
 export const COOKIE_NAME = 'dismissed_resolution_alerts';
@@ -35,7 +35,7 @@ export default {
   methods: {
     alreadyDismissedVulnerabilities() {
       try {
-        return JSON.parse(Cookies.get(COOKIE_NAME));
+        return JSON.parse(getCookie(COOKIE_NAME));
       } catch (e) {
         return [];
       }
@@ -45,7 +45,7 @@ export default {
     },
     dismiss() {
       const dismissed = this.alreadyDismissedVulnerabilities().concat(this.vulnerabilityId);
-      Cookies.set(COOKIE_NAME, JSON.stringify(dismissed), { expires: 90 });
+      setCookie(COOKIE_NAME, JSON.stringify(dismissed), { expires: 90 });
       this.isVisible = false;
     },
   },

ee/spec/frontend/ee_trial_banner/ee_trial_banner_spec.js

@@ -55,7 +55,10 @@ describe('EE gitlab license banner dismiss', () => {
     jest.spyOn(Cookies, 'set');
     dismiss();
 
-    expect(Cookies.set).toHaveBeenCalledWith('show_ee_trial_banner', 'false');
+    expect(Cookies.set).toHaveBeenCalledWith('show_ee_trial_banner', 'false', {
+      expires: 365,
+      secure: false,
+    });
   });
 
   it('should not call Cookies.set for `show_ee_trial_banner` when a non close button is clicked', () => {

ee/spec/frontend/namespace_storage_limit_alert_spec.js

@@ -31,6 +31,7 @@ describe('broadcast message on dismiss', () => {
 
     expect(Cookies.set).toHaveBeenCalledWith('hide_storage_limit_alert_1_info', true, {
       expires: 30,
+      secure: false,
     });
   });
 });

ee/spec/frontend/namespace_user_cap_reached_alert_spec.js

@@ -22,6 +22,9 @@ describe('dismissing the alert', () => {
 
     clickDismissButton();
 
-    expect(Cookies.set).toHaveBeenCalledWith('hide_user_cap_alert_1', true, { expires: 30 });
+    expect(Cookies.set).toHaveBeenCalledWith('hide_user_cap_alert_1', true, {
+      expires: 30,
+      secure: false,
+    });
   });
 });

ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js

@@ -189,6 +189,10 @@ describe('Project vulnerability report app component', () => {
       expect(Cookies.set).toHaveBeenCalledWith(
         wrapper.vm.$options.autoFixUserCalloutCookieName,
         'true',
+        {
+          expires: 365,
+          secure: false,
+        },
       );
     });
 

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report_spec.js

@@ -189,6 +189,10 @@ describe('Vulnerability Report', () => {
       expect(Cookies.set).toHaveBeenCalledWith(
         wrapper.vm.$options.autoFixUserCalloutCookieName,
         'true',
+        {
+          expires: 365,
+          secure: false,
+        },
       );
     });
 

lib/gitlab/gon_helper.rb

@@ -27,6 +27,7 @@ module Gitlab
       gon.revision               = Gitlab.revision
       gon.feature_category       = Gitlab::ApplicationContext.current_context_attribute(:feature_category).presence
       gon.gitlab_logo            = ActionController::Base.helpers.asset_path('gitlab_logo.png')
+      gon.secure                 = Gitlab.config.gitlab.https
       gon.sprite_icons           = IconsHelper.sprite_icon_path
       gon.sprite_file_icons      = IconsHelper.sprite_file_icons_path
       gon.emoji_sprites_css_path = ActionController::Base.helpers.stylesheet_path('emoji_sprites')

spec/frontend/broadcast_notification_spec.js

@@ -30,6 +30,7 @@ describe('broadcast message on dismiss', () => {
 
     expect(Cookies.set).toHaveBeenCalledWith('hide_broadcast_message_1', true, {
       expires: new Date(endsAt),
+      secure: false,
     });
   });
 });

spec/frontend/code_quality_walkthrough/components/step_spec.js

@@ -118,7 +118,7 @@ describe('When the code_quality_walkthrough URL parameter is present', () => {
       expect(Cookies.set).toHaveBeenCalledWith(
         EXPERIMENT_NAME,
         { commit_ci_file: true, data: dummyContext },
-        { expires: 365 },
+        { expires: 365, secure: false },
       );
     });
 

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -254,7 +254,10 @@ describe('Design management design sidebar component', () => {
     it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => {
       jest.spyOn(Cookies, 'set');
       wrapper.trigger('click');
-      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
+      expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', {
+        expires: 365 * 10,
+        secure: false,
+      });
     });
   });
 

spec/frontend/emoji/components/utils_spec.js

@@ -31,6 +31,7 @@ describe('addToFrequentlyUsed', () => {
 
     expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsup', {
       expires: 365,
+      secure: false,
     });
   });
 
@@ -41,6 +42,7 @@ describe('addToFrequentlyUsed', () => {
 
     expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsdown,thumbsup', {
       expires: 365,
+      secure: false,
     });
   });
 
@@ -51,6 +53,7 @@ describe('addToFrequentlyUsed', () => {
 
     expect(Cookies.set).toHaveBeenCalledWith('frequently_used_emojis', 'thumbsup', {
       expires: 365,
+      secure: false,
     });
   });
 });

spec/frontend/groups/landing_spec.js

@@ -159,7 +159,10 @@ describe('Landing', () => {
     });
 
     it('should call Cookies.set', () => {
-      expect(Cookies.set).toHaveBeenCalledWith(test.cookieName, 'true', { expires: 365 });
+      expect(Cookies.set).toHaveBeenCalledWith(test.cookieName, 'true', {
+        expires: 365,
+        secure: false,
+      });
     });
   });
 

spec/frontend/merge_conflicts/store/actions_spec.js

@@ -207,7 +207,10 @@ describe('merge conflicts actions', () => {
         ],
         [],
         () => {
-          expect(Cookies.set).toHaveBeenCalledWith('diff_view', payload);
+          expect(Cookies.set).toHaveBeenCalledWith('diff_view', payload, {
+            expires: 365,
+            secure: false,
+          });
           done();
         },
       );

spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js

@@ -84,6 +84,7 @@ describe('Pipeline Schedule Callout', () => {
 
         expect(setCookiesSpy).toHaveBeenCalledWith('pipeline_schedules_callout_dismissed', true, {
           expires: 365,
+          secure: false,
         });
       });
     });

spec/frontend/serverless/survey_banner_spec.js

@@ -37,7 +37,10 @@ describe('Knative survey banner', () => {
     wrapper.find(GlBanner).vm.$emit('close');
 
     await nextTick();
-    expect(Cookies.set).toHaveBeenCalledWith('hide_serverless_survey', 'true', { expires: 3650 });
+    expect(Cookies.set).toHaveBeenCalledWith('hide_serverless_survey', 'true', {
+      expires: 3650,
+      secure: false,
+    });
     expect(wrapper.find(GlBanner).exists()).toBe(false);
   });
 

spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js

@@ -70,7 +70,10 @@ describe('IssuableSidebarRoot', () => {
       it('updates "collapsed_gutter" cookie value and layout classes', async () => {
         await findToggleSidebarButton().trigger('click');
 
-        expect(Cookies.set).toHaveBeenCalledWith(USER_COLLAPSED_GUTTER_COOKIE, true);
+        expect(Cookies.set).toHaveBeenCalledWith(USER_COLLAPSED_GUTTER_COOKIE, true, {
+          expires: 365,
+          secure: false,
+        });
         assertPageLayoutClasses({ isExpanded: false });
       });
     });

spec/lib/gitlab/gon_helper_spec.rb

@@ -6,9 +6,41 @@ RSpec.describe Gitlab::GonHelper do
   let(:helper) do
     Class.new do
       include Gitlab::GonHelper
+
+      def current_user
+        nil
+      end
     end.new
   end
 
+  describe '#add_gon_variables' do
+    let(:gon) { double('gon').as_null_object }
+    let(:https) { true }
+
+    before do
+      allow(helper).to receive(:gon).and_return(gon)
+      stub_config_setting(https: https)
+    end
+
+    context 'when HTTPS is enabled' do
+      it 'sets the secure flag to true' do
+        expect(gon).to receive(:secure=).with(true)
+
+        helper.add_gon_variables
+      end
+    end
+
+    context 'when HTTP is enabled' do
+      let(:https) { false }
+
+      it 'sets the secure flag to false' do
+        expect(gon).to receive(:secure=).with(false)
+
+        helper.add_gon_variables
+      end
+    end
+  end
+
   describe '#push_frontend_feature_flag' do
     before do
       skip_feature_flags_yaml_validation