How Codepen, CodeSandbox and JS Fiddle are Implementing Iframe Code Execution

If you're someone who frequently codes or builds web applications, then you might have come across the term Iframe. Simply put, an iframe is an HTML element that allows you to inject content from another website or web app into your own app. While it might seem like a simple concept, there are several intricacies to consider in terms of security and execution. This is where online coding tools like Codepen, CodeSandbox and JS Fiddle come into play.

Why Use an Iframe?

Before understanding how Iframes are executed in online coding tools like Codepen, CodeSandbox, and JS Fiddle, it's worth understanding why Iframes are beneficial in the first place. Here are some reasons why Iframes are used in web development:

• Separation of content: Using an iframe allows for the separation of content from the main app. This is especially useful when dealing with third-party content like advertisements.

• Remote content: Iframes also allow you to inject remote content into your web app/pages. This allows for dynamic content that updates automatically without needing to refresh the whole page.

• Security: Since Iframes allow you to inject third-party content into your app/page, there are security concerns to consider. An Iframe helps in keeping the third-party content separate from your main app, which prevents malicious code from being executed.

With that understanding, let's look at how Codepen, CodeSandbox, and JS Fiddle are implementing iframes for code execution.

How Codepen Executes Code in an Iframe

A typical flow in which Codepen executes code in an Iframe is as follows:

1. The frontend app runs within the user's browser.

2. Whenever a user makes a change to the code, it's sent to the Codepen API hosted at codepen.io.

3. The Codepen API does some amount of transpiling on the code before sending a response back to the frontend app.

4. The response is sent back to the frontend app, which then reloads the iframe. Reloading the Iframe involves fetching an HTML document to show inside the iframe. This HTML document is fetched from a different domain (cdpn.io).

5. Inside this HTML document are some scripts that fetch and run the JavaScript code that the user authored and got transpiled during this earlier step.

6. The request is made to fetch some Javascript, and the response that is received is executed inside the iframe.

This entire process, including the use of an iframe, ensures that malicious code is not executed inside the user's browser.

How CodeSandbox and JS Fiddle Execute Code in an Iframe

CodeSandbox and JS Fiddle use a similar process to Codepen for executing code in an iframe. The core idea is that the user's code gets transpiled, which then gets executed inside an iframe.

While the processes might seem identical, each platform has its unique implementation. For example, CodeSandbox seems to use a more granular approach to transpiling and code execution, allowing for serverless API calls and rapid prototyping. JS Fiddle, on the other hand, has a more straightforward approach to Iframe execution, making it beginner-friendly.

Conclusion

Using Iframes in web development can be a powerful tool for separating content, injecting dynamic content, and providing security. While there are several online coding tools that utilize Iframes for code execution, each platform has its unique implementation. However, the core idea of transpiling and executing the user's code inside an iframe remains the same across different platforms.

Before implementing Iframes within your app, it's essential to understand the security implications and ensure that the user's data is safe. It's also worth experimenting with several online coding platforms to see how they handle Iframes, which might help inform your implementation.