Restricted allowed origins for API calls

Author: dannyroosevelt

docs-v2/components/ConnectCodeSnippets.js

@@ -43,7 +43,7 @@ export default function Home() {
     pd.connectAccount({
       app: "${appSlug}", 
       token: "${tokenData?.token
-    ? tokenData.token.substring(0, 10) + "..."
+    ? tokenData.token
     : "{connect_token}"}", 
       onSuccess: (account) => {
         // Handle successful connection

docs-v2/components/GlobalConnectProvider.jsx

@@ -65,6 +65,15 @@ export function GlobalConnectProvider({ children }) {
   // Get client code snippet wrapper function
   const getClientSnippet = () => getClientCodeSnippet(appSlug, tokenData);
 
+  /**
+   * Generate a request token based on the browser environment
+   * This creates a token that matches what the API will generate
+   */
+  function generateRequestToken() {
+    const baseString = `${navigator.userAgent}:${window.location.host}:connect-demo`;
+    return btoa(baseString);
+  }
+
   // Generate token async function
   async function generateToken() {
     setTokenLoading(true);
@@ -73,10 +82,12 @@ export function GlobalConnectProvider({ children }) {
     setConnectedAccount(null);
 
     try {
+      const requestToken = generateRequestToken();
       const response = await fetch("/docs/api-demo-connect/token", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-Request-Token": requestToken,
         },
         body: JSON.stringify({
           external_user_id: externalUserId,
@@ -100,11 +111,13 @@ export function GlobalConnectProvider({ children }) {
   // Fetch account details from API
   async function fetchAccountDetails(accountId) {
     try {
-      // Use the same token credentials to fetch account details
+      // Fetch the account details from our API endpoint
+      const requestToken = generateRequestToken();
       const response = await fetch(`/docs/api-demo-connect/accounts/${accountId}`, {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
+          "X-Request-Token": requestToken,
         },
       });
 

docs-v2/pages/api/demo-connect/accounts/[id].js

@@ -1,7 +1,85 @@
-// API route to fetch account details from Pipedream API
+/**
+ * API route to fetch account details from Pipedream API
+ * Retrieves information about connected accounts for the interactive demo
+ */
 import { createBackendClient } from "@pipedream/sdk/server";
 
+// Allowed origins for CORS security
+const ALLOWED_ORIGINS = [
+  "https://pipedream.com",
+  "https://www.pipedream.com",
+  "http://localhost:3000",  // For local development
+];
+
+/**
+ * Generate a browser-specific token based on request properties
+ * Used to verify requests are coming from our frontend
+ */
+function generateRequestToken(req) {
+  const baseString = `${req.headers["user-agent"]}:${req.headers["host"]}:connect-demo`;
+  return Buffer.from(baseString).toString("base64");
+}
+
+/**
+ * Security middleware to validate requests
+ * Ensures requests only come from our documentation site
+ */
+function validateRequest(req, res) {
+  const origin = req.headers.origin;
+  const referer = req.headers.referer;
+  const requestToken = req.headers["x-request-token"];
+
+  // Origin validation
+  if (origin && !ALLOWED_ORIGINS.includes(origin)) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Referer validation
+  if (referer && !ALLOWED_ORIGINS.some((allowed) => referer.startsWith(allowed)) &&
+      !referer.includes("/docs/connect/")) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Request token validation to prevent API automation
+  const expectedToken = generateRequestToken(req);
+  if (!requestToken || requestToken !== expectedToken) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Method validation
+  if (req.method !== "GET") {
+    return res.status(405).json({
+      error: "Method not allowed",
+    });
+  }
+
+  // All security checks passed
+  return null;
+}
+
 export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader("Access-Control-Allow-Origin", ALLOWED_ORIGINS.includes(req.headers.origin)
+    ? req.headers.origin
+    : "");
+  res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Request-Token");
+
+  // Handle preflight requests
+  if (req.method === "OPTIONS") {
+    return res.status(200).end();
+  }
+
+  // Validate the request
+  const validationError = validateRequest(req, res);
+  if (validationError) return validationError;
+
   const { id } = req.query;
 
   if (!id) {

docs-v2/pages/api/demo-connect/token.js

@@ -1,11 +1,84 @@
-// API route for generating Connect tokens for demonstration purposes
-export default async function handler(req, res) {
+/**
+ * API route for generating Connect tokens for the interactive demo
+ * This endpoint creates short-lived tokens for testing the Pipedream Connect auth flow
+ */
+
+// Allowed origins for CORS security
+const ALLOWED_ORIGINS = [
+  "https://pipedream.com",
+  "https://www.pipedream.com",
+  "http://localhost:3000",  // For local development
+];
+
+/**
+ * Generate a browser-specific token based on request properties
+ * Used to verify requests are coming from our frontend
+ */
+function generateRequestToken(req) {
+  const baseString = `${req.headers["user-agent"]}:${req.headers["host"]}:connect-demo`;
+  return Buffer.from(baseString).toString("base64");
+}
+
+/**
+ * Security middleware to validate requests
+ * Ensures requests only come from our documentation site
+ */
+function validateRequest(req, res) {
+  const origin = req.headers.origin;
+  const referer = req.headers.referer;
+  const requestToken = req.headers["x-request-token"];
+
+  // Origin validation
+  if (origin && !ALLOWED_ORIGINS.includes(origin)) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Referer validation
+  if (referer && !ALLOWED_ORIGINS.some((allowed) => referer.startsWith(allowed)) &&
+      !referer.includes("/docs/connect/")) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Request token validation to prevent API automation
+  const expectedToken = generateRequestToken(req);
+  if (!requestToken || requestToken !== expectedToken) {
+    return res.status(403).json({
+      error: "Access denied",
+    });
+  }
+
+  // Method validation
   if (req.method !== "POST") {
     return res.status(405).json({
       error: "Method not allowed",
     });
   }
 
+  // All security checks passed
+  return null;
+}
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader("Access-Control-Allow-Origin", ALLOWED_ORIGINS.includes(req.headers.origin)
+    ? req.headers.origin
+    : "");
+  res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Request-Token");
+
+  // Handle preflight requests
+  if (req.method === "OPTIONS") {
+    return res.status(200).end();
+  }
+
+  // Validate the request
+  const validationError = validateRequest(req, res);
+  if (validationError) return validationError;
+
   try {
     const { external_user_id } = req.body;
 
@@ -48,9 +121,10 @@ export default async function handler(req, res) {
       },
       body: JSON.stringify({
         external_user_id,
-        allowed_origins: [
-          req.headers.origin || "https://pipedream.com",
-        ],
+        allowed_origins: ALLOWED_ORIGINS,
+        webhook_uri: process.env.PIPEDREAM_CONNECT_TOKEN_WEBHOOK_URI,
+        success_redirect_uri: process.env.PIPEDREAM_CONNECT_SUCCESS_REDIRECT_URI,
+        error_redirect_uri: process.env.PIPEDREAM_CONNECT_ERROR_REDIRECT_URI,
       }),
     });