Nuances of Iframe: Lessons from Contentstack Live Preview
summary
Contentstack Live Preview loads any hosted site into an iframe and syncs CMS edits in real time using websockets for the prototype, then moves to a per-session channel ID (uuid) to isolate users. Direct window access fails on cross-origin pages so the implementation switches to the postMessage API (or post-robot) to send the preview hash and commands; sandbox and frame-ancestors CSP protect embedding, intersection observer mitigates clickjacking, and a surprising gotcha is that browser history is one linear history mixing iframe and parent navigation.
AI-written summary · about
chapters (13)
- 0:00Introduction to live preview
- 1:06Building first live preview
- 3:10Syncing website changes in real time
- 4:55Channel ID for user separation
- 7:06Iframe security and clickjacking
- 9:12Preventing clickjacking with Intersection Observer
- 11:17Cross-origin iframe access error
- 12:42Solving with postMessage API
- 14:09Iframe in RTE for security
- 15:35Implementing navigation in iframe
- 17:44Browser history with iframes
- 20:33Sandboxing for iframe security
- 21:15Closing remarks and resources
