Merge branch 'sh-secure-frontend-cookies' into 'master'

Enable Secure attribute for frontend cookies

See merge request gitlab-org/gitlab!79383

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