feat: add web support

[pimlie]

This PR adds first support for Web using the Serial API. I've tried to add minimal changes while making sure nothing is completely broken, hope the changes are still reviewable. If not, let me know and I can try to split the PR into smaller ones.

The known issues left are (also see the updated readme):

• The Serial API on Web is quite limited with the device information it returns, so we don't get a manufacturer or product name we can check to see if the device is a Ultra or Lite. This means that on the connect page all devices will show as an Ultra. When connecting to a specific device we can detect the exact device type by checking if the device can be set to reader mode.
• Web doesnt support ffi, so key recovery doesn't work yet (the recovery methods have been stubbed for web). I've been looking into using a wasm module for that, but that will need to be a separate PR.
• Updating the firmware doesn't work either, this is because we cannot download the firmware programmatically through nightly.link in a browser due to CORS issues. Nightly.link owner also doesn't want to support it, see Missing CORS header, cannot check latest nightly from a website oprypin/nightly.link#59 Will need to find another way to download the artifacts

Test plan (for @Foxushka only):

• - Linux
• - Linux DFU
• - Windows
• - Windows DFU
• - macOS
• - macOS DFU
• - Android OTG
• - Android OTG DFU
• - Android BLE
• - iOS BLE
• - Web
• - Web DFU

[GameTec-live]

so you tried and port our app to flutter web?!

[pimlie]

so you tried and port our app to flutter web?!

Yep, it runs now in Chrome :)

The key changes for this are using platform conditional imports for recovery.dart and connector/serial (in main.dart). That way the dart:ffi dependency is never imported when trying to build for web.

The hardest part was actually realizing I needed to use the Serial api on web and not the USB api ;)

[GameTec-live]

sooo.... theres some stuff to fix (when just running it in chrome), importing cards or dictionaries doesnt work, read card does, but as you said, the recovery doesnt work (correct me if im wrong but, couldnt one in theory just do a dictionary attack, that should work, right?) , Mfkey32 doesnt work or the page doesnt get updated / its always on "disable collection"... and its kinda slow, but thats fine ig... (the settings work atleast :) )
Id also only feel comfortable merging if your plan is to maintain the web version, because we got enough to do with windows, android, linux and soon mac / ios...

[GameTec-live]

thanks for the pr though :) (cool that someone else also works on stuff)

[GameTec-live]

then theres also smaller stuff missing like it displaying "none" in the top right...

[pimlie]

• importing cards or dictionaries doesnt work
  will have a look at this
• in theory just do a dictionary attack
  true, but I wanted stay as close to the existing functionality as possible. The more stuff we are gonna add specific to one platform the more difficult maintenance will become. Or did I overlook an existing method for a dictionary attack that doesnt use the c lib?
• Mfkey32 doesnt work
  iirc this page relies on the c lib, so doesnt work for the same reason as recovery doesnt work
• its kinda slow
  yeah, sometimes even loading the initial connect page takes up to a minute . Not sure if that is due to development mode or some chrome restriction
• it displaying "none"
  this is because the serial api doesnt return any port info, ie afaik it's impossible to know that you are connecting to /dev/ttyACM0. Not sure what the best value would be, maybe just an empty string?
• maintain the web version
  i would be happy to help out with that, i don't expect it to be a lot of work after the initial bugs are resolved. Or have you already planned major refactoring?

[GameTec-live]

cool. So:

1. great, if card loading works ig i could merge for now, because then theres an actual functionality to the web version ;)
2. IDK if the current implementation uses a c library, but afaik theres a option to use a dictionary above the "recover keys" button=
3. Makes sense, should prob look into web assembly then or are there other plans?
4. Doesnt take a minute for me, but it isnt as snappy... id assume its the delay of going through chrome, etc... (no big deal though)
5. Id display something like "connected via webusb"
6. That would be good, i do plan to refactor some stuff (eg splitting into individual widgets, etc) and afaik foxushka plans to rewrite serial truely async with threads some day (idk what the actual plan there is, might happen one day)

So, thanks for the help, ill prob host it on my server then, when it gets merged.

IDK if its possible, but it might make sense to check for browser and display a "sorry, unsupported browser" message when using none chromium based browsers? (idk if flutter does it by itself, or if it has to be implemented manually or if its even possible to check, but thats some small stuff like the "None" text ;) )

[GameTec-live]

and if you feel like it, feel free to add me on discord and i might add you as a contributor?

[GameTec-live]

oh and dfu afaik also has a fallback to download from releases? anyways, it shouldnt just return a error but a "unsupported" message or smthng ;)

and the favicon should point to the logo...

but now thats more or less nitpicking

[Foxushka]

BTW pages sometimes hangs even on BLE, maybe core issue is there. Not high priority to debug it

[Foxushka]

And also regardless README: - cannot download firmware due to CORS issue with nightly.link. Won't it fallback to Github releases in this case?

[Foxushka]

Preforming some tests. You probably broken or unimplemented disconnect on error (happens if you reset permissions)

But anyway not working for me with ⛔ read error: NetworkError: The device has been lost.
Linux btw

[panayotoff]

That's great. I've also experimented with standalone web GUI ( React+TS ) and end up connecting via Web Serial API ( saw how they did it in Flipper Lab and abandoned the Web USB API. Saw that Ultra and Lite are using the same usbVendorId and usbProductId, can this be fixed with firmware update?

Also, is it possible in Flutter to move some of the login in service worker, this would speed things up.

[GameTec-live]

That's great. I've also experimented with standalone web GUI ( React+TS ) and end up connecting via Web Serial API ( saw how they did it in Flipper Lab and abandoned the Web USB API. Saw that Ultra and Lite are using the same usbVendorId and usbProductId, can this be fixed with firmware update?

Also, is it possible in Flutter to move some of the login in service worker, this would speed things up.

you awnser those questions ;)
and no, the VID and PID (hopefully) wont be changed...

[panayotoff]

That's great. I've also experimented with standalone web GUI ( React+TS ) and end up connecting via Web Serial API ( saw how they did it in Flipper Lab and abandoned the Web USB API. Saw that Ultra and Lite are using the same usbVendorId and usbProductId, can this be fixed with firmware update?
Also, is it possible in Flutter to move some of the login in service worker, this would speed things up.

you awnser those questions ;) and no, the VID and PID (hopefully) wont be changed...

Thanks, I guess the next best option would be to test for reader mode and not display device info till then.
Great work guys, this is really needed project and hope the Web GUI to emerge soon, this will be really beneficial to the community.
If for some reason you need Web/React/TypeScript developer, I can help.

[Foxushka]

No option to flash .zip or latest firmware from settings menu

[Foxushka]

This looks so bad, return it back to what we have at main branch

[Foxushka]

And it tires to load lite firmware on my ultra and as expected fails with DFUResponseCode.invalidSignature

[Foxushka]

Make button same as other buttons

[Foxushka]

This looks so bad, return it back to what we have at main branch

And about that: as we can't know what chumleon user has... left flashing only after connecting, don't discover DFU devices in main menu

[Foxushka]

I will do other small changes myself when you will fix those

[Foxushka]

PID change for CL: RfidResearchGroup/ChameleonUltra#103

[pimlie]

@Foxushka Please edit your posts next time and make a list of changes instead of posting 10 comments

• RE: COC removed in Remove code of conduct #159
  I appreciate the work you do and the technical expertise you bring to the project, but your attitude & communication style need a lot of work: https://www.dictionary.com/browse/you-can-catch-more-flies-with-honey-than-with-vinegar. So please stop behaving like a toddler who throws a hissy fit everytime they dont get their way
• RE: disabled: appState.connector.connected == false
  As mentioned before, disabled should already be in the stable release. What version of flutter/dart do you run, did you run flutter upgrade? I dont see any comments anywhere about disabled not working for a certain device? Happy to remove disabled if you have a source its really not supported yet
• RE: Side question: why loading on web takes too much time, like it tries to discover BLE devices. Is there way to reduce this time?
  Im not sure, as mentioned before it takes up to a minute for me too sometimes. I did check and it's the call to getPorts that takes a while, might be a chrome issue
• RE: No option to flash .zip or latest firmware from settings menu
  Im aware, but this is a feature not a bug and it requires some more work to make DFU mode work when the DFU device has not been paired yet. So would be for a next release
• RE: This looks so bad, return it back to what we have at main branch
  Not sure why the card is so big (might be related to the sizer_pro dependency issue, but having these firmware buttons on the card is a super nice feature.
• RE: And it tires to load lite firmware on my ultra
  Good one, will add a dialog so the user can indicate what the device is themselves
• RE: Make button same as other buttons
  Yessir
• RE: left flashing only after connecting, don't discover DFU devices in main menu
  See above, we can work around this quite easily so no need to remove it
• RE: PID change for CL: Change Chameleon Lite PID to 0x8787 RfidResearchGroup/ChameleonUltra#103
  Nice! Sad they closed the PR though. Do you know if there is a command to get the bluetooth discovery name in DFU mode? Looking at the bootloader the bluetooth name seems to be the only thing that's different...

[Foxushka]

Not sure why the card is so big (might be related to the sizer_pro dependency issue, but having these firmware buttons on the card is a super nice feature.

Nice, but put them back to alert as in main branch

[Foxushka]

stop behaving like a toddler

I define myself as toddler and behave appropriately. And that's generally going to be the case in future too

[pimlie]

Nice, but put them back to alert as in main branch

@GameTec-live Could you be the tiebreaker here?

[Foxushka]

What version of flutter/dart do you run

https://aur.archlinux.org/packages/flutter is marked out of date, when it will be updated then we can merge with disabled

[Foxushka]

@GameTec-live Could you be the tiebreaker here?

We anyway won't merge without both of us approve that. I will never approve this.

[GameTec-live]

Nice, but put them back to alert as in main branch

@GameTec-live Could you be the tiebreaker here?

if it is possible to put back, please do that to keep consistency, but if it isnt possible because of dfu pairing, you can keep it there for web only...

[GameTec-live]

What version of flutter/dart do you run

https://aur.archlinux.org/packages/flutter is marked out of date, when it will be updated then we can merge with disabled

you still should be able to just run flutter upgrade 🤷

[pimlie]

My apologies, but I think its for the better to just close this pr. I dont believe it will ever be 'good enough' to merge. Not blaming anybody besides myself for that.
But with everything that has transpired above I also have doubts about my motivation to continue working on this project after it has merged. Feel free to use what you want from this PR, would appreciate you'd give some credits if you use anything. Not saying I wont contribute ever, but at least for now I have to focus on other projects.

@Foxushka My remark above was not super nice either, and for that i want to say sorry. Thats another reason why I think its better I take a step back from the project. Good luck!

[Foxushka]

No, no way back

[GameTec-live]

No, no way back

yes, if he doesnt want to maintain it, this isnt gonna be merged, because we got enough work
altough it is sad that hes giving up 🤷