I like Tauri V2 for its security
23 Jan 2025I have a local API server which serves as backend for an internal project. The front end is written in svelte and uses fetch api exclusively to consume the API. The frontend was hosted in one more server and everything was working fine as any web app should be.
Later I wanted to package the frontend into a desktop app so that I can get rid of the server. I decided to go with Tauri for its lightweight bundle and hassle free frontend integration.
I created the tauri app using the official documentation. Copy pasted the src directory from my frontend project into the tauri project. Fixed some dependencies in the packages.json file. I could have added tauri directly to the frontend manually using
npm install -D @tauri-apps/cli@latest
npx tauri init
but wanted to keep both projects separate.
I started the dev server in the tauri, using
npm run tauri dev
tested the app and made sure everything was working fine as intended.
I couldn't be more happy as within 5 minutes I was able to convert my web app into a desktop app. I started the binary build using
npm run tauri build --release
All went well, except it didn't!
When I ran the executable file, the app broke! It was not loading any page other than the login page which is the default! No request was being sent to the server.
With the dev console disabled in the release build, I wasn't able to debug as well.
A little google search pointed me to the issue that, I was using the browser fetch api which is disabled in the final build and tauri expects one to use the fetch api they are providing in the http extension!
I added the http extension using
npm run tauri add http
added a couple of
import { fetch } from '@tauri-apps/plugin-http';
statements across the files and thought everything will work. But it was still the case. Now the app was not working even in the developer mode.
Little did I know Tauri being a strict officer, doesn't allow request to pass through unless explicitly allowed.
Then after looking at the documentation, All I needed was to add a few lines in the "src-tauri\capabilities\default.json" file.
"permissions": [
"core:default",
"opener:default",
"http:default",
{
"identifier": "http:default",
"allow": [
{
"url": "http://backenddomain.com:/*"
}
]
}
]
I particularly like the fine control over the urls from the domain. I can allow only certain paths in the future and keep everything in the backend as private and secure.
It was a good experience to get to know off the tauri's security principles! and changed my perspective towards app security.
So yeah, kudos to tauri team to help developers build secure apps.