\n ","sourceCodeStart":50,"sourceCodeEnd":86,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/pages/widget.tsx#L50-L86","documentation":"The embed/widget page listens for postMessage events from the parent frame. When the parent sends data.json, setContents parses and transforms it via contentToJson; if the payload is not valid JSON for the configured format the store throws and this catch logs it and toasts 'Invalid JSON!'. The error means the embedding site sent malformed JSON or a non-JSON string.","triggerScenarios":"Parent frame calls postMessage({ data: { json: '{not json}' } }); parent sends JSON with trailing commas/comments that JSON.parse rejects; format mismatch (parent sends YAML but widget defaults to JSON); an unrelated cross-origin script posts a message whose data.json is coincidentally a non-JSON string.","commonSituations":"Third-party embed sending an un-stringified object instead of a JSON string; copy-paste with smart quotes corrupting the payload; React DevTools or another extension posting messages that loosely match the shape; missing event.origin validation letting stray messages through.","solutions":["Validate event.origin against an allowlist before processing to ignore stray messages.","Try JSON.parse(event.data.json) first and toast the specific parse error message.","Document the expected postMessage payload contract for embedders.","Apply the same literal-narrowing used for options.theme to the json field."],"exampleFix":"// before\nconst handler = (event: EmbedMessage) => {\n try {\n if (!event.data?.json) return;\n setContents({ contents: event.data.json, hasChanges: false });\n } catch (error) {\n console.error(error);\n toast.error(\"Invalid JSON!\");\n }\n};\n\n// after\nconst handler = (event: MessageEvent) => {\n const data = event.data as EmbedMessage[\"data\"];\n if (!data?.json) return;\n try {\n JSON.parse(data.json);\n } catch (e) {\n toast.error(e instanceof Error ? e.message : \"Invalid JSON!\");\n return;\n }\n try {\n setContents({ contents: data.json, hasChanges: false });\n } catch (error) {\n console.error(error);\n toast.error(\"Invalid JSON!\");\n }\n};","handlingStrategy":"validation","validationCode":"const ALLOWED_ORIGINS = [\"https://embed.example.com\"];\nfunction isTrustedEmbedEvent(event: MessageEvent): boolean {\n if (!ALLOWED_ORIGINS.includes(event.origin)) return false;\n const data = event.data as EmbedMessage[\"data\"];\n if (!data?.json || typeof data.json !== \"string\") return false;\n try {\n JSON.parse(data.json);\n return true;\n } catch {\n return false;\n }\n}","typeGuard":"function isEmbedMessageData(data: unknown): data is EmbedMessage[\"data\"] {\n if (!data || typeof data !== \"object\") return false;\n const d = data as Record;\n if (d.json !== undefined && typeof d.json !== \"string\") return false;\n return true;\n}","tryCatchPattern":"const handler = (event: MessageEvent) => {\n if (!isTrustedEmbedEvent(event)) return;\n try {\n setContents({ contents: (event.data as EmbedMessage[\"data\"]).json!, hasChanges: false });\n } catch (error) {\n console.error(error);\n toast.error(\"Invalid JSON!\");\n }\n};","preventionTips":["Always validate event.origin against an allowlist before trusting postMessage data.","JSON.parse the incoming json before setContents to give a precise error.","Document the postMessage payload contract for embedders and reject anything that does not match."],"tags":["postmessage","embed","json-parse","cross-origin"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}