The companion site for the talk

Nuances of Iframe: Lessons from Contentstack Live Preview

Presented at React India 2024 - Remote Edition

The Talk is available on YouTube

Proofs of Concept (POCs)

The POCs hosted here simulates the behaviour to prevent spam. You can get the source code and run it locally to experience the actual working.

Live preview with Socket

The most basic implementation of Live preview. It lacked channel ID, so all users were seeing the same preview.

View POC

Live preview with Hash

Introduced the live preview hash as a channel ID to differentiate between different users. We are setting the hash directly on the iframe window object.

View POC

Security error due to different origin

Since we were setting the hash directly on the iframe window object, we got an error when we worked with different origins. You should see an error in the console.

View POC

Sending the hash using the Post Message API

To avoid the different origin error, we used the Post Message API to send the hash to the iframe.

View POC

Iframe History

A demonstration of how the History APIs work in iframes.

View POC

Additional Resources

History of Embedding Technologies

Learn about the history of embedding technologies and how they evolved over time.

Learn More

Iframe

Learn about Iframe and how to use it in your web applications.

Learn More

Intersection Observer v2

Intersection Observer v2 adds the capability to not only observe intersections per se, but to also detect if the intersecting element was visible at the time of intersection.

Read the article

Intersection Observer coverage

Which browsers support Intersection Observer?

Check the support

Intersection Observer Demo

A demo to show how Intersection Observer works.

View Demo

X-Frame-Options

Learn about the X-Frame-Options header and how it works.

Learn More

Frame ancestors

Learn about the frame-ancestors directive in Content Security Policy.

Learn More

Same Origin Policy

Learn about the Same Origin Policy and how it affects the web.

Learn More

Cross-Origin Resource Sharing (CORS)

Learn about Cross-Origin Resource Sharing and how it works.

Learn More

Post Message

Learn about Post Message and how to use it to communicate between iframes.

Learn More

Source code

View the source code for this project on GitHub.

View Source

Tools used for the presentation

Excalidraw

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

Visit website

PowerPoint

PowerPoint presentation is one of the most powerful tool I love using to present my ideas. Her's the link to my presentation.

View Presentation