Merge pull request #248 from sasjs/cookies-management

fix(cookie): XSRF cookie is removed and passed token in head section
sasjs · Aug 4, 2022 · 3671736 · 3671736
2 parents 78bea7c + f7fcc77
commit 3671736
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 19 deletions.
diff --git a/api/src/app.ts b/api/src/app.ts
@@ -1,6 +1,6 @@
 import path from 'path'
 import express, { ErrorRequestHandler } from 'express'
-import csrf from 'csurf'
+import csrf, { CookieOptions } from 'csurf'
 import cookieParser from 'cookie-parser'
 import dotenv from 'dotenv'
 
@@ -32,9 +32,10 @@ const app = express()
 
 const { PROTOCOL } = process.env
 
-export const cookieOptions = {
+export const cookieOptions: CookieOptions = {
   secure: PROTOCOL === ProtocolType.HTTPS,
   httpOnly: true,
+  sameSite: PROTOCOL === ProtocolType.HTTPS ? 'none' : undefined,
   maxAge: 24 * 60 * 60 * 1000 // 24 hours
 }
 

diff --git a/api/src/routes/api/spec/web.spec.ts b/api/src/routes/api/spec/web.spec.ts
@@ -39,12 +39,11 @@ describe('web', () => {
 
   describe('home', () => {
     it('should respond with CSRF Token', async () => {
-      await request(app)
-        .get('/')
-        .expect(
-          'set-cookie',
-          /_csrf=.*; Max-Age=86400000; Path=\/; HttpOnly,XSRF-TOKEN=.*; Path=\//
-        )
+      const res = await request(app).get('/').expect(200)
+
+      expect(res.text).toMatch(
+        /<script>document.cookie = '(XSRF-TOKEN=.*; Max-Age=86400; SameSite=Strict; Path=\/;)'<\/script>/
+      )
     })
   })
 
@@ -154,10 +153,10 @@ describe('web', () => {
 
 const getCSRF = async (app: Express) => {
   // make request to get CSRF
-  const { header } = await request(app).get('/')
+  const { header, text } = await request(app).get('/')
   const cookies = header['set-cookie'].join()
 
-  const csrfToken = extractCSRF(cookies)
+  const csrfToken = extractCSRF(text)
   return { csrfToken, cookies }
 }
 
@@ -177,7 +176,7 @@ const performLogin = async (
   return { cookies: newCookies }
 }
 
-const extractCSRF = (cookies: string) =>
-  /_csrf=(.*); Max-Age=86400000; Path=\/; HttpOnly,XSRF-TOKEN=(.*); Path=\//.exec(
-    cookies
-  )![2]
+const extractCSRF = (text: string) =>
+  /<script>document.cookie = 'XSRF-TOKEN=(.*); Max-Age=86400; SameSite=Strict; Path=\/;'<\/script>/.exec(
+    text
+  )![1]
diff --git a/api/src/routes/appStream/style.ts b/api/src/routes/appStream/style.ts
@@ -26,6 +26,7 @@ export const style = `<style>
 }
 .app-container .app img{
   width: 100%;
+  height: calc(100% - 30px);
   margin-bottom: 10px;
   border-radius: 10px;
 }

diff --git a/api/src/routes/web/web.ts b/api/src/routes/web/web.ts
@@ -11,11 +11,15 @@ webRouter.get('/', async (req, res) => {
   try {
     response = await controller.home()
   } catch (_) {
-    response = 'Web Build is not present'
+    response = '<html><head></head><body>Web Build is not present</body></html>'
   } finally {
-    res.cookie('XSRF-TOKEN', req.csrfToken())
+    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${req.csrfToken()}; Max-Age=86400; SameSite=Strict; Path=/;'</script>`
+    const injectedContent = response?.replace(
+      '</head>',
+      `${codeToInject}</head>`
+    )
 
-    return res.send(response)
+    return res.send(injectedContent)
   }
 })
 

diff --git a/api/src/utils/verifyEnvVariables.ts b/api/src/utils/verifyEnvVariables.ts
@@ -125,8 +125,27 @@ const verifyCORS = (): string[] => {
 
   if (CORS) {
     const corsTypes = Object.values(CorsType)
+
     if (!corsTypes.includes(CORS as CorsType))
       errors.push(`- CORS '${CORS}'\n - valid options ${corsTypes}`)
+
+    if (CORS === CorsType.ENABLED) {
+      const { WHITELIST } = process.env
+
+      const urls = WHITELIST?.trim()
+        .split(' ')
+        .filter((url) => !!url)
+      if (urls?.length) {
+        urls.forEach((url) => {
+          if (!url.startsWith('http://') && !url.startsWith('https://'))
+            errors.push(
+              `- CORS '${CORS}'\n - provided WHITELIST ${url} is not valid`
+            )
+        })
+      } else {
+        errors.push(`- CORS '${CORS}'\n - provide at least one WHITELIST URL`)
+      }
+    }
   } else {
     const { MODE } = process.env
     process.env.CORS =

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -22,7 +22,7 @@ function App() {
         <HashRouter>
           <Header />
           <Routes>
-            <Route path="/" element={<Login />} />
+            <Route path="*" element={<Login />} />
           </Routes>
         </HashRouter>
       </ThemeProvider>

diff --git a/web/src/context/appContext.tsx b/web/src/context/appContext.tsx
@@ -80,7 +80,18 @@ const AppContextProvider = (props: { children: ReactNode }) => {
       })
       .catch(() => {
         setLoggedIn(false)
-        axios.get('/') // get CSRF TOKEN
+        // get CSRF TOKEN and set cookie
+        axios
+          .get('/')
+          .then((res) => res.data)
+          .then((data: string) => {
+            const result =
+              /<script>document.cookie = '(XSRF-TOKEN=.*; Max-Age=86400; SameSite=Strict; Path=\/;)'<\/script>/.exec(
+                data
+              )?.[1]
+
+            if (result) document.cookie = result
+          })
       })
 
     axios