Compare commits

...

3 Commits

Author SHA1 Message Date
Cursor Agent
a509f73eda chore: exclude test files from TypeScript build 2026-02-09 12:08:16 +00:00
Cursor Agent
bbcb48cb1c test: add tests for webkit messageHandlers polyfill 2026-02-09 12:06:01 +00:00
Cursor Agent
34e04f2c8b fix: add webkit messageHandlers polyfill for Facebook iOS browser
Fixes FORMBRICKS-HJ

- Add defensive polyfill for window.webkit.messageHandlers
- Prevents TypeError when accessing unregistered handlers in Facebook's iOS in-app browser
- Uses Proxy to safely intercept access and return no-op postMessage for missing handlers
- Solves issue with Cal.com embed trying to use native WebKit messaging in unsupported environments
2026-02-09 12:04:55 +00:00
3 changed files with 157 additions and 0 deletions

View File

@@ -6,6 +6,36 @@ import { FILE_PICK_EVENT } from "@/lib/constants";
import { getI18nLanguage } from "@/lib/i18n-utils";
import { addCustomThemeToDom, addStylesToDom, setStyleNonce } from "@/lib/styles";
// Polyfill for webkit messageHandlers to prevent errors in browsers that don't fully support it
// (e.g., Facebook's iOS in-app browser). This prevents TypeError when accessing unregistered handlers.
if (typeof window !== "undefined") {
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- WebKit types are not standard
const win = window as any;
if (win.webkit?.messageHandlers) {
const originalMessageHandlers = win.webkit.messageHandlers;
// Create a Proxy that safely handles access to potentially undefined message handlers
win.webkit.messageHandlers = new Proxy(originalMessageHandlers, {
get(target, prop) {
const handler = target[prop as keyof typeof target];
// If the handler doesn't exist, return a safe mock object with a no-op postMessage
if (!handler) {
return {
postMessage: () => {
// Silently ignore - the message handler is not registered in this environment
console.debug(`WebKit message handler "${String(prop)}" is not available in this environment`);
},
};
}
return handler;
},
});
}
}
export const renderSurveyInline = (props: SurveyContainerProps) => {
const inlineProps: SurveyContainerProps = {
...props,

View File

@@ -0,0 +1,126 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
describe("WebKit messageHandlers polyfill", () => {
let originalWebkit: any;
let consoleDebugSpy: any;
beforeEach(() => {
// Save the original webkit object if it exists
originalWebkit = (window as any).webkit;
consoleDebugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
});
afterEach(() => {
// Restore the original webkit object
if (originalWebkit) {
(window as any).webkit = originalWebkit;
} else {
delete (window as any).webkit;
}
consoleDebugSpy.mockRestore();
});
it("should not throw when accessing undefined messageHandlers", () => {
// Setup: Create a webkit object with messageHandlers but no specific handlers
(window as any).webkit = {
messageHandlers: {},
};
// Apply the polyfill logic
const originalMessageHandlers = (window as any).webkit.messageHandlers;
(window as any).webkit.messageHandlers = new Proxy(originalMessageHandlers, {
get(target, prop) {
const handler = target[prop as keyof typeof target];
if (!handler) {
return {
postMessage: () => {
console.debug(`WebKit message handler "${String(prop)}" is not available in this environment`);
},
};
}
return handler;
},
});
// Test: Accessing an undefined handler should not throw
expect(() => {
(window as any).webkit.messageHandlers.undefinedHandler.postMessage("test");
}).not.toThrow();
// Verify console.debug was called
expect(consoleDebugSpy).toHaveBeenCalledWith(
'WebKit message handler "undefinedHandler" is not available in this environment'
);
});
it("should still work with existing handlers", () => {
// Setup: Create a webkit object with a real handler
const mockPostMessage = vi.fn();
(window as any).webkit = {
messageHandlers: {
existingHandler: {
postMessage: mockPostMessage,
},
},
};
// Apply the polyfill logic
const originalMessageHandlers = (window as any).webkit.messageHandlers;
(window as any).webkit.messageHandlers = new Proxy(originalMessageHandlers, {
get(target, prop) {
const handler = target[prop as keyof typeof target];
if (!handler) {
return {
postMessage: () => {
console.debug(`WebKit message handler "${String(prop)}" is not available in this environment`);
},
};
}
return handler;
},
});
// Test: Existing handler should still work
(window as any).webkit.messageHandlers.existingHandler.postMessage("test message");
expect(mockPostMessage).toHaveBeenCalledWith("test message");
});
it("should handle multiple undefined handlers", () => {
// Setup
(window as any).webkit = {
messageHandlers: {},
};
// Apply the polyfill logic
const originalMessageHandlers = (window as any).webkit.messageHandlers;
(window as any).webkit.messageHandlers = new Proxy(originalMessageHandlers, {
get(target, prop) {
const handler = target[prop as keyof typeof target];
if (!handler) {
return {
postMessage: () => {
console.debug(`WebKit message handler "${String(prop)}" is not available in this environment`);
},
};
}
return handler;
},
});
// Test: Multiple undefined handlers should not throw
expect(() => {
(window as any).webkit.messageHandlers.handler1.postMessage("test1");
(window as any).webkit.messageHandlers.handler2.postMessage("test2");
(window as any).webkit.messageHandlers.handler3.postMessage("test3");
}).not.toThrow();
expect(consoleDebugSpy).toHaveBeenCalledTimes(3);
});
});

View File

@@ -12,6 +12,7 @@
},
"resolveJsonModule": true
},
"exclude": ["**/*.test.ts", "**/*.test.tsx"],
"extends": "@formbricks/config-typescript/js-library.json",
"include": ["src", "../types/surveys.d.ts"]
}