This project is a modified version of meta-code-verify by Facebook. In simple terms, it's a web extension for checking if the JavaScript hasn't been tampered with by creating a Merkle tree both on the client and server side. You can read more about this concept on the Mozilla Wiki. The code pushed to the repository includes a script to generate a Merkle tree in Vite, and then push the root of the Merkle tree to IPFS. The design is inspired by the WhatsApp binary transparency manifest:
Here's what it looks like in our apps:
The main difference is the removal of hash_function
. While WhatsApp pushes their Merkle root to Cloudflare, our implementation is more resilient as it's decentralized in IPFS, in contrast to the centralized server solution used by Cloudflare. The following is a brief description of the project and how to use it.
As this is a web extension, you'll need to have either a Chrome-based browser or Firefox. In this demo, we use Brave browser. First, navigate to packages/apps/meta-code-verify
and run this script:
$ yarn
$ yarn build-local-dev
Then, go to your browser and open this URL: brave://extensions/
Turn on developer mode if you haven't:
Click "Load Unpacked":
Navigate to the dist/chrome
folder of meta-code-verify, then click "Select Folder":
If successful, it will show something like this:
Now, go to packages/apps/dashboard/ui
and then add the necessary environment variable:
VITE_APP_NFT_STORAGE_API=
And then run this command:
$ yarn
$ yarn build --mode development
Wait until it finishes building, then run:
$ yarn start-prod
Go to your browser and navigate to http://localhost:3000
If you click on the web extension icon, you'll see a green checkmark, indicating that our code is not tampered with:
To test if our code is getting tampered with, first, stop the yarn start-prod
command (use CTRL+C on Linux). Then, go to index.html
in the packages/apps/dashboard/ui
and add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
:
Run yarn build --mode development
again, followed by yarn start-prod
. When you go to http://localhost:3000
again, you'll see a red exclamation mark:
This indicates that one or more scripts are not in the Merkle tree. If you download it, you'll get a list of all JavaScript files and their source code in gzip files, so you can check it yourself.
Allowlist allowing you to allow some of the extension that you deemed safe to use for example you want to use metamask you will surely get an error like this:
You can now open allowlist on the right sidebar and click allow
And now your code is validated again