Merge pull request #3 from StackExchange/CSRF-JWT-TOKENS

Encrypting SO Tokens before setting them up as cookies

Author: EstoesMoises

app-config.yaml

@@ -8,15 +8,9 @@ organization:
 stackoverflow:
   baseUrl: ${STACK_OVERFLOW_INSTANCE_URL}
   # teamName: ${STACK_OVERFLOW_TEAM_NAME}
-  apiAccessToken: ${STACK_OVERFLOW_ENTERPRISE_ACCESS_TOKEN}
+  apiAccessToken: ${STACK_OVERFLOW_API_ACCESS_TOKEN}
   clientId: ${STACK_OVERFLOW_CLIENT_ID}
-  redirectUri: http://redirectmeto.com/http://localhost:3000/stack-overflow-teams/
-  schedule:
-    {
-      frequency: { minutes: 20 },
-      timeout: { minutes: 5 },
-      initialDelay: { seconds: 3 },
-    }
+  redirectUri: ${STACK_OVERFLOW_REDIRECT_URI}
 
 backend:
   # Used for enabling authentication, secret is shared by all backend plugins

packages/app/src/components/search/SearchPage.tsx

@@ -16,7 +16,10 @@ import {
 } from '@backstage/plugin-search-react';
 import { CatalogIcon, Content, Header, Page } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { StackOverflowIcon, StackOverflowSearchResultListItem } from 'backstage-plugin-stack-overflow-teams';
+import {
+  StackOverflowIcon,
+  StackOverflowSearchResultListItem,
+} from 'backstage-plugin-stack-overflow-teams';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {

packages/backend/src/index.ts

@@ -57,7 +57,7 @@ backend.add(import('@backstage/plugin-kubernetes-backend'));
 
 // StackOverflow
 
-backend.add(import('backstage-plugin-stack-overflow-teams-backend'));
+backend.add(import('backstage-plugin-stack-overflow-teams-backend')); // Teams Backend
+backend.add(import('backstage-stack-overflow-teams-collator')); // Optional questions collator
 
-backend.add(import('backstage-stack-overflow-teams-collator'));
 backend.start();

plugins/search-backend-module-stack-overflow-teams-collator/README.md

@@ -13,7 +13,7 @@ To use any of the functionality this plugin provides, you need to start by confi
 
 ```yaml
 stackoverflow:
-  baseUrl: https://stackoverflowteams.com # alternative: your Stack Overflow Enterprise site
+  baseUrl: https://api.stackoverflowteams.com # alternative: your Stack Overflow Enterprise site
   teamName: $STACK_OVERFLOW_TEAM_NAME # optional if you are on Enterprise
   apiAccessToken: $STACK_OVERFLOW_API_ACCESS_TOKEN
 ```

plugins/search-backend-module-stack-overflow-teams-collator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backstage-stack-overflow-teams-collator",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A module for the search backend that exports stack overflow for teams modules",
   "backstage": {
     "role": "backend-plugin-module",

plugins/search-backend-module-stack-overflow-teams-collator/src/collators/StackOverflowQuestionsCollatorFactory.ts

@@ -80,16 +80,16 @@ export class StackOverflowQuestionsCollatorFactory
   private readonly apiAccessToken: string | undefined;
   private readonly teamName: string | undefined;
   private readonly logger: LoggerService;
-  private readonly referrer: string = 'Backstage_Plugin'
+  private readonly referrer: string = 'Backstage_Plugin';
   public readonly type: string = 'stack-overflow';
+  public readonly stackOverflowTeamsAPI: string =
+    'https://api.stackoverflowteams.com';
 
-    // Helper function to force API Version 3.
-  private forceAPIv3(baseUrl: string) {
-      return `${new URL(baseUrl).origin}/api/v3`;
-    }
+  private forceOriginUrl = (baseUrl: string): string =>
+    `${new URL(baseUrl).origin}`;
 
   private constructor(options: StackOverflowQuestionsCollatorFactoryOptions) {
-    this.baseUrl = this.forceAPIv3(options.baseUrl) 
+    this.baseUrl = this.forceOriginUrl(options.baseUrl);
     this.apiAccessToken = options.apiAccessToken;
     this.teamName = options.teamName;
     this.logger = options.logger.child({ documentType: this.type });
@@ -103,14 +103,11 @@ export class StackOverflowQuestionsCollatorFactory
     };
   }
 
-
   static fromConfig(
     config: Config,
     options: StackOverflowQuestionsCollatorFactoryOptions,
   ) {
-    const apiAccessToken = config.getString(
-      'stackoverflow.apiAccessToken',
-    );
+    const apiAccessToken = config.getString('stackoverflow.apiAccessToken');
     const teamName = config.getOptionalString('stackoverflow.teamName');
     const baseUrl = config.getString('stackoverflow.baseUrl');
     const requestParams = config
@@ -122,7 +119,7 @@ export class StackOverflowQuestionsCollatorFactory
       apiAccessToken,
       teamName,
       requestParams,
-      ...options
+      ...options,
     });
   }
 
@@ -149,25 +146,31 @@ export class StackOverflowQuestionsCollatorFactory
     let requestUrl;
 
     if (this.teamName) {
-      requestUrl = `${this.baseUrl}/teams/${this.teamName}/questions${params}`;
+      const basePath =
+        this.baseUrl === this.stackOverflowTeamsAPI ? '/v3' : '/api/v3';
+      requestUrl = `${this.baseUrl}${basePath}/teams/${this.teamName}/questions${params}`;
     } else {
-      requestUrl = `${this.baseUrl}/questions${params}`;
+      requestUrl = `${this.baseUrl}/api/v3/questions${params}`;
     }
 
     let page = 1;
-    let totalPages = 1
-    const pageSize = this.requestParams.pageSize || 50
-    this.logger.warn('Starting collating Stack Overflow for Teams questions, wait for the success message')
+    let totalPages = 1;
+    const pageSize = this.requestParams.pageSize || 50;
+    this.logger.warn(
+      'Starting collating Stack Overflow for Teams questions, wait for the success message',
+    );
     while (page <= totalPages) {
-      const res = await fetch(`${requestUrl}&page=${page}&pageSize=${pageSize}`, {
-        headers: {
-          Authorization: `Bearer ${this.apiAccessToken}`,
+      const res = await fetch(
+        `${requestUrl}&page=${page}&pageSize=${pageSize}`,
+        {
+          headers: {
+            Authorization: `Bearer ${this.apiAccessToken}`,
+          },
         },
-      }
-    );
+      );
 
       const data = await res.json();
-      totalPages = data.totalPages
+      totalPages = data.totalPages;
 
       for (const question of data.items ?? []) {
         const tags =
@@ -192,11 +195,11 @@ export class StackOverflowQuestionsCollatorFactory
           viewCount: question.viewCount,
           isAnswered: question.isAnswered,
           bounty: question.bounty,
-          creationDate: question.creationDate, 
-          lastActivityDate: question.lastActivityDate, 
+          creationDate: question.creationDate,
+          lastActivityDate: question.lastActivityDate,
         };
       }
-      page++
+      page++;
     }
   }
 }

plugins/stack-overflow-teams-backend/README.md

@@ -6,109 +6,56 @@ Backend counterpart of the Stack Overflow for Teams Plugin.
 
 The **Stack Overflow for Teams Backend plugin** is responsible for:
 
-  
-
--  **Indexing all questions** from the private Stack Overflow instance (an enhanced version of the existing community plugins in the Backstage repository).
-
--  **Handling API requests** via ``createStackOverflowApi`` and ``createStackOverflowService`` to the Stack Overflow instance for retrieving:
-
--  `/users`
-
--  `/tags`
-
--  `/questions`
-
-- Posting new questions via `/questions`
-
--  **Managing OAuth authentication flow** to securely access Stack Overflow private instances via ``createStackOverflowAuth``
-
-  
+- **Indexing all questions** from the private Stack Overflow instance (an enhanced version of the existing community plugins in the Backstage repository).
+- **Handling API requests** via ``createStackOverflowApi`` and ``createStackOverflowService`` to the Stack Overflow instance for retrieving:
+  - `/users`
+  - `/tags`
+  - `/questions`
+  - Posting new questions via `/questions`
+- **Managing OAuth authentication flow** to securely access Stack Overflow private instances via ``createStackOverflowAuth``
+- **Encrypts** the Stack Overflow Token before sending it as an http-only cookie to the frontend.
 
 ## OAuth Authentication Flow
 
-  
-
-The backend is the only component that directly utilizes **Stack Overflow access tokens** for requests.
-
-  
+The backend is the only component that directly utilizes the **encrypted Stack Overflow access tokens** for requests.
 
 ### **Authorization Flow Details**
 
-  
-
-![image](https://github.com/user-attachments/assets/1a7df089-c3c6-49a4-8761-38479e89214a)
-
-  
-
 #### **`/auth/start`**
 
 - Generates **PKCE Code Verifier**.
-
 - Hashes Code Verifier to obtain **Code Challenge**.
-
 - Generates a **state** (random string).
-
 - Stores **Code Verifier** and **State** in a **secure, HTTP-only cookie** accessible only to the server.
 
-  
-
 #### **`/callback`**
 
 - Retrieves the stored **Code Verifier** and **State**.
-
 - Validates that the received **state** matches the one from Stack Overflow's query string parameter.
-
 - The backend requests an **Access Token** using the stored **Code Verifier**.
-
-- Stores the **Stack Overflow Access Token** in a **secure, HTTP-only cookie**.
-
-  
-  
+- Backend **encrypts the token**, using the JWT secret stored in memory.
+- Stores the **encrypted Stack Overflow Access Token** in a **secure, HTTP-only cookie**.
 
 ## Installation
 
-  
-
 This plugin is installed via the `backstage-plugin-stack-overflow-teams-backend` package. To install it to your backend package, run the following command:
 
-  
-
 ```bash
-
-# From your root directory
-
-yarn  --cwd  packages/backend  add  backstage-plugin-stack-overflow-teams-backend
-
+yarn --cwd packages/backend add backstage-plugin-stack-overflow-teams-backend
 ```
 
-  
-
 Then add the plugin to your backend in `packages/backend/src/index.ts`:
 
-  
-
 ```ts
-
-const backend =  createBackend();
+const backend = createBackend();
 
 // ...
 
 backend.add(import('backstage-plugin-stack-overflow-teams-backend'));
-
 ```
 
-  
-
 ## Development
 
-  
-
-This plugin backend can be started in a standalone mode from directly in this
-
-package with `yarn start`. It is a limited setup that is most convenient when
-
-developing the plugin backend itself.
-
-  
+This plugin backend can be started in a standalone mode from directly in this package with `yarn start`. It is a limited setup that is most convenient when developing the plugin backend itself.
 
 If you want to run the entire project, including the frontend, run `yarn dev` from the root directory.

plugins/stack-overflow-teams-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backstage-plugin-stack-overflow-teams-backend",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -42,13 +42,15 @@
     "@backstage/plugin-search-common": "^1.2.17",
     "express": "^4.17.1",
     "express-promise-router": "^4.1.0",
+    "jsonwebtoken": "^9.0.2",
     "qs": "^6.14.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@backstage/backend-test-utils": "^1.2.0",
     "@backstage/cli": "^0.29.4",
     "@types/express": "^4.17.6",
+    "@types/jsonwebtoken": "^9",
     "@types/qs": "^6",
     "@types/supertest": "^2.0.12",
     "msw": "^2.7.3",

plugins/stack-overflow-teams-backend/src/plugin.ts

@@ -2,6 +2,7 @@ import {
   coreServices,
   createBackendPlugin,
 } from '@backstage/backend-plugin-api';
+import { randomBytes } from 'crypto'
 import { createRouter } from './router';
 import { createStackOverflowService } from './services/StackOverflowService';
 import { StackOverflowConfig } from './services/StackOverflowService';
@@ -11,6 +12,9 @@ import { StackOverflowConfig } from './services/StackOverflowService';
  *
  * @public
  */
+
+const JWT_SECRET = randomBytes(64).toString('hex')
+
 export const stackOverflowTeamsPlugin = createBackendPlugin({
   pluginId: 'stack-overflow-teams',
   register(env) {
@@ -38,6 +42,7 @@ export const stackOverflowTeamsPlugin = createBackendPlugin({
             stackOverflowConfig,
             logger,
             stackOverflowService,
+            jwtSecret: JWT_SECRET
           }),
         );
       },