WIDE is a Web IDE based in monaco-editor, it allows to edit remote files in your own server quite easily, instead of having to use local files or uploading files through SFTP.

It allows to open several files, to browser remote folders, and the privileges are based in a config.json that you can store server side.

• Cool text editor with nice syntax highlighting (uses monaco-editor, the editor from VSCode).
• Load/Save remote files
• Browser server files
• Saves the session (restores the state when opening the editor again)
• Console to launch commands (easy to add new ones) or to visualize logs
• Allows to "execute" the project
• Very simple, only three files in total (html,js,php), does not use any build script nor ES6 features.
• Easy to install (does not require launching any daemon or having a configure a database).

The way it allows users to access files in the server is by using keys (tokens) that grant you access to specific server folders. This means that if a malicious user obtains a key, he could not only store files in the server but also execute malicious code, which is quite dangerous.

Keys are stored in a config file called wide_config.json that contains keys associated to folders. This file should never be accessible through HTTP, otherwise the keys will be public. We recommend to store the config in /home/your_username.

The first time using the editor in a browser you must set the key (using the lower console bar or the key input), and it is stored in localStorage so you do not need to type it everytime, but it is stored in plain text (so anyone being able to access the computer could extract it).

When accessing the server (load file, store, browse) it sends the key in the request header (in plain text, so always use HTTPS), and the server checks if the key matches any of the keys in its project list (configured in the wide_config.json). If the server has the use_md5 feature enabled, it will hash first the key using md5 and then compare it with the one in the config file.

This is a layer of security that helps in case the config file is accessed by a malicious user, but it could still be easily hacked using an attack by dictionary.

So it is safe but not perfect, so my recommendation is do not use wide.js if your code is very sensitive to people trying to hack you, unless you are aware of the consequences.

Copy all repository files to a folder in your host accessible from HTTPS.

Create the wide_config.json in a folder that is not accessible through HTTP, like /home/ or /home/YOUR_USERNAME. If the wide_config.json is accessible through HTTP people will be able to see your keys (although if they are in md5 it still requires some work to get the key) and have access to execute malicious code in your host, so you will have a serious security risk in your server, be careful.

The config should be like this:

{
        "projects":{
                "PROJECT_KEY": {
                        "name":"Project1",
                        "folder":"/srv/www/mysite.com/www/public_html/",
                        "play":"https://mysite.com/"
                },
                "PROJECT_KEY2": {
                        "name":"Project2",
                        "folder":"/srv/www/mysite2.com/www/public_html/",
                        "play":"https://mysite2.com/"
                }
        }
}

Where PROJECT_KEY is the key that grants you access to that folder (and all its subfolders).

By default the keys in the config should be hashed using MD5, this way if the wide_config.json is read by an intruder, it still has a layer of security. To apply MD5 to your keys when writing the config, you can use: https://www.md5.cz/

You can disable the md5 in the server by changing the variable use_md5 to false $use_md5 = false; although I do not recommend it.

Once installed, you access the website and set the key typing at the bottom console bar:

key PROJECT_KEY

The PROJECT_KEY is as it was before hashing it with md5.

You can use the buttons on top of the sidebar to browser server files.

You cannot get into a level above the folder specified in the config.

For any suggestions or comments, you can contact me at [email protected]