Merge pull request #2 from framer/feature/cors-configuration

CORS configuration for plugins

Author: niekert

.dev.vars.example

@@ -1,7 +1,8 @@
 CLIENT_ID=XXXXX
 CLIENT_SECRET=XXXX
 
-PLUGIN_URI=https://localhost:5173
+# Set the Plugin ID when your Plugin is submitted to the Marketplace.
+PLUGIN_ID = ""
 REDIRECT_URI=https://localhost:8787/redirect
 
 AUTHORIZE_ENDPOINT=https://accounts.google.com/o/oauth2/v2/auth

README.md

@@ -10,15 +10,15 @@ See our [Implementing OAuth guide](https://developers.framer.wiki/plugins/docs/o
 
 The following environment variables need to be added via the CloudFlare console or CLI.
 
-| Name               | Details                                                                                                                 |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| CLIENT_ID          | App ID created in the providers developer console                                                                       |
-| CLIENT_SECRET      | App secret key created in the providers developer console. **Do not expose** in source code or send back to the client! |
-| PLUGIN_URI         | Root path of where your plugin is hosted                                                                                |
-| REDIRECT_URI       | Callback path that provider will redirect to after logging in                                                           |
-| AUTHORIZE_ENDPOINT | Provider endpoint path for showing the log in screen                                                                    |
-| TOKEN_ENDPOINT     | Provider endpoint path for fetching and refreshing access tokens                                                        |
-| SCOPE              | Provider permissions separated by a space                                                                               |
+| Name               | Details                                                                                                                                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| CLIENT_ID          | App ID created in the providers developer console                                                                                                                                                      |
+| CLIENT_SECRET      | App secret key created in the providers developer console. **Do not expose** in source code or send back to the client!                                                                                |
+| PLUGIN_ID          | The Plugin ID environment variable should be set when the Plugin is submitted to the marketplace to ensure correct CORS headers. You can find the Plugin ID in the URL of your marketplace submission. |
+| REDIRECT_URI       | Callback path that provider will redirect to after logging in                                                                                                                                          |
+| AUTHORIZE_ENDPOINT | Provider endpoint path for showing the log in screen                                                                                                                                                   |
+| TOKEN_ENDPOINT     | Provider endpoint path for fetching and refreshing access tokens                                                                                                                                       |
+| SCOPE              | Provider permissions separated by a space                                                                                                                                                              |
 
 To test locally, create a `.dev.vars` file with your own `CLIENT_ID` and `CLIENT_SECRET`.
 

src/index.ts

@@ -45,7 +45,6 @@ async function handleRequest(request: Request, env: Env) {
     return new Response(response, {
       headers: {
         "Content-Type": "application/json",
-        "Access-Control-Allow-Origin": env.PLUGIN_URI,
       },
     });
   }
@@ -125,9 +124,6 @@ async function handleRequest(request: Request, env: Env) {
     if (!readKey) {
       return new Response("Missing read key URL param", {
         status: 400,
-        headers: {
-          "Access-Control-Allow-Origin": env.PLUGIN_URI,
-        },
       });
     }
 
@@ -136,7 +132,6 @@ async function handleRequest(request: Request, env: Env) {
     if (!tokens) {
       return new Response(null, {
         status: 404,
-        headers: { "Access-Control-Allow-Origin": env.PLUGIN_URI },
       });
     }
 
@@ -147,7 +142,6 @@ async function handleRequest(request: Request, env: Env) {
     return new Response(tokens, {
       headers: {
         "Content-Type": "application/json",
-        "Access-Control-Allow-Origin": env.PLUGIN_URI,
       },
     });
   }
@@ -158,9 +152,6 @@ async function handleRequest(request: Request, env: Env) {
     if (!refreshToken) {
       return new Response("Missing refresh token URL param", {
         status: 400,
-        headers: {
-          "Access-Control-Allow-Origin": env.PLUGIN_URI,
-        },
       });
     }
 
@@ -178,18 +169,12 @@ async function handleRequest(request: Request, env: Env) {
     });
 
     if (refreshResponse.status !== 200) {
-      return new Response(refreshResponse.statusText, {
-        status: refreshResponse.status,
-      });
+      return new Response(refreshResponse.statusText);
     }
 
     const tokens = await refreshResponse.json();
 
-    return new Response(JSON.stringify(tokens), {
-      headers: {
-        "Access-Control-Allow-Origin": env.PLUGIN_URI,
-      },
-    });
+    return new Response(JSON.stringify(tokens));
   }
 
   if (request.method === "GET" && requestUrl.pathname === "/") {
@@ -198,23 +183,59 @@ async function handleRequest(request: Request, env: Env) {
 
   return new Response("Page not found", {
     status: 404,
-    headers: {
-      "Access-Control-Allow-Origin": env.PLUGIN_URI,
-    },
+  });
+}
+
+function getCORSAllowOriginHeader(request: Request, env: Env) {
+  const origin = request.headers.get("Origin");
+
+  const defaultCORSHeader = `https://${env.PLUGIN_ID}.${env.PLUGIN_PARENT_DOMAIN}`;
+
+  if (!origin) return defaultCORSHeader;
+
+  const originURL = new URL(origin);
+  if (originURL.hostname === "localhost") {
+    return originURL.origin;
+  }
+
+  // Support for versioned plugins
+  const [hostLabel, ...parentDomainLabels] = originURL.hostname.split(".");
+  if (
+    parentDomainLabels.join(".") === env.PLUGIN_PARENT_DOMAIN &&
+    hostLabel.startsWith(env.PLUGIN_ID)
+  ) {
+    return originURL.origin;
+  }
+
+  // Otherwise set the CORS header to non versioned plugin URI always
+  return defaultCORSHeader;
+}
+
+function addCorsHeaders(request: Request, response: Response, env: Env) {
+  const headers = new Headers(response.headers);
+
+  headers.set(
+    "Access-Control-Allow-Origin",
+    getCORSAllowOriginHeader(request, env)
+  );
+
+  return new Response(response.body, {
+    headers: headers,
+    status: response.status,
+    statusText: response.statusText,
   });
 }
 
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
-    return handleRequest(request, env).catch((error) => {
+    const response = await handleRequest(request, env).catch((error) => {
       const message = error instanceof Error ? error.message : "Unknown";
 
       return new Response(`😔 Internal error: ${message}`, {
         status: 500,
-        headers: {
-          "Access-Control-Allow-Origin": env.PLUGIN_URI,
-        },
       });
     });
+
+    return addCorsHeaders(request, response, env);
   },
 };

worker-configuration.d.ts

@@ -1,13 +1,14 @@
-// Generated by Wrangler on Wed May 29 2024 11:22:07 GMT+0100 (British Summer Time)
+// Generated by Wrangler on Thu Oct 10 2024 14:20:35 GMT+0200 (Central European Summer Time)
 // by running `wrangler types`
 
 interface Env {
-	keyValueStore: KVNamespace;
-	CLIENT_ID: string;
-	CLIENT_SECRET: string;
-	PLUGIN_URI: string;
-	REDIRECT_URI: string;
-	AUTHORIZE_ENDPOINT: string;
-	TOKEN_ENDPOINT: string;
-	SCOPE: string;
+  keyValueStore: KVNamespace
+  PLUGIN_PARENT_DOMAIN: "plugins.framercdn.com"
+  CLIENT_ID: string
+  CLIENT_SECRET: string
+  PLUGIN_ID: string
+  REDIRECT_URI: string
+  AUTHORIZE_ENDPOINT: string
+  TOKEN_ENDPOINT: string
+  SCOPE: string
 }

wrangler.toml

@@ -6,3 +6,6 @@ compatibility_flags = ["nodejs_compat"]
 kv_namespaces = [
   { binding = "keyValueStore", id = "5f1cbf9a64964ae5be8464cc2882e58c" },
 ]
+
+[vars]
+PLUGIN_PARENT_DOMAIN = "plugins.framercdn.com"