DEV Community: Charles Tison

VSCode Remote Containers

Charles Tison — Wed, 09 Sep 2020 17:57:18 +0000

Docker images are very useful because they are lightweight environments defined as code (Dockerfiles) where developers can set up the necessary tools and dependencies their softwares need to run. Then, other developers can simply download the docker images and run them on their desktop without the initial burden of setting up dependencies and understanding how things wire up at first.

The primary use case of containers is to ship software to production, where a container orchestrator such as Kubernetes manages the lifecycle of containers (e.g. scaling containers on load).

The secondary use case of containers is in the process of developing and testing applications. The developers use derived images from production where they add the necessary tooling to develop and test their applications. It's huge because it reduces the environment frictions between developers and cloud environments: they share a similar environment and therefore they can easily share operational development processes as well (DevOps).

If you already have some experience with containers, you know that they are lightweight virtual machines accessible from your terminal. So to develop in a container, we can:

Mount a repository in a container and open that repository locally in VSCode and run commands from a terminal connected to the container (e.g. to build, to trigger git hooks).
Connect VSCode to a container so that it can directly access the container filesystem.

Connecting VSCode to a container has many advantages:

Access the entire container's file system from VSCode.
All dependencies and VSCode's integrations are installed in the container.
Avoid bind mounting (aka. sharing) folders between your host and the container, which is a high-performance improvement when Docker is running in a Linux virtual machine (e.g. macOS, Windows) and when using tools with a lot of inputs/outputs (I/O) such as npm 🚜.

Install

Let's start by installing the VSCode extension named VSCode Remote - Containers:

Run a container

Once Docker is running, let's run a container with the following configuration:

Created from alpine.
The container is named work and is in foreground mode (-it).
The current working directory is bind mounted inside the container at /work.

docker run -it \
  --name work --hostname work \
  -v "$PWD:/work" --workdir /work \
  alpine

After running the last command, a shell prompt should appear, meaning you're now inside a container. You can run commands like:

uname -a to display system information
ps aux to view processes
mount to reveal mounted filesystem
nslookup -type=a host.docker.internal to resolves the host

Connect VSCode to a container

Now that we have a container running, we can use VSCode to connect to it:

Open the Command Palette (F1)
Select Remote-Containers: Attach to Running Container...
Select the name of the container (e.g. work)

VSCode should open a new window with a progress bar showing the installation progress of its server inside the container. Once finished, that's it! We can now edit files inside our container with VSCode 🚀.

Share development environments

We saw how to manually spawn a Docker container and connect to it through VSCode. But VSCode Remote Containers goes a bit further by allowing us to describe what container(s) should be created and connected to in a file named .devcontainer.json.
For example, to automate our previous example, create a folder named gruntapp with a file in it named .devcontainer.json with the following content:

{
  "image": "ubuntu",
  "extensions": [
    "mutantdino.resourcemonitor"
  ]
}

When opening the folder containing this file with VSCode, you should see a notification asking you whether or not to start developing in a container with the detected devcontainer file. Clicking Reopen in Container will create a container from ubuntu and mount the folder at /workspaces/gruntapp.
As a security measure, you should review a devcontainer file because it can run anything on your machine.

Conclusion

We saw how VSCode containerize itself by installing its server into a container, while the frontend is on the host. It's a powerful tool to reduce developer frictions like dependencies management. This kind of practice will probably democratize and become a standard in the next decade 🔮.

Note that VSCode Remote Containers works with docker compose as well!

Happy coding 🤓

Useful tips and tricks

Docker volumes

We did both bind-mounting a repository to a container and connecting VSCode to the container. To gain performance improvements, you can instead put your code in the container (e.g. git clone, docker cp), or you can put your code in a Docker volume to persist your code across changing containers.

docker volume create example # create a volume named example
# run a container with the volume named example mounted at /example
docker run -it --rm -v example:/example -w /example alpine 
# Inside the container, you can run `mount` to see the volume
echo '¯\_(ツ)_/¯' > x.txt
exit
# Start a ubuntu container
docker run -it --rm -v example:/example -w /example ubuntu
cat x.txt

VSCode CLI

You can use code to open files from a terminal:

code file.txt
export EDITOR='code -w'

Setting VSCode as your shell editor is useful when using commands such as git commit and kubectl edit.

Docker performances

Go to Docker preferences to allocate more CPU and RAM to your Docker VM.
On macOS, you can use the delegated option to improve bind mount performances.

Access host from a docker container

Docker for Desktop resolves by default host.docker.internal to your host from inside a container. It means you can access a network service running on your host from a container. It also resolves kubernetes.docker.internal if you enabled Kubernetes.

Useful Links

Crack with VSCode Hex Editor

Charles Tison — Mon, 07 Sep 2020 16:45:17 +0000

Have you ever wondered how hackers bypass proprietary applications to do what they want? Like not asking for a license.

In this post, we will see how to crack a simple executable on Linux or macOS (not tested on Windows but it probably works as well).

Install

We will need VSCode and its extension: Hex Editor.

Next, we need a C compiler, like GCC or Clang.

Compile

To learn the process of cracking, we will see how to crack a very simple C program. Put the following in a main.c:

#include <stdio.h>

int main()
{
  int i = 0;

  if (i)
    printf("OK\n");
  else
    printf("KO\n");
  if (!i)
    printf("i = 0\n");
  return (0);
}

Then compile with gcc main.c -o a.out. An a.out executable is produced by the compiler. We will directly modify a.out to do what we want it to do like if we do not have the source code.

Challenge #1

Our first challenge is to make the executable print:

$ ./a.out
OK
i = 0

But right now, it prints:

$ ./a.out
KO
i = 0

To modify a program, we need to know which are the instructions executed by the CPU so that we can rewrite them as needed. We disassemble our executable by running:

$ objdump -M intel -j .text --disassemble=main ./a.out # on Linux
$ objdump -d -x86-asm-syntax=intel ./a.out # on macOS

On Linux with a x86_64 CPU, I have:

a.out:     file format elf64-x86-64


Disassembly of section .text:

0000000000001135 <main>:
    1135:       55                      push   rbp
    1136:       48 89 e5                mov    rbp,rsp
    1139:       48 83 ec 10             sub    rsp,0x10
    113d:       c7 45 fc 00 00 00 00    mov    DWORD PTR [rbp-0x4],0x0
    1144:       83 7d fc 00             cmp    DWORD PTR [rbp-0x4],0x0
    1148:       74 0e                   je     1158 <main+0x23>
    114a:       48 8d 3d b3 0e 00 00    lea    rdi,[rip+0xeb3]        # 2004 <_IO_stdin_used+0x4>
    1151:       e8 da fe ff ff          call   1030 <puts@plt>
    1156:       eb 0c                   jmp    1164 <main+0x2f>
    1158:       48 8d 3d a8 0e 00 00    lea    rdi,[rip+0xea8]        # 2007 <_IO_stdin_used+0x7>
    115f:       e8 cc fe ff ff          call   1030 <puts@plt>
    1164:       83 7d fc 00             cmp    DWORD PTR [rbp-0x4],0x0
    1168:       75 0c                   jne    1176 <main+0x41>
    116a:       48 8d 3d 99 0e 00 00    lea    rdi,[rip+0xe99]        # 200a <_IO_stdin_used+0xa>
    1171:       e8 ba fe ff ff          call   1030 <puts@plt>
    1176:       b8 00 00 00 00          mov    eax,0x0
    117b:       c9                      leave  
    117c:       c3                      ret

Wow that's cryptic. Yes this is assembler (ASM). If you ever thought Javascript is hard, well, your brain is probably melting right now but that's ok, we just need to know 3 things:

The first column is the starting address of the instruction in the file.
The third column is the ASM instruction name and the fourth column is its argument(s).
The second column is the corresponding byte code of the instruction and its argument(s) if any.

These are 3 instructions useful to know:

The jmp instruction is encoded as eb and basically jumps to an address in memory.
The je instruction (74) is jump if equal and is like the if (...) in C.
The jne instruction (75) is jump if not equal and is like the if (!...) in C.

Always remember that numbers can vary from one CPU to another. I'm on an x86_64 and you're probably on an x86 CPU as well but there are other architectures like ARMv6. Each architecture can have a more or less different instruction set.

Note that corresponding instructions may not be encoded by the same numbers on your computer because it depends on your CPU model.

Guess what. To solve this challenge, we just need to modify the first je instruction at address 1148 with either:

A jmp instruction
A jne instruction

Open a.out with Hex Editor extension and search for 74 0e at address 1148. Remember, all numbers I present to you may be different for you so get them from your outputs.

Now change the instruction je to jmp:

Save and run:

$ ./a.out
OK
i = 0

Conclusion

Well done, you solved your first cracking challenge!
If you liked it, you can try harder challenges on platforms like root-me.org.

Or you can try to solve my next challenge by yourself:

$ ./a.out
OK

https://www.felixcloutier.com/x86/

In another post, I will cover higher-level tools to ease the process of cracking like:

Cutter
Radare
Ghidra (integrated in Cutter)

Happy cracking 🛠

Firefox Containers

Charles Tison — Sun, 06 Sep 2020 15:42:33 +0000

Firefox containers are a way to navigate the web from multiple browsing sessions in a single window. They unlock functionalities like:

Authenticate with multiple accounts on a website (e.g. Facebook).
Perform search queries (e.g. Google) in clean states where previous searches don't influence other searches.
Prevent potentials CSRF attacks and other types of vulnerabilities because your credentials are segregated by containers.

To unlock these functionalities, we will use Multi-Account Containers which is a Firefox extension that allows us to use tabs in different browsing sessions, called containers, where data are isolated from one another. Let's go!

Containers

The first step is to install Multi-Account Containers:

https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/

Once installed, click on Multi-Account Containers icon on the top right.

A menu should appear with preexisting containers. When clicking on one of them, a new tab opens, and you should see two things:

A thin colored border on the bottom of your tab.
The name and icon of your container in the right of the search bar.

Those two things mean you're browsing in a container. You can assert that it is true by authenticating to Facebook in one container and check that you're not authenticated in another.

You're now able to browse websites with multiple identities 🦾🚀🔥!

But there is more.

Temporary Containers

Browsing in multiple containers allows you to browse websites with multiple identities, which is fantastic. But we could use this technology moreover by automatically spawning and dropping containers while navigating the web, thus increasing our security and privacy. Think about a new container every time you want to interact with servers on the internet.

To do this, install Temporary Containers from:
https://addons.mozilla.org/en-US/firefox/addon/temporary-containers/

By default, Temporary Containers is in a passive mode and opens a new container when clicked. This new container is temporary and will be deleted (along with the data it contains) when no longer used by a tab for a certain amount of time (15 minutes by default).

Temporary Containers has a lot of options to configure to enjoy its power, and thankfully, it supports exporting and importing configurations, so you can download mine from temporary-containers-preferences.json and install it seamlessly. You can then go to Temporary Containers import settings by right-clicking on it, then:

Manage Extension > ... > Preferences > Export/Import

In my configuration, Temporary Containers will create a temporary container in the following cases:

You navigate in a newly opened tab.
You navigate to an URL that has a different domain or subdomain from the current one. For example, going from google.com to facebook.com.

Permanent Containers

Now that we have temporary containers spawning by default, we have to learn how to bypass them because sometimes we need to share data between websites. For example, some websites propose to authenticate via a third party account like google.com or linkedin.com, but navigating from example.org to google.com would create another temporary container isolated from the previous. So we need to create permanent containers, where cross-domains navigation doesn't spawn distinct containers, and which are not automatically deleted.

So let's create a container with Multi-Account Containers named, for example, Google. Once done, click on Temporary Containers and make a container "permanent" by selecting its name in Exclude Permanent Containers.

Now, anything you do in this container will persist, and cross-domains navigation will not spawn new containers.

Tips

Open a new tab in the same container by pressing Alt+X.
Right-click on a tab or a link to see containers related options.
Long click on the Create tab button to open a new tab in a specific container.

Conclusion

That's it! You are now completely undetectable... 🤨
Maybe not entirely, but still, we made some progress 🐥.

Note that this style of navigation may introduce irritating website behaviors that require some knowledge to neutralize. Don't worry; I will talk about these measures in the next post. In the meantime, you can reset Temporary Containers settings by going to Advanced > General > Reset Storage.

The next post of this series will talk about how to block and bypass annoying content from the web with some of the following extensions:

uBlock Origin
Stylus
Greasemonkey
Cookie Quick Manager

Happy browsing 😀👀