Merge branch '201-look-into-the-cookies-for-non-secured-connections' into 'develop'

Resolve "Look into the cookies for non secured connections"

Closes #201

See merge request bramw/baserow!125

changelog.md

@@ -8,6 +8,7 @@
 * Added community chat to the readme.
 * Made the cookies strict and secure.
 * Removed the redundant _DOMAIN variables.
+* Set un-secure lax cookie when public web frontend url isn't over a secure connection.
 * Fixed bug where the sort choose field item didn't have a hover effect.
 
 ## Released (2020-11-02)

web-frontend/config/nuxt.config.test.js

@@ -10,5 +10,8 @@ export default _.assign({}, base(), {
   debug: false,
   env: {
     PRIVATE_BACKEND_URL: 'http://localhost',
+    PUBLIC_BACKEND_URL: 'http://localhost',
+    PUBLIC_WEB_FRONTEND_URL: 'http://localhost',
+    INITIAL_TABLE_DATA_LIMIT: null,
   },
 })

web-frontend/modules/core/middleware/authentication.js

@@ -5,7 +5,7 @@ export default function ({ store, req, app }) {
   if (process.server && !req) return
 
   // Load the token
-  const token = getToken(app.$cookies)
+  const token = getToken(app)
 
   // If there already is a token we will refresh it to check if it is valid and
   // to get fresh user information. This will probably happen on the server

web-frontend/modules/core/middleware/groupsAndApplications.js

@@ -9,7 +9,7 @@ export default async function GroupsAndApplications({ store, req, app }) {
   if (process.server && !req) return
 
   // Get the selected group id
-  const groupId = getGroupCookie(app.$cookies)
+  const groupId = getGroupCookie(app)
 
   // If the groups haven't already been selected we will
   if (store.getters['auth/isAuthenticated']) {

web-frontend/modules/core/store/auth.js

@@ -32,7 +32,7 @@ export const actions = {
    */
   async login({ commit, dispatch }, { email, password }) {
     const { data } = await AuthService(this.$client).login(email, password)
-    setToken(data.token, this.app.$cookies)
+    setToken(data.token, this.app)
     commit('SET_USER_DATA', data)
     dispatch('startRefreshTimeout')
   },
@@ -47,7 +47,7 @@ export const actions = {
       password,
       true
     )
-    setToken(data.token, this.app.$cookies)
+    setToken(data.token, this.app)
     commit('SET_USER_DATA', data)
     dispatch('startRefreshTimeout')
   },
@@ -56,8 +56,8 @@ export const actions = {
    * data.
    */
   async logoff({ commit, dispatch }) {
-    unsetToken(this.app.$cookies)
+    unsetToken(this.app)
-    unsetGroupCookie(this.app.$cookies)
+    unsetGroupCookie(this.app)
     commit('CLEAR_USER_DATA')
     await dispatch('group/clearAll', {}, { root: true })
     await dispatch('group/unselect', {}, { root: true })
@@ -70,13 +70,13 @@ export const actions = {
   async refresh({ commit, state, dispatch }, token) {
     try {
       const { data } = await AuthService(this.$client).refresh(token)
-      setToken(data.token, this.app.$cookies)
+      setToken(data.token, this.app)
       commit('SET_USER_DATA', data)
       dispatch('startRefreshTimeout')
     } catch {
       // The token could not be refreshed, this means the token is no longer
       // valid and the user not logged in anymore.
-      unsetToken(this.app.$cookies)
+      unsetToken(this.app)
       commit('CLEAR_USER_DATA')
 
       // @TODO we might want to do something here, trigger some event, show

web-frontend/modules/core/store/group.js

@@ -164,7 +164,7 @@ export const actions = {
    */
   select({ commit, dispatch }, group) {
     commit('SET_SELECTED', group)
-    setGroupCookie(group.id, this.app.$cookies)
+    setGroupCookie(group.id, this.app)
   },
   /**
    * Select a group by a given group id.
@@ -181,7 +181,7 @@ export const actions = {
    */
   unselect({ commit, dispatch, getters }, group) {
     commit('UNSELECT', {})
-    unsetGroupCookie(this.app.$cookies)
+    unsetGroupCookie(this.app)
     return dispatch('application/clearAll', group, { root: true })
   },
 }

web-frontend/modules/core/utils/auth.js

@@ -1,20 +1,23 @@
+import { isSecureURL } from '@baserow/modules/core/utils/string'
+
 const cookieTokenName = 'jwt_token'
 
-export const setToken = (token, cookie) => {
+export const setToken = (token, { $cookies, $env }) => {
   if (process.SERVER_BUILD) return
-  cookie.set(cookieTokenName, token, {
+  const secure = isSecureURL($env.PUBLIC_WEB_FRONTEND_URL)
+  $cookies.set(cookieTokenName, token, {
     path: '/',
     maxAge: 60 * 60 * 24 * 7,
-    sameSite: 'strict',
+    sameSite: secure ? 'strict' : 'lax',
-    secure: true,
+    secure,
   })
 }
 
-export const unsetToken = (cookie) => {
+export const unsetToken = ({ $cookies }) => {
   if (process.SERVER_BUILD) return
-  cookie.remove(cookieTokenName)
+  $cookies.remove(cookieTokenName)
 }
 
-export const getToken = (cookie) => {
+export const getToken = ({ $cookies }) => {
-  return cookie.get(cookieTokenName)
+  return $cookies.get(cookieTokenName)
 }

web-frontend/modules/core/utils/group.js

@@ -1,19 +1,24 @@
+import { isSecureURL } from '@baserow/modules/core/utils/string'
+
 const cookieGroupName = 'baserow_group_id'
 
-export const setGroupCookie = (groupId, cookie) => {
+export const setGroupCookie = (groupId, { $cookies, $env }) => {
   if (process.SERVER_BUILD) return
-  cookie.set(cookieGroupName, groupId, {
+  const secure = isSecureURL($env.PUBLIC_WEB_FRONTEND_URL)
-    sameSite: 'strict',
+  $cookies.set(cookieGroupName, groupId, {
-    secure: true,
+    path: '/',
+    maxAge: 60 * 60 * 24 * 7,
+    sameSite: secure ? 'strict' : 'lax',
+    secure,
   })
 }
 
-export const unsetGroupCookie = (cookie) => {
+export const unsetGroupCookie = ({ $cookies }) => {
   if (process.SERVER_BUILD) return
-  cookie.remove(cookieGroupName)
+  $cookies.remove(cookieGroupName)
 }
 
-export const getGroupCookie = (cookie) => {
+export const getGroupCookie = ({ $cookies }) => {
   if (process.SERVER_BUILD) return
-  return cookie.get(cookieGroupName)
+  return $cookies.get(cookieGroupName)
 }

web-frontend/modules/core/utils/string.js

@@ -52,3 +52,7 @@ export const isValidEmail = (str) => {
   const pattern = new RegExp('[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}', 'i') // check email format
   return !!pattern.test(str)
 }
+
+export const isSecureURL = (str) => {
+  return str.toLowerCase().substr(0, 5) === 'https'
+}