Connected. You can close this window and return to Webflow.
+ `, + { headers: { "Content-Type": "text/html; charset=utf-8" } }); + } else { + const destination = sites[0] + ? `https://${sites[0].shortName}.design.webflow.com?app=${encodeURIComponent(requiredEnv("WEBFLOW_CLIENT_ID"))}` + : "https://webflow.com/dashboard"; + response = NextResponse.redirect(destination); + } + response.cookies.set("webflow_oauth_state", "", { path: "/api/auth", maxAge: 0 }); + return response; + } catch { + console.error("Webflow authorization failed"); + return NextResponse.json({ error: "Authorization failed. Please connect again." }, { status: 502 }); + } +} diff --git a/data-client/app/api/auth/disconnect/route.ts b/data-client/app/api/auth/disconnect/route.ts new file mode 100644 index 0000000..b6210c4 --- /dev/null +++ b/data-client/app/api/auth/disconnect/route.ts @@ -0,0 +1,73 @@ +import { NextRequest, NextResponse } from "next/server"; +import { WebflowClient } from "webflow-api"; +import jwt from "../../../lib/utils/jwt"; +import db from "../../../lib/utils/database"; +import { requiredEnv } from "../../../lib/utils/config"; +import { removeSiteScript } from "../../../lib/controllers/scriptController"; + +export const dynamic = "force-dynamic"; + +export async function revokeAuthorization(accessToken: string): PromiseAuthentication successful! You can now close this window.
+ + + + \ No newline at end of file diff --git a/data-client/scripts/dev.ts b/data-client/scripts/dev.ts new file mode 100644 index 0000000..b6d6fd6 --- /dev/null +++ b/data-client/scripts/dev.ts @@ -0,0 +1,47 @@ +import { createServer, IncomingMessage, ServerResponse } from "http"; +import next from "next"; +import { setupDevEnvironment } from "../app/lib/utils/ngrokManager"; + +function validateEnv() { + const required = ["WEBFLOW_CLIENT_ID", "WEBFLOW_CLIENT_SECRET"]; + const missing = required.filter((key) => !process.env[key]); + if (missing.length > 0) { + console.error( + `Missing required environment variables: ${missing.join(", ")}\n` + + "Copy .env.example to .env and fill in your Webflow app credentials." + ); + process.exit(1); + } +} + +async function dev() { + const app = next({ dev: true }); + const handle = app.getRequestHandler(); + + await app.prepare(); + + validateEnv(); + + const server = createServer( + async (req: IncomingMessage, res: ServerResponse) => { + try { + await handle(req, res); + } catch (err) { + console.error("Error handling request:", err); + res.statusCode = 500; + res.end("Internal Server Error"); + } + } + ); + + const port = parseInt(process.env.PORT || "3001"); + server.listen(port, async () => { + console.log(`> Ready on http://localhost:${port}`); + await setupDevEnvironment(); + }); +} + +dev().catch((err) => { + console.error("Error starting server:", err); + process.exit(1); +}); diff --git a/data-client/scripts/tunnel.ts b/data-client/scripts/tunnel.ts new file mode 100644 index 0000000..ff4a2a8 --- /dev/null +++ b/data-client/scripts/tunnel.ts @@ -0,0 +1,12 @@ +import { setupDevEnvironment } from "../app/lib/utils/ngrokManager"; + +async function setupTunnel() { + try { + await setupDevEnvironment(); + } catch (error) { + console.error("Tunnel setup failed:", error); + process.exit(1); + } +} + +setupTunnel(); diff --git a/data-client/tests/security.test.ts b/data-client/tests/security.test.ts new file mode 100644 index 0000000..03d2902 --- /dev/null +++ b/data-client/tests/security.test.ts @@ -0,0 +1,120 @@ +import { test, afterEach, mock } from "node:test"; +import assert from "node:assert/strict"; +import { runInNewContext } from "node:vm"; +import { NextRequest } from "next/server"; +import { SignJWT } from "jose"; +import { WebflowClient } from "webflow-api"; +import db, { encrypt, decrypt } from "../app/lib/utils/database"; +import jwt from "../app/lib/utils/jwt"; +import { POST as exchange } from "../app/api/auth/token/route"; +import { GET as callback, exchangeAuthorizationCode } from "../app/api/auth/callback/route"; +import { revokeAuthorization } from "../app/api/auth/disconnect/route"; +import { generateScript, type ScriptConfig } from "../app/lib/utils/scriptGenerator"; +import { checkScriptStatus } from "../app/lib/controllers/scriptController"; + +process.env.WEBFLOW_CLIENT_SECRET = "local-test-secret-not-used-in-production"; +process.env.WEBFLOW_CLIENT_ID = "local-test-client"; +process.env.APP_BASE_URL = "https://webflow-app.example"; +afterEach(() => mock.restoreAll()); + +test("tokens are encrypted with random IVs and reject tampering", () => { + const token = "test-oauth-token"; + const encrypted = encrypt(token); + assert.equal(decrypt(encrypted), token); + assert.notEqual(encrypted, encrypt(token)); + assert.ok(!encrypted.includes(token)); + const parts = encrypted.split(":"); + parts[1] = "00".repeat(16); + assert.throws(() => decrypt(parts.join(":"))); +}); + +test("sessions can only retrieve their own site's token", async () => { + const get = mock.method(db, "getAccessTokenFromSiteId", async () => "access-token"); + const { sessionToken } = await jwt.createSessionToken("user-a", "site-a"); + const request = new NextRequest("http://localhost/api/scripts/remove", { headers: { Authorization: `Bearer ${sessionToken}` } }); + assert.equal(await jwt.verifyAuth(request, "site-b"), null); + assert.equal(get.mock.callCount(), 0); + assert.equal(await jwt.verifyAuth(request, "site-a"), "access-token"); + assert.equal(get.mock.calls[0].arguments[0], "site-a"); +}); + +test("expired and incorrectly signed sessions are rejected", async () => { + for (const secret of [process.env.WEBFLOW_CLIENT_SECRET!, "wrong-secret"]) { + const token = await new SignJWT({ siteId: "site-a" }).setProtectedHeader({ alg: "HS256" }) + .setSubject("user-a").setIssuer("simpleanalytics-webflow").setAudience("webflow-designer") + .setExpirationTime(secret === "wrong-secret" ? "1h" : 1) + .sign(new TextEncoder().encode(secret)); + await assert.rejects(jwt.verifySession(token)); + } +}); + +test("token exchange checks the site returned by Webflow and omits personal data", async () => { + mock.method(db, "getAccessTokenFromSiteId", async () => "access-token"); + const fetchMock = mock.method(globalThis, "fetch", async () => Response.json({ id: "user-a", siteId: "site-b", email: "private@example.invalid" })); + const request = () => new NextRequest("http://localhost/api/auth/token", { method: "POST", body: JSON.stringify({ siteId: "site-a", idToken: "id-token" }) }); + assert.equal((await exchange(request())).status, 401); + fetchMock.mock.mockImplementation(async () => Response.json({ id: "user-a", siteId: "site-a", email: "private@example.invalid" })); + const response = await exchange(request()); + assert.equal(response.status, 200); + const { sessionToken } = await response.json(); + assert.deepEqual(await jwt.verifySession(sessionToken), { userId: "user-a", siteId: "site-a" }); + assert.ok(!Buffer.from(sessionToken.split(".")[1], "base64url").toString().includes("email")); +}); + +test("OAuth rejects callbacks without a matching browser nonce before token exchange", async () => { + const fetchMock = mock.method(globalThis, "fetch", async () => { throw new Error("Must not exchange"); }); + for (const cookie of ["", "webflow_oauth_state=" + "b".repeat(64)]) { + const request = new NextRequest(`http://localhost/api/auth/callback?code=example&state=${"a".repeat(64)}`, { headers: { cookie } }); + assert.equal((await callback(request)).status, 400); + } + assert.equal(fetchMock.mock.callCount(), 0); +}); + +test("OAuth token exchange repeats the exact configured callback URI", async () => { + const getAccessToken = mock.method(WebflowClient, "getAccessToken", async () => "access-token"); + assert.equal(await exchangeAuthorizationCode("authorization-code"), "access-token"); + assert.deepEqual(getAccessToken.mock.calls[0].arguments[0], { + clientId: "local-test-client", + clientSecret: "local-test-secret-not-used-in-production", + redirectUri: "https://webflow-app.example/api/auth/callback", + code: "authorization-code", + }); +}); + +test("Webflow revocation sends the grant only to the official endpoint", async () => { + const fetchMock = mock.method(globalThis, "fetch", async () => new Response(null, { status: 200 })); + await revokeAuthorization("access-token"); + assert.equal(fetchMock.mock.calls[0].arguments[0], "https://webflow.com/oauth/revoke_authorization"); + const options = fetchMock.mock.calls[0].arguments[1] as RequestInit; + assert.equal(options.method, "POST"); + assert.deepEqual(JSON.parse(options.body as string), { + client_id: "local-test-client", + client_secret: "local-test-secret-not-used-in-production", + access_token: "access-token", + }); +}); + +const config: ScriptConfig = { + trackPageviews: true, trackEvents: false, collectDNT: false, automatedEvents: true, + hashMode: false, ignorePages: "", customDomain: "", overwriteDomain: "", + collectOutbound: false, collectEmails: false, collectDownloads: false, + downloadExtensions: "", usePageTitle: true, collectFullUrls: false, collectLinkEvents: false, +}; + +test("script settings are serialized safely and disabled event types stay disabled", () => { + const scripts: Array<{ src: string; dataset: RecordLoading...
+ Connect to Webflow to add Simple Analytics to your site. +
+ {error &&{error}
} + +
+ data-sa-link-event
+
+ {" "}
+ as a custom attribute on
+ any link in Webflow (Element Settings → Custom Attributes).
+ Set the value to your event name, e.g. cta_click.
+ + Privacy-friendly analytics for your Webflow site. No cookies, fully + GDPR compliant. Get the insights you need without compromising your + visitors' privacy. +
++ Configure your tracking preferences in the Settings tab, then click + Install Script. The app will automatically add the Simple Analytics + script to your site. After installing, publish your site to start + collecting data. +
++ If Simple Analytics was previously added in Webflow Site settings, + remove that manual script first. Webflow does not let apps inspect + custom code added manually or by other apps. +
+