I was recently working on integrating the shell project I worked on into my portfolio to provide a working version rather than send people to my GitHub and install it.
Well, what I can say it's not an easy process.
I was looking for an easier process of embedding something like a docker container and embedding the container into the webpage, turns out its not a secure approach to this problem
- Isolation: Lightweight virtualization relies on isolation mechanisms provided by the underlying operating system or hypervisor. By embedding containers directly into web pages, you may compromise this isolation, potentially allowing malicious code to escape from the container and access sensitive information on the host system or other containers.
- Attack Surface: Introducing lightweight virtualization into web pages increases the attack surface of the web application. Any vulnerabilities in the container runtime or virtualization technology could be exploited by attackers to compromise the host system or manipulate the containerized applications.
- Privilege Escalation: Embedding containers in web pages may require elevated privileges in the browser environment, potentially allowing malicious code to escalate its privileges and execute arbitrary commands on the host system.
Other than those main 3 it would have been complex.
So I stuck with passing commands through my API and the API giving the responses back . For my Front end, I used xterm.js. xterm.js is a good tool for web terminal interfaces as I described how to use it in my previous article and here is the documentation
This method solves the three problems above and also:
- Flexibility: Using an API to pass commands gives you greater flexibility in how commands are processed and executed. You can implement custom logic, integrate with external systems or services, and handle error conditions more gracefully.
- Cross-Origin Resource Sharing (CORS): Running commands directly within the browser may pose CORS issues, especially if the commands involve interactions with external resources or APIs. By using an API, you can control access permissions and avoid CORS-related security vulnerabilities.
- Logging and Monitoring: When commands are executed on a backend server, you have better visibility into command execution, allowing you to implement logging and monitoring mechanisms to track usage, diagnose issues, and ensure compliance with security policies.
- Consistency: By centralizing command execution within a backend server, you ensure consistency across different client devices and browsers. This helps maintain a uniform user experience and simplifies maintenance and troubleshooting.
Overall, using xterm.js with an API to pass commands offers improved security, scalability, flexibility, and consistency compared to executing commands directly within the browser. It allows you to leverage the power of terminal emulation in web applications while maintaining control over command execution and protecting client systems from potential security risks.
