chore(release): 0.0.71

fix: reqHeadrs.txt will contain headers to access APIs

CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.71](https://github.com/sasjs/server/compare/v0.0.70...v0.0.71) (2022-05-07)
+
+
+### Bug Fixes
+
+* added more cookies to req ([4a8e32d](https://github.com/sasjs/server/commit/4a8e32dd20b540b6dc92d749fad90d6c7fc69376))
+* bumping core ([c0b57b9](https://github.com/sasjs/server/commit/c0b57b9e76d6db33fc64a68556a8be979dd69e40))
+* reqHeadrs.txt will contain headers to access APIs ([636301e](https://github.com/sasjs/server/commit/636301e664416fb085f704d83deb7f39ee0a91a7))
+
+### [0.0.70](https://github.com/sasjs/server/compare/v0.0.69...v0.0.70) (2022-05-06)
+
+
+### Features
+
+* CSP_DISABLE env option ([dd3acce](https://github.com/sasjs/server/commit/dd3acce3935e7cfc0b2c44a401314306915a3a10))
+
+### [0.0.69](https://github.com/sasjs/server/compare/v0.0.68...v0.0.69) (2022-05-02)
+
+
+### Bug Fixes
+
+* **upload:** appStream uses CSRF + Session authentication ([1f89279](https://github.com/sasjs/server/commit/1f8927926405887f3d134c0a1dd6452ffa33876e))
+
+### [0.0.68](https://github.com/sasjs/server/compare/v0.0.67...v0.0.68) (2022-05-02)
+
+
+### Bug Fixes
+
+* using monaco editor locally ([2548c82](https://github.com/sasjs/server/commit/2548c82dfe1149e62a570a00546dddd9e30049b1))
+
+### [0.0.67](https://github.com/sasjs/server/compare/v0.0.66...v0.0.67) (2022-05-01)
+
+### [0.0.66](https://github.com/sasjs/server/compare/v0.0.64...v0.0.66) (2022-05-01)
+
+
+### Bug Fixes
+
+* added swagger ui init file manually ([e2a97fc](https://github.com/sasjs/server/commit/e2a97fcb7c54a57a7ca118677cfce93fe9430d8f))
+* consume swagger api with CSRF ([5aaac24](https://github.com/sasjs/server/commit/5aaac24080362d6ce0c5d1157798a9343f40ae2a))
+
 ### [0.0.65](https://github.com/sasjs/server/compare/v0.0.64...v0.0.65) (2022-05-01)
 
 

README.md

@@ -48,15 +48,22 @@ When launching the app, it will make use of specific environment variables. Thes
 Example contents of a `.env` file:
 
 ```
-# options: [desktop|server] default: `desktop`
+#
+## Core Settings
+#
+
+
+# MODE options: [desktop|server] default: `desktop`
+# Desktop mode is single user and designed for workstation use
+# Server mode is multi-user and suitable for intranet / internet use
 MODE=
 
-# options: [disable|enable] default: `disable` for `server` & `enable` for `desktop`
-# If enabled, be sure to also configure the WHITELIST of third party servers.
-CORS=
+# Path to SAS executable (sas.exe / sas.sh)
+SAS_PATH=/path/to/sas/executable.exe
 
-# options: <http://localhost:3000 https://abc.com ...> space separated urls
-WHITELIST=
+# Path to working directory
+# This location is for SAS WORK, staged files, DRIVE, configuration etc
+DRIVE_PATH=/tmp
 
 # options: [http|https] default: http
 PROTOCOL=
@@ -65,16 +72,22 @@ PROTOCOL=
 PORT=
 
 
-# optional
-# for MODE: `desktop`, prompts user
-# for MODE: `server` gets value from api/package.json `configuration.sasPath`
-SAS_PATH=/path/to/sas/executable.exe
+#
+## Additional SAS Options
+#
 
 
-# optional
-# for MODE: `desktop`, prompts user
-# for MODE: `server` defaults to /tmp
-DRIVE_PATH=/tmp
+# On windows use SAS_OPTIONS and on unix use SASV9_OPTIONS
+# Any options set here are automatically applied in the SAS session
+# See: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostunx/p0wrdmqp8k0oyyn1xbx3bp3qy2wl.htm
+# And: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostwin/p0drw76qo0gig2n1kcoliekh605k.htm#p09y7hx0grw1gin1giuvrjyx61m6
+SAS_OPTIONS= -NOXCMD
+SASV9_OPTIONS= -NOXCMD
+
+
+#
+## Additional Web Server Options
+#
 
 # ENV variables required for PROTOCOL: `https`
 PRIVATE_KEY=privkey.pem
@@ -87,13 +100,30 @@ AUTH_CODE_SECRET=<secret>
 SESSION_SECRET=<secret>
 DB_CONNECT=mongodb+srv://<DB_USERNAME>:<DB_PASSWORD>@<CLUSTER>/<DB_NAME>?retryWrites=true&w=majority
 
-# SAS Options
-# On windows use SAS_OPTIONS and on unix use SASV9_OPTIONS
-# Any options set here are automatically applied in the SAS session
-# See: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostunx/p0wrdmqp8k0oyyn1xbx3bp3qy2wl.htm
-# And: https://documentation.sas.com/doc/en/pgmsascdc/9.4_3.5/hostwin/p0drw76qo0gig2n1kcoliekh605k.htm#p09y7hx0grw1gin1giuvrjyx61m6
-SAS_OPTIONS= -NOXCMD
-SASV9_OPTIONS= -NOXCMD
+# options: [disable|enable] default: `disable` for `server` & `enable` for `desktop`
+# If enabled, be sure to also configure the WHITELIST of third party servers.
+CORS=
+
+# options: <http://localhost:3000 https://abc.com ...> space separated urls
+WHITELIST=
+
+# HELMET Cross Origin Embedder Policy
+# Sets the Cross-Origin-Embedder-Policy header to require-corp when `true`
+# options: [true|false] default: true
+# Docs: https://helmetjs.github.io/#reference (`crossOriginEmbedderPolicy`)
+HELMET_COEP=
+
+# HELMET Content Security Policy
+# Path to a json file containing HELMET `contentSecurityPolicy` directives
+# Docs: https://helmetjs.github.io/#reference
+#
+# Example config:
+# {
+#   "img-src": ["'self'", "domain.com"],
+#   "script-src": ["'self'", "'unsafe-inline'"],
+#   "script-src-attr": ["'self'", "'unsafe-inline'"]
+# }
+HELMET_CSP_CONFIG_PATH=./csp.config.json
 
 ```
 

api/.env.example

@@ -8,6 +8,9 @@ FULL_CHAIN=fullchain.pem
 
 PORT=[5000] default value is 5000
 
+HELMET_CSP_CONFIG_PATH=./csp.config.json if omitted HELMET default will be used
+HELMET_COEP=[true|false] if omitted HELMET default will be used
+
 ACCESS_TOKEN_SECRET=<secret>
 REFRESH_TOKEN_SECRET=<secret>
 AUTH_CODE_SECRET=<secret>

api/csp.config.example.json

@@ -0,0 +1,5 @@
+{
+  "img-src": ["'self'", "domen.com"],
+  "script-src": ["'self'", "'unsafe-inline'"],
+  "script-src-attr": ["'self'", "'unsafe-inline'"]
+}

api/package-lock.json

@@ -8,7 +8,7 @@
       "name": "api",
       "version": "0.0.2",
       "dependencies": {
-        "@sasjs/core": "^4.19.0",
+        "@sasjs/core": "^4.23.1",
         "@sasjs/utils": "2.42.1",
         "bcryptjs": "^2.4.3",
         "connect-mongo": "^4.6.0",
@@ -1385,9 +1385,9 @@
       }
     },
     "node_modules/@sasjs/core": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.19.0.tgz",
-      "integrity": "sha512-vG2YHJveQUQqN0YBhapXb8y+Qp4OniHzRedlqKRxyL0Pc+kwXx5co4Vo+dcOI5/MX0p+8oERP2aCR77s4FEUJg=="
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.23.1.tgz",
+      "integrity": "sha512-9d6yEPJRRvPLMUkpyaiQ62SXNMMyt2l815jxWgFjnVOxKeUQv9TPyZqZ0FpmWdVe6EY8dv8GLlyaBpOLDnY6Vg=="
     },
     "node_modules/@sasjs/utils": {
       "version": "2.42.1",
@@ -11358,9 +11358,9 @@
       }
     },
     "@sasjs/core": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.19.0.tgz",
-      "integrity": "sha512-vG2YHJveQUQqN0YBhapXb8y+Qp4OniHzRedlqKRxyL0Pc+kwXx5co4Vo+dcOI5/MX0p+8oERP2aCR77s4FEUJg=="
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.23.1.tgz",
+      "integrity": "sha512-9d6yEPJRRvPLMUkpyaiQ62SXNMMyt2l815jxWgFjnVOxKeUQv9TPyZqZ0FpmWdVe6EY8dv8GLlyaBpOLDnY6Vg=="
     },
     "@sasjs/utils": {
       "version": "2.42.1",

api/package.json

@@ -47,7 +47,7 @@
   },
   "author": "4GL Ltd",
   "dependencies": {
-    "@sasjs/core": "^4.19.0",
+    "@sasjs/core": "^4.23.1",
     "@sasjs/utils": "2.42.1",
     "bcryptjs": "^2.4.3",
     "connect-mongo": "^4.6.0",

api/public/SASjsApi/swagger-ui-init.js

@@ -0,0 +1,50 @@
+window.onload = function () {
+  // Build a system
+  var url = window.location.search.match(/url=([^&]+)/)
+  if (url && url.length > 1) {
+    url = decodeURIComponent(url[1])
+  } else {
+    url = window.location.origin
+  }
+  var options = {
+    customOptions: {
+      url: '/swagger.yaml',
+      requestInterceptor: function (request) {
+        request.credentials = 'include'
+        var cookie = document.cookie
+        var startIndex = cookie.indexOf('XSRF-TOKEN')
+        var csrf = cookie.slice(startIndex + 11).split('; ')[0]
+        request.headers['X-XSRF-TOKEN'] = csrf
+        return request
+      }
+    }
+  }
+  url = options.swaggerUrl || url
+  var urls = options.swaggerUrls
+  var customOptions = options.customOptions
+  var spec1 = options.swaggerDoc
+  var swaggerOptions = {
+    spec: spec1,
+    url: url,
+    urls: urls,
+    dom_id: '#swagger-ui',
+    deepLinking: true,
+    presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
+    plugins: [SwaggerUIBundle.plugins.DownloadUrl],
+    layout: 'StandaloneLayout'
+  }
+  for (var attrname in customOptions) {
+    swaggerOptions[attrname] = customOptions[attrname]
+  }
+  var ui = SwaggerUIBundle(swaggerOptions)
+
+  if (customOptions.oauth) {
+    ui.initOAuth(customOptions.oauth)
+  }
+
+  if (customOptions.authAction) {
+    ui.authActions.authorize(customOptions.authAction)
+  }
+
+  window.ui = ui
+}

api/public/app-streams-script.js

@@ -0,0 +1,49 @@
+const inputElement = document.getElementById('fileId')
+
+document.getElementById('uploadButton').addEventListener('click', function () {
+  inputElement.click()
+})
+
+inputElement.addEventListener(
+  'change',
+  function () {
+    const fileList = this.files /* now you can work with the file list */
+
+    updateFileUploadMessage('Requesting ...')
+
+    const file = fileList[0]
+    const formData = new FormData()
+
+    formData.append('file', file)
+
+    axios
+      .post('/SASjsApi/drive/deploy/upload', formData)
+      .then((res) => res.data)
+      .then((data) => {
+        return (
+          data.message +
+          '\nstreamServiceName: ' +
+          data.streamServiceName +
+          '\nrefreshing page once alert box closes.'
+        )
+      })
+      .then((message) => {
+        alert(message)
+        location.reload()
+      })
+      .catch((error) => {
+        alert(error.response.data)
+        resetFileUpload()
+        updateFileUploadMessage('Upload New App')
+      })
+  },
+  false
+)
+
+function updateFileUploadMessage(message) {
+  document.getElementById('uploadMessage').innerHTML = message
+}
+
+function resetFileUpload() {
+  inputElement.value = null
+}

api/src/app.ts

@@ -17,6 +17,7 @@ import {
   setProcessVariables,
   setupFolders
 } from './utils'
+import { getEnvCSPDirectives } from './utils/parseHelmetConfig'
 
 dotenv.config()
 
@@ -25,7 +26,8 @@ const app = express()
 app.use(cookieParser())
 app.use(morgan('tiny'))
 
-const { MODE, CORS, WHITELIST, PROTOCOL } = process.env
+const { MODE, CORS, WHITELIST, PROTOCOL, HELMET_CSP_CONFIG_PATH, HELMET_COEP } =
+  process.env
 
 export const cookieOptions = {
   secure: PROTOCOL === 'https',
@@ -33,6 +35,10 @@ export const cookieOptions = {
   maxAge: 24 * 60 * 60 * 1000 // 24 hours
 }
 
+const cspConfigJson = getEnvCSPDirectives(HELMET_CSP_CONFIG_PATH)
+const coepFlag =
+  HELMET_COEP === 'true' || HELMET_COEP === undefined ? true : false
+
 /***********************************
  *         CSRF Protection         *
  ***********************************/
@@ -41,7 +47,17 @@ export const csrfProtection = csrf({ cookie: cookieOptions })
 /***********************************
  *   Handle security and origin    *
  ***********************************/
-app.use(helmet())
+app.use(
+  helmet({
+    contentSecurityPolicy: {
+      directives: {
+        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
+        ...cspConfigJson
+      }
+    },
+    crossOriginEmbedderPolicy: coepFlag
+  })
+)
 
 /***********************************
  *         Enabling CORS           *

api/src/controllers/code.ts

@@ -3,7 +3,7 @@ import { Request, Security, Route, Tags, Post, Body } from 'tsoa'
 import { ExecuteReturnJson, ExecutionController } from './internal'
 import { PreProgramVars } from '../types'
 import { ExecuteReturnJsonResponse } from '.'
-import { parseLogToArray } from '../utils'
+import { getPreProgramVariables, parseLogToArray } from '../utils'
 
 interface ExecuteSASCodePayload {
   /**
@@ -56,16 +56,3 @@ const executeSASCode = async (req: any, { code }: ExecuteSASCodePayload) => {
     }
   }
 }
-
-const getPreProgramVariables = (req: any): PreProgramVars => {
-  const host = req.get('host')
-  const protocol = req.protocol + '://'
-  const { user, accessToken } = req
-  return {
-    username: user.username,
-    userId: user.userId,
-    displayName: user.displayName,
-    serverUrl: protocol + host,
-    accessToken
-  }
-}

api/src/controllers/internal/Execution.ts

@@ -75,12 +75,12 @@ export class ExecutionController {
     const logPath = path.join(session.path, 'log.log')
     const headersPath = path.join(session.path, 'stpsrv_header.txt')
     const weboutPath = path.join(session.path, 'webout.txt')
-    const tokenFile = path.join(session.path, 'accessToken.txt')
+    const tokenFile = path.join(session.path, 'reqHeaders.txt')
 
     await createFile(weboutPath, '')
     await createFile(
       tokenFile,
-      preProgramVariables?.accessToken ?? 'accessToken'
+      preProgramVariables?.httpHeaders.join('\n') ?? ''
     )
 
     const varStatments = Object.keys(vars).reduce(

api/src/controllers/stp.ts

@@ -17,8 +17,8 @@ import {
   ExecutionController,
   ExecutionVars
 } from './internal'
-import { PreProgramVars } from '../types'
 import {
+  getPreProgramVariables,
   getTmpFilesFolderPath,
   HTTPHeaders,
   isDebugOn,
@@ -210,16 +210,3 @@ const executeReturnJson = async (
     }
   }
 }
-
-const getPreProgramVariables = (req: any): PreProgramVars => {
-  const host = req.get('host')
-  const protocol = req.protocol + '://'
-  const { user, accessToken } = req
-  return {
-    username: user.username,
-    userId: user.userId,
-    displayName: user.displayName,
-    serverUrl: protocol + host,
-    accessToken
-  }
-}

api/src/controllers/web.ts

@@ -14,8 +14,8 @@ export class WebController {
    *
    */
   @Get('/')
-  public async home(@Request() req: express.Request) {
-    return home(req)
+  public async home() {
+    return home()
   }
 
   /**
@@ -44,16 +44,13 @@ export class WebController {
   }
 }
 
-const home = async (req: express.Request) => {
+const home = async () => {
   const indexHtmlPath = path.join(getWebBuildFolderPath(), 'index.html')
 
   // Attention! Cannot use fileExists here,
   // due to limitation after building executable
   const content = await readFile(indexHtmlPath)
 
-  req.res?.cookie('XSRF-TOKEN', req.csrfToken())
-  req.res?.setHeader('Content-Type', 'text/html')
-
   return content
 }
 

api/src/routes/appStream/appStreamHtml.ts

@@ -1,5 +1,4 @@
 import { AppStreamConfig } from '../../types'
-import { script } from './script'
 import { style } from './style'
 
 const defaultAppLogo = '/sasjs-logo.svg'
@@ -39,6 +38,7 @@ export const appStreamHtml = (appStreamConfig: AppStreamConfig) => `
           <span id="uploadMessage">Upload New App</span>
         </a>
     </div>
-    ${script}
+    <script src="/axios.min.js"></script>
+    <script src="/app-streams-script.js"></script>
   </body>
 </html>`

api/src/routes/appStream/index.ts

@@ -7,9 +7,11 @@ import { appStreamHtml } from './appStreamHtml'
 
 const router = express.Router()
 
-router.get('/', async (_, res) => {
+router.get('/', async (req, res) => {
   const content = appStreamHtml(process.appStreamConfig)
 
+  res.cookie('XSRF-TOKEN', req.csrfToken())
+
   return res.send(content)
 })
 

api/src/routes/appStream/script.ts

@@ -1,58 +0,0 @@
-export const script = `<script>
-  const inputElement = document.getElementById('fileId')
-
-  document
-    .getElementById('uploadButton')
-    .addEventListener('click', function () {
-      inputElement.click()
-    })
-
-  inputElement.addEventListener(
-    'change',
-    function () {
-      const fileList = this.files /* now you can work with the file list */
-
-      updateFileUploadMessage('Requesting ...')
-
-      const file = fileList[0]
-      const formData = new FormData()
-
-      formData.append('file', file)
-      fetch('/SASjsApi/drive/deploy/upload', {
-        method: 'POST',
-        body: formData
-      })
-        .then(async (res) => {
-          const { status, ok } = res
-          if (status === 200 && ok) {
-            const data = await res.json()
-            return (
-              data.message +
-              '\\nstreamServiceName: ' +
-              data.streamServiceName +
-              '\\nrefreshing page once alert box closes.'
-            )
-          }
-          throw await res.text()
-        })
-        .then((message) => {
-          alert(message)
-          location.reload()
-        })
-        .catch((error) => {
-          alert(error)
-          resetFileUpload()
-          updateFileUploadMessage('Upload New App')
-        })
-    },
-    false
-  )
-
-  function updateFileUploadMessage(message) {
-    document.getElementById('uploadMessage').innerHTML = message
-  }
-
-  function resetFileUpload() {
-    inputElement.value = null
-  }
-</script>`

api/src/routes/setupRoutes.ts

@@ -4,14 +4,16 @@ import webRouter from './web'
 import apiRouter from './api'
 import appStreamRouter from './appStream'
 
+import { csrfProtection } from '../app'
+
 export const setupRoutes = (app: Express) => {
   app.use('/SASjsApi', apiRouter)
 
-  app.use('/AppStream', function (req, res, next) {
+  app.use('/AppStream', csrfProtection, function (req, res, next) {
     // this needs to be a function to hook on
     // whatever the current router is
     appStreamRouter(req, res, next)
   })
 
-  app.use('/', webRouter)
+  app.use('/', csrfProtection, webRouter)
 }

api/src/routes/web/index.ts

@@ -1,11 +1,8 @@
 import express from 'express'
-import { csrfProtection } from '../../app'
 import webRouter from './web'
 
 const router = express.Router()
 
-router.use(csrfProtection)
-
 router.use('/', webRouter)
 
 export default router

api/src/routes/web/web.ts

@@ -7,7 +7,10 @@ const controller = new WebController()
 
 webRouter.get('/', async (req, res) => {
   try {
-    const response = await controller.home(req)
+    const response = await controller.home()
+
+    res.cookie('XSRF-TOKEN', req.csrfToken())
+
     return res.send(response)
   } catch (_) {
     return res.send('Web Build is not present')

api/src/types/PreProgramVars.ts

@@ -3,5 +3,5 @@ export interface PreProgramVars {
   userId: number
   displayName: string
   serverUrl: string
-  accessToken: string
+  httpHeaders: string[]
 }

api/src/utils/getPreProgramVariables.ts

@@ -0,0 +1,29 @@
+import { PreProgramVars } from '../types'
+
+export const getPreProgramVariables = (req: any): PreProgramVars => {
+  const host = req.get('host')
+  const protocol = req.protocol + '://'
+  const { user, accessToken } = req
+  const csrfToken = req.headers['x-xsrf-token']
+  const sessionId = req.cookies['connect.sid']
+  const { _csrf } = req.cookies
+
+  const httpHeaders: string[] = []
+
+  if (accessToken) httpHeaders.push(`Authorization: Bearer ${accessToken}`)
+  if (csrfToken) httpHeaders.push(`x-xsrf-token: ${csrfToken}`)
+
+  const cookies: string[] = []
+  if (sessionId) cookies.push(`connect.sid=${sessionId}`)
+  if (_csrf) cookies.push(`_csrf=${_csrf}`)
+
+  if (cookies.length) httpHeaders.push(`cookie: ${cookies.join('; ')}`)
+
+  return {
+    username: user.username,
+    userId: user.userId,
+    displayName: user.displayName,
+    serverUrl: protocol + host,
+    httpHeaders
+  }
+}

api/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './generateAuthCode'
 export * from './generateRefreshToken'
 export * from './getCertificates'
 export * from './getDesktopFields'
+export * from './getPreProgramVariables'
 export * from './isDebugOn'
 export * from './parseLogToArray'
 export * from './removeTokensInDB'

api/src/utils/parseHelmetConfig.ts

@@ -0,0 +1,33 @@
+import path from 'path'
+import fs from 'fs'
+
+export const getEnvCSPDirectives = (
+  HELMET_CSP_CONFIG_PATH: string | undefined
+) => {
+  let cspConfigJson = {
+    'script-src': ["'self'", "'unsafe-inline'"]
+  }
+
+  if (
+    typeof HELMET_CSP_CONFIG_PATH === 'string' &&
+    HELMET_CSP_CONFIG_PATH.length > 0
+  ) {
+    const cspConfigPath = path.join(process.cwd(), HELMET_CSP_CONFIG_PATH)
+
+    try {
+      let file = fs.readFileSync(cspConfigPath).toString()
+
+      try {
+        cspConfigJson = JSON.parse(file)
+      } catch (e) {
+        console.error(
+          'Parsing Content Security Policy JSON config failed. Make sure it is valid json'
+        )
+      }
+    } catch (e) {
+      console.error('Error reading HELMET CSP config file', e)
+    }
+  }
+
+  return cspConfigJson
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "server",
-  "version": "0.0.65",
+  "version": "0.0.71",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "server",
-      "version": "0.0.65",
+      "version": "0.0.71",
       "devDependencies": {
         "prettier": "^2.3.1",
         "standard-version": "^9.3.2"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.0.65",
+  "version": "0.0.71",
   "description": "NodeJS wrapper for calling the SAS binary executable",
   "repository": "https://github.com/sasjs/server",
   "scripts": {

restClient/session.rest

@@ -1,2 +1,3 @@
-### Get current user's info via access token
+### Get current user's info via session ID
 GET http://localhost:5000/SASjsApi/session
+cookie: connect.sid=s:G2DeFdKuWhnmTOsTHmTWrxAXPx2P6TLD.JyNLxfACC1w3NlFQFfL5chyxtrqbPYmS6iButRc1goE

web/package.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@monaco-editor/react": "^4.3.1",
     "@mui/icons-material": "^5.0.3",
     "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.0.3",
@@ -21,8 +20,11 @@
     "@types/node": "^12.20.28",
     "@types/react": "^17.0.27",
     "axios": "^0.24.0",
+    "monaco-editor": "^0.33.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-monaco-editor": "^0.48.0",
     "react-router-dom": "^5.3.0"
   },
   "devDependencies": {

web/src/containers/Drive/main.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import axios from 'axios'
 
-import Editor from '@monaco-editor/react'
+import Editor from 'react-monaco-editor'
 
 import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
@@ -125,6 +125,7 @@ const Main = (props: Props) => {
         {!isLoading && props?.selectedFilePath && editMode && (
           <Editor
             height="95%"
+            language="sas"
             value={fileContent}
             onChange={(val) => {
               if (val) setFileContent(val)

web/src/containers/Studio/index.tsx

@@ -4,7 +4,7 @@ import axios from 'axios'
 import Box from '@mui/material/Box'
 import { Button, Paper, Stack, Tab, Tooltip } from '@mui/material'
 import { makeStyles } from '@mui/styles'
-import Editor, { OnMount } from '@monaco-editor/react'
+import Editor, { EditorDidMount } from 'react-monaco-editor'
 import { useLocation } from 'react-router-dom'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 
@@ -42,7 +42,7 @@ const Studio = () => {
   }
 
   const editorRef = useRef(null as any)
-  const handleEditorDidMount: OnMount = (editor) => {
+  const handleEditorDidMount: EditorDidMount = (editor) => {
     editor.focus()
     editorRef.current = editor
   }
@@ -141,6 +141,7 @@ const Studio = () => {
             <Tooltip title="CTRL+ENTER will also run SAS code">
               <Button onClick={handleRunBtnClick} className={classes.runButton}>
                 <img
+                  alt=""
                   draggable="false"
                   style={{ width: '25px' }}
                   src="/running-sas.png"
@@ -161,8 +162,9 @@ const Studio = () => {
           >
             <Editor
               height="98%"
+              language="sas"
               value={fileContent}
-              onMount={handleEditorDidMount}
+              editorDidMount={handleEditorDidMount}
               options={{ readOnly: ctrlPressed }}
               onChange={(val) => {
                 if (val) setFileContent(val)

web/webpack.common.ts

@@ -1,4 +1,5 @@
 import path from 'path'
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'
 import { Configuration } from 'webpack'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import CopyPlugin from 'copy-webpack-plugin'
@@ -53,7 +54,8 @@ const config: Configuration = {
     new CopyPlugin({
       patterns: [{ from: 'public' }]
     }),
-    new dotenv()
+    new dotenv(),
+    new MonacoWebpackPlugin()
   ]
 }