Introducing dngr.us/vcf (beta) - "serverless" VCARD URL (works with iPhones!)

“Serverless” VCARD URL Service

We all wish VCARDs were supported NDEF records on iOS, but they aren’t.
We have to use a normal URL to download the contact card…
But does that mean we have to upload our user data to weird online business card providers? No!

I present to you: https://dngr.us/vcf.

  • enter your info or select a VCARD
  • generate the URL
  • save the URL on your chip

That’s it, now everyone can download your contact when tapping your implant!

I think this is the only privacy friendly service to share your contact to iPhone users.

How it works

Basically this is a more user-friendly version of this:

We store the VCARD in the hash of the URL which is never sent to the server.

For more details, please refer to the FAQ.

Beta

Firstly, this has not been tested extensively, so if you find bugs, and I guess you will, let me know. (Same for feature requests, improvements etc.). Especially on weird phones and browsers.

Secondly, this hasn’t been hardened yet, so it is is not as secure as it could be yet. But you can check the code, it’s all built to prevent people (including me) from accessing your VCARD data.

If you care: missing CSP, missing HSTS, uncertainty about TLS config

Help wanted!

You may know (and can see) that my web dev skills are… less than good.
I would say this is usable, but I really would love to have it improved.

I don’t have the CSS skills needed, and I won’t ever learn how to do responsive websites properly, so it just will look bad on desktop for now.

This website is completely client side (js html css), just download the files if you wanna play around.
I would really appreciate all suggestions or even updates!

12 Likes

Genius idea! Nice work.

2 Likes

I’m now tempted to try to create a link for an xDF2 sized vCard file…

Ok, that would be impractical.

2 Likes

Great utility project idea! I reworked the design using Bootstrap 5. I intentionally didn’t make changes to the design (except in terms of responsive design) and was more so trying to copy the style. Most everything is the default Bootstrap styling.

https://comter.codes/vcf/

The next things I would do involve streamlining the Javascript with jQuery and adding design elements to the overall layout. Possibly including the save.js code on index.html so that https://dngr.us/vcf/#VCARDCODE would work (vs https://dngr.us/vcf/1.html#VCARDCODE) which would slightly shorten the URL.

If you want to discuss this project further, feel free to message me (or reply to this thread).

4 Likes

Great job! Thank you. vCards over NFC with iPhones would be a real win.

I reworked the landing page to display like a linktree style thing… and got can download the vCard file too

4 Likes

The reflector has been moved to https://digitalcard.social;

https://digitalcard.social/#QkVHSU46VkNBUkQKVkVSU0lPTjoyLjEKRk46QW1hbCBHcmFhZnN0cmEKVElUTEU6IENFTwpPUkc6Vml2b0tleQpOT1RFOkhleSB0aGlzIGlzIGEgbm90ZSBhYm91dCBBbWFsISBBc2lkZSBmcm9tIE5PVEUsIG90aGVyIGVsZW1lbnRzICh3aGljaCBhcmUgY2xpY2thYmxlIGFyZSkgaW5jbHVkZSBURUwsIEVNQUlMLCBhbmQgb2YgY291cnNlIFVSTC4gVGFyZ2V0IGVuY29kaW5nIGlzIHZDYXJkIHZlcnNpb24gMi4xIGF0IHRoaXMgdGltZS4KVVJMOmh0dHBzOi8vYW1hbC5uZXQKVVJMOmh0dHBzOi8vdHdpdHRlci5jb20vYW1hbApVUkw6aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL2luL2FtYWxncmFhZnN0cmEvClVSTDpodHRwczovL2Rhbmdlcm91c3RoaW5ncy5jb20KVVJMOmh0dHBzOi8vdHdpdHRlci5jb20vZGFuZ2Vyb3VzdGhpbmdzClVSTDpodHRwczovL2luc3RhZ3JhbS5jb20vZGFuZ2Vyb3VzdGhpbmdzClVSTDpodHRwczovL3lvdXR1YmUuY29tL0BkYW5nZXJvdXN0aGluZ3MKVVJMOmh0dHBzOi8vdml2b2tleS5jb20KVVJMOmh0dHBzOi8vdHdpdHRlci5jb20vdml2b2tleQpVUkw6aHR0cHM6Ly9pbnN0YWdyYW0uY29tL3Zpdm9rZXkKVVJMOmh0dHBzOi8veW91dHViZS5jb20vQHZpdm9rZXkKVVJMOmh0dHBzOi8vZ2V0Y3liZXJuZXRpYy5jb20KUEhPVE87SlBFRztFTkNPRElORz1CQVNFNjQ6LzlqLzRBQVFTa1pKUmdBQkFRSUFkZ0IyQUFELzRnS3dTVU5EWDFCU1QwWkpURVVBQVFFQUFBS2diR050Y3dRd0FBQnRiblJ5VWtkQ0lGaFpXaUFINXdBRUFCd0FFZ0FJQUFoaFkzTndUVk5HVkFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBOXRZQUFRQUFBQURUTFd4amJYTUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQTFrWlhOakFBQUJJQUFBQUVCamNISjBBQUFCWUFBQUFEWjNkSEIwQUFBQm1BQUFBQlJqYUdGa0FBQUJyQUFBQUN4eVdGbGFBQUFCMkFBQUFCUmlXRmxhQUFBQjdBQUFBQlJuV0ZsYUFBQUNBQUFBQUJSeVZGSkRBQUFDRkFBQUFDQm5WRkpEQUFBQ0ZBQUFBQ0JpVkZKREFBQUNGQUFBQUNCamFISnRBQUFDTkFBQUFDUmtiVzVrQUFBQ1dBQUFBQ1JrYldSa0FBQUNmQUFBQUNSdGJIVmpBQUFBQUFBQUFBRUFBQUFNWlc1VlV3QUFBQ1FBQUFBY0FFY0FTUUJOQUZBQUlBQmlBSFVBYVFCc0FIUUFMUUJwQUc0QUlBQnpBRklBUndCQ2JXeDFZd0FBQUFBQUFBQUJBQUFBREdWdVZWTUFBQUFhQUFBQUhBQlFBSFVBWWdCc0FHa0FZd0FnQUVRQWJ3QnRBR0VBYVFCdUFBQllXVm9nQUFBQUFBQUE5dFlBQVFBQUFBRFRMWE5tTXpJQUFBQUFBQUVNUWdBQUJkNy8vL01sQUFBSGt3QUEvWkQvLy91aC8vLzlvZ0FBQTl3QUFNQnVXRmxhSUFBQUFBQUFBRytnQUFBNDlRQUFBNUJZV1ZvZ0FBQUFBQUFBSko4QUFBK0VBQUMyeEZoWldpQUFBQUFBQUFCaWx3QUF0NGNBQUJqWmNHRnlZUUFBQUFBQUF3QUFBQUptWmdBQThxY0FBQTFaQUFBVDBBQUFDbHRqYUhKdEFBQUFBQUFEQUFBQUFLUFhBQUJVZkFBQVRNMEFBSm1hQUFBbVp3QUFEMXh0YkhWakFBQUFBQUFBQUFFQUFBQU1aVzVWVXdBQUFBZ0FBQUFjQUVjQVNRQk5BRkJ0YkhWakFBQUFBQUFBQUFFQUFBQU1aVzVWVXdBQUFBZ0FBQUFjQUhNQVVnQkhBRUwvMndCREFBZ0dCZ2NHQlFnSEJ3Y0pDUWdLREJRTkRBc0xEQmtTRXc4VUhSb2ZIaDBhSEJ3Z0pDNG5JQ0lzSXh3Y0tEY3BMREF4TkRRMEh5YzVQVGd5UEM0ek5ETC8yd0JEQVFrSkNRd0xEQmdORFJneUlSd2hNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpML3dnQVJDQUQ2QVBvREFSRUFBaEVCQXhFQi84UUFHZ0FBQWdNQkFRQUFBQUFBQUFBQUFBQUFBUUlBQXdRRkJ2L0VBQmdCQVFFQkFRRUFBQUFBQUFBQUFBQUFBQUFCQWdNRS85b0FEQU1CQUFJUUF4QUFBQUh3VVJTTkt3dzhyanhxenJZdHBmS3lGVm1udWE3bVRhUWkwcldvTFlVVUtRQUNIblBSNVNGV2hsc2xjc2g1ZDh1dGJvdFdYTkMxTG9TcVdEeXhhRnFWWXNBS1JBS0FoNXowK1VoaHBxeUhXME11bk4ycnFBVVdVbE5XeGF0UUkwbXZPNlZwRmxzRkZJa0FLUTgzNmZMQXc4MVpMWkZnWnJiTHJzeDJXaFdva1dLNVFYa0hsdGxFMGtyZ0t3SktXSUE4NTZmTEF5dkxiTFpETFpMdGxUV2FxYUhXc3Z6cHgxZ2lKUUxvdnpvelRDbGRLZ0VKRVBPZW55d2FXeVd6TmNNdDYybzJwbFVtdVc2YmJPclN3ckVTTFdCblFQTlBLQkJMS3hRRWp6bnA4cEd6cXlXMkRLeGV0bXMyQVdpWGRuZlZuUnBSTkJGc1d4Z0hQUU0zSmZuY0ZLMHFwQ0FUem5vOHhXekdySWRURExlbDJqeEZrMTA4OU9xMEpYTDdCRkpsSEtUa1hKdU4yTkJTbFJUU0NnUE9lanltVzdPcmMyVVlkYnJMNmFXNmExVGZWbXJHblMwdHNnazB5UXJPZEhIdlBkbXNxcFdVMGhXRTgzMzhwVzdPck0yVTBPdXJVc0ROZERPOTAzclVqbGxYMlhYSVdTZ0JSSG41SmxZS2lGTklJQTgxMzhyTGRuVFpwcGpwVHBYYzNYTjJkOUNiMnpkcUZiQjZ2c3Z1U0JVbEJWSEhNbWMyeTFvU3FxeEJUekhmeXN0bWRXNTBiTnM2Ylo2RnZETHJsdG0rcm5wcG1yUmh4cWUzVGN1eW9tZEtWSFBtdWZubTZvRkVFS3hLOHozOHhpeWFzenBrN2IwOUp2a09GTjU0dFk5Uno5TzJhdUhwdzAxdHRqU0dSVlNLWmNNMWluTWtRQ0NGWlhYbk92QmJMTTZ0bFk5QTlIU211TTV2ZVZGdkwxejliejlHMWROajFCbGVwbXhGRWxxbHd5NVhGcFlLaWlLZ2xlWjY4RXNzenEyVm85RnJ2M0Y0a3hVblFtL043NDU3ajEyUFIwRXVvZ0NyU3dDd3BqQkxWT1JRa3NnQUNuaWVuTUpaTFpLdXMrZ3ZidjU2OE5qWExvYXFQTVhpbXVXMmROczFkS2t2VVhjcmh0cmlncFRpem5zenVKRWl4QUE4bDI0aXcyU3dIYnoyOVhudDU1am96ZWhyWW5GbDU5NWFwdm43NTJacGFvU1hIU1ZwVWx0c0ZubXRjZlE4dTkrYktrUkpZRHlIbzg4SVFCcG12UTQ5TkxIUm5UWGRiTEJIUHpkVVYyWm1uWm91TXk1VXhXWHl2THJtY3R6ZzN6OUZ4N0ZaWkVCRHh2bzgwVmdBTitkNzg5TkM2MnRyZXVyYXhadW1ac21tWlN6bU5kUTVVV1MxeTAzQ1ROVnk4dGtwRFpFRUN2SGVqelJZUkF2U3owc3p2cHF5N1p2UmJmYnFRcGt6VWxiVXRMN09kblZXWnBqTFppWU10a0FnVWhBV2VPOUhuaENBTitkMlo2Ynl4ZGMyeldpNjBEcW1GZFg3eTZhYXg0MVhGVm5PdU9CcnpkL2ozdGxBUWtTQnJ4dm84MElRQmRMc3oxYU43ZW1hMExvVkphSmRRK2tzMTFwc3hadE9OMldlZjF3ODcwODJpWHM4dXUzUFNSQ0RXQThkNlBNU0VBUTZPT3VlenA1NmE1dmFhczZ4UUsxMDFjdE01MkZrdFdkRFU4djA4ZVhXR0llazRkOVUxQUJBZVA4QVI1aVFCQUdyT3dXUzlLZGRrMTFjM1BMdTFlYmRMSmFWSno1TjdLelhHNmNlWDA0QVlnNTMrUGZkblFJQlBIK2p6d2dCaFJvMHpwU3pwbStsbnAwTTcwTDBLV2x1dWRPeTV0TG5KeG8xanovWHpKVUlNRXZsOUp3N2xTRlBHK2p6d2dCaUFIbHNscVRaTjdNNzdFNmRGcXd6bWRRMFpuazNseE92bnFzQkJna0NsMDEzdVBmVExEeHZvODBJUUlTQUdsZVZDOWV0bnIzWjAycVRIS3NaV1BKOXZMU2txQklFZ1FqSFc1OWVsejM1RDBlZUVJUUlTQUpLMG9zMHpYWHoxN002WEtKY3NubitubjVlK1N3YWdTRUlFSkFqeG1xRUlRWUpDQUJCVlUwVFhVejEzemFtSzgrVDA0MWdJUUlTRUlFZ1FsSkNSS2dRaElBQUFRU3hYaDdhV1N1ekdrMU1WektnU0JJUWdReTAyRUVHb0VJQUJnaWdDQUpZQWRmUTQzdHh2SnZQQzF6eWFrQ1FoQW03T3ZRWTcrTjZlWWtJUWhDRXBpUUtXSVFaUFI4ZTAxUE85T2Z0dVhWRjA3em5QTzNQTTFneWl3bzgxWkw2cm42YkQvL0VBQ2tRQUFJQ0FRTUVBZ0VGQVFFQUFBQUFBQUVDQUFNUkJCQVNFeUFoTURFeUlnVVVJMEJCTXpULzJnQUlBUUVBQVFVQzlLQ0FRQ0FURytJZkoyTzQyUHZXS0lCQU5zaVBZQUZjeHJCT1lFRDduK21nZ21RbzZ3ajJ6bE9SaXNjZjV6WVFXdG10OW0vcENKTWhSOWlwbmpMc0RFRXhDbzJBOGNvTERNNTdENmhCdXNYeEQrVUxUUGt0K0t3UE1sb0NSQ0Jrck9uQldZZVdGOGpZaVk5SWczV05COWRnQUljR2RMRzJBMElJMk1KeEJZSmo4UjJIMkNDQVFEeGlLdktWVTRscStlbmtDbWRGcHc0bGg0NFpGMU1MY0ZRNTdUM0R0SHdEUDhXY2VVMDZaM0FtSmlNa0M1SERDbXZ4WXVDdmpiR3hIZU8wYlp5UXVZaTROWXd1NGhVd2htbkRFS3hsekhvekNPTGo0OUk3Vm1JQjVyK0VXRHdJTmhzUjJNUEdxWEJYNDJNUHoyanNyMHRqVGl5UDh4UkZFSFlJTzR6VWorT3Y2N2tlblRybHMzS3p0eUROeGxSNXhCanVFQm1ZZHpMdktqYkhvRytqWCtQaCtOcUVOMCtRVjIwOWxOZ3RXQ1kzR3czTU1jOXhoN0J2cFA4QXpzY0FoK2MxR255bE56VXZWYUxWV0NZN3pHanpCbUpqdHh1TjlGL3dVZmxxRC9Ldms0eU5UUnhiVDNOVTlkb1pWZVptWm1aN1dqVHFOT3FaMUoxSjFCT2FUbFhNMTdqWXRQMHhzcXZ4YjV2ckVFMUZmSkxLeUl1cGVvcnI3akYxdDhPdE1YWEROZW9Ed05Nek1MUW5NZjYwWDlRZW5PLzZZNFcyRThyQjlVZ0VkT2xjOU5MYWhsVmcybVlURG9vdERqaXVmM1YybktmcWlHSDlScm43ek1YVnBMTlhVeSthN0tyT292cnAvd0N2N2s4SUlrRWV0WEZWWUZ4V1lNSzVnb1F5MnV1dGF0SUx6cTlKWFFGcnNVQnIwaTNNeENocGJwVUkwb1kzK3ZUTGxud0dXQ0xBWUl3ZXUxYnE3TjJ3b0ttOXFsd05jb0svNGNUaGlDUDVpVnJXdnIwbjJzLzYxK1puRVJwbUswVjQ2VjJBNmRCT2swTmE3SjhhbnpLM1VyaFphMkJ5aWpIdDBwL2tzOFBXMzRtSjhCb0RBWnpodG5WTS93QUVIeGRPa3BuN2NDYWdjS3Fyalc2T0hIc3FQR3kvN0kyUjlqeWdXRHhEYUZuSjJpVnkzSFRydlJoNGlqeGRFZUZwcjdQd2xkaHJhdlVxL3RZODBVNEt2RStlWG5IaHp4YnJZaXZtRXg2RWNwcUdxWmRXdU9yMURuRWF6QXVzNmxtOU5nZFBYV1l3OG8wV3lLZkkrdFgzWkZaZWsxWk5veXFoeFpwQTgvYjhYREJZM21YMjlvSkIwOTNWWDE1NUQ0TmI0bFQrZXIrTlBqWXc4Y1BVTTR2RTRPUzFZRFgyOFZZNVBiUy9Uc1Z3NitvSEVQblpYaXVUS3pnSWN3aUh4RFBPMTEyR2R5eDc2N0dyTlZxMkQxQTRuenNyeXF3azF1Rm5JR0g0YXZNQytMN09uVzc1UHBCS21uVlRrUFZuZEh4SzdjeExCeDZnblBNTm1KcXJ1WjluSSt6T3lQNVM3TTZ3d2JmRmwyRkp5ZjdmTXpxR2RUd1RtQVpnMDNJMmFXeFA2ZWZTQnNQalNWL2l3SWx0SE1XYWQwOUZGQnNJUlFQZUpvVkhTdVk5TC9SOURNeDVxd09mWVBtcjdyOFQvOFFBSXhFQUFnSUNBZ01CQUFNQkFBQUFBQUFBQUFFQ0VSQXdFaUFESVRGQUUwRlFZZi9hQUFnQkF3RUJQd0hjc1gvcnJaWXY5UjY2Sy9JK3RGRkZab3JLL0trVmlpaWlzdFlXcGExcWEvSlFsb3ZvOWEvQmZXV3RkRjQyT05ZUXRzdmd0U3o0NDJ5WG9uaVBlaXU2MUxQaStESllUcGllMS9OYXo0MzZ4SlljZlFuVEU3MW9aWlpaZmRaaDhHU0VzVGdSbFczaWNUaVVVVjFSWTVIaWZyRXZ1YUp3Rk5vNVNMWnlPU1BYWnNpOVY1OE9QNzZmUitMMmNCeFlreWppU2s0aThpL3Mva1J5L3dDSElja1hSRjNzaDlISVF1amZSc1lva29vcG9YTExnUSs3SUVoYWtobFdMb3l0bmpKZlJZV0tPSjd6V0dMRmtpOTBDUXNMcFJSWGZ5TDBLVk1UdmJINlNGaGRMTDZyUG1mckNkQ25lMzZzSjlyemViSk9pY3I2UmV5TEdKbDlhczRsRkRSWlo1SjlveXZjbUpsOUY3SWxFa05FcERmYUxvVHZYZVV4TVhTMmMyTmtwRGQ2RXhTdlhlVXhQdEowTjNyak12YW1KbDViSnkyM3N2Q1ltV2NpVXYyMldjczhCd2Y3MHl4ME5hSXhzNC9oaDhIaGRIMVF2b3NmLzhRQUlCRUFBZ0VGQUFNQkFRQUFBQUFBQUFBQUFSRUFBaEFnTUVBU0lWQXhBLy9hQUFnQkFnRUJQd0hnWGV1eFJaS0w2b2k3eG0rMG40aTRqaU5pM240QjVqcU9BdWVrNS9zSTZEaUxBeFFqdkJoRzF4eHh4NkJURGtERlBWbEVkQkdsUlJXT2ZsNmdPS2M4WW9vb29vUnNPMXgyOVdjRlVxOWJEbXNoa0lTOWxVRzAyVmxEdHFnMEU0bTRocGNJVzB3UTR2QjNOeFlodzBycGR4QmdSc0kzMGpLb0xsT0FHWmhDM0tMUW9Cb0loQzNrWkNMWFZRdVNrYlVOeWl1QjNLS3hubFBMdk1VRGowRXg4UDhBVDlnc1lOSnYvOFFBTGhBQUFRSUVCQVVFQVFVQkFBQUFBQUFBQVFBUkFoQWhNUklnTUVBaU1rRlJZUU5RY1pHQk0wS0NvckhCLzlvQUNBRUJBQVkvQXZicVZNcXl0dUtsVWs4ckozWFNWZHRWT1plRlF5cXV5c0ZadHU4bTZUdXFBbFZsekZYWmMyNHFGWlZWSVZWV2x5cXlxdUhaMXlWbFpXeTBRK1BZUnVxS3liSVIyOWdCMTNUUkJ0Z1VOWEYyV0xGVHRLaWNid25LOE83UHltQ2l4U2NLaWNhdHRYK1VqSmtTSk9OYXdWZ3VWY3FzclpvNGZLOGhNVThuN0ltSDhwb1M4UGxVZ0NyNlAwVlgwL1VINFYvdk9VeDV0V0lIcW5VVVhmSjRVSmhnSWh2RUZUMFU0RVFWUFVMOWltamhDcFQ0VjhROHJpaElYQ0lqK0Z5eGZTcS8waU1TcDA2aGVkUndzS0dTcWorSldWaytCV3FVOGR1aW91R0JWaC9xdVJjUUJYQ0dLdlFYMUNnMmJHSWNVSnVxUlY3R2JteWY5bis1Y1RTd0RxbWgxREladUtFRmNKaWgrQ3YxbzF4RXhmT1FReFgvQU5rVlJlZGdOTVNvMzBvaXk3Z3B4cWc1UGxWblpPVjVDYkZtRU1uQ1kwT3FDbW1KVVZaRk9PRXJCSFpYVkxUSnlDdGRURGtIVXpxRThGZkNyUk80WGxNbVRyQ01yaTZZOHcxN290a3JDbmdPRmM0WEZHaFZNbnpDSlBEc0w1YnlPaTRLODY5TXgwM0JUZXA5cSt1TWphdDloUk43R0dpQkI2cnZ2OGNSdmFWWVZaeG9WcEN1UWJGMkQ0ditLS3BrTklUL0FQL0VBQ2dRQVFBQ0FRUUNBUVVBQWdNQUFBQUFBQUVBRVNFUU1VRlJJR0Z4TUlHUm9iRkEwY0hoOGYvYUFBZ0JBUUFCUHlIVTBJUTE4SGdCTVNvWCtKdERhVmlKQkVpUVhBOFN4VHhJUWhDQzJWYXp0dlBZUjNBdExvaEEyUjcyWlp1Z2ptSmlDTUNFZDlLam9sK0pDRU5Zd25XREQ4d1ZwZnRMUG9IVXN6WlVQVnRIbXk2WTBIWnhFWkdKY0l1WmlvSXcwclFkTGw1OFNFSnhNMkNOMUZyTis1MGxIcWNtUVRISW54TWFWdHRGbmJzaHRzSDFIb285U3JjSDVsTG8zN0lURlJydXFpU3BWZlZCR0hNUUxZNFZZNWcwaHhoQzdZYXl0U3ZZTUpnZTVuVEYzd1JYWlBWUkRrcytadno5NGg3RXdvR1pXZ3d4akw4RFFORFFrQUlKcHpDekF5akxJVHhhRlhDNEJrdUNBcXdmbWRxZ2NrWmY5UmgwbXdUbjFMTHRvOVJJazJSM3ZTcGpVaERRbTJERCtwUU45cFlrTS95TmF2aUVJT1krSmdKazVnY0ZvbFluTjZqVmdOQXpLbmRNQWJ4ajFIZkxUSGVpUklKVngxSUlHcE1JRXF4ekU2MWNYUFJtV3NjVGZNUXFpVlpLeE9JUjdreHJGVER2TWpEbnFXMVNOVHdNclE3UXBoeVltZ2s1aVhLMFBFVGhpSHhOczh5OHZFZmFtR05ERU1USm04L0NZRENHMnpMU0dOcGNWNWlJOHBrSlVTSkdKS2IxTlpDRUFIdVgrM00rK2dqQmJ2QmdodkJDR0JjcHpLaVNoaHgrRFpzK0lTTXJRMUVJQVZEb1lvWEZ6WmR6T1NwQ0RTb2FIRDFIYlIwMnNzMUZaY3JRUzRrclFoRFMvUllibUFYaFZYdnpEb2JPNTJtVnM3d2hOOFFKY2JNRXlpMFdiWUxDR2lvN1RDY1J6R014SzFHbHZ2UXR0M2lFN2pnTzgvdlR1Qkdob0lNU3JtREdLTEZpanhMcjBxVkV4S29nZ3hLbFRuU2FmeUlsWXJVVVY3OXd5MStKM1ZMTjl4QmpmYlFORlpsVGlYbzZCaWJwbTNTL1V3SWtTSkUwTzJvMHA4REtFZDNpWnp1RnhTdHJaam1QKzRCcmJraHJtZ1F6bElIdlFKSE1ERXVvOVB4ZmlmREw4cEtzdTB5N2VIc3oyNXhxdXAwUzFNdVVDNHVURXUyNFpnQTlvYm1HR1lISmg2WFVRR0p4U0pTNGVTSCszcWY4QnduTkVOMmROWWNhTUU5UXJyRDl5NWN2V3BUT1BFczFJS2pRUDNNOWlzU3VYY0VzS1NEZFY3NE5ZWHdQVXpZdnVKVXoweW5leURFYm9QeE9OZlpWS3ljRm0vV1l0L0FSWE0rNUJQOEFmZ1pJcHppYngzYjVJSnJqbVNwVXFWcmVsYTNDbEpGMmpMaTRiMDJ1TEdyUmpCbzRIOVlkOU1RTnI4UStXWndEM1U5emxUTmZnSVliNTRnRVMrNmhDMEIzRlNRUHFDWkQyUisvQnl2V2lQSEdoNEE1NGhBNlRZZlltRFhVZHN3eFpqcDJ3Rzh4QUhMQXpaZ0R4TTZnT1dZbW9iUU9JMml0VFlVaFJrUnMydUoydnhCTE95bmM5RW9BSGZ2eXJ6S3UwNW5FYjc3bUI3bTJVR2grYk1UOW9qQVhGSDJpa1ZEYUtveE1GQlFJb0lIR1lDeUJBVjBSb2NuZ202Y3JkakwwR1hueHZXaEhaTVdIYmp1Szd2RVgvdU81dkVlNHNhNGxmTVFwVEVxN1RBTG5WQm1FK1NudU9jb0d3THJDTXZ6ZTRKZitYcGZuem96cmE0c2xsUVRaTHhVQWR2U0p2dWxCTVZGdUdIYktLVzRFa09XWXVYTHBWeHN1Tk5odk1FQ2c1VzlMWS9hUGIzKy9Hc2VERFFaMnltZEFCZzRDTEYzWUtqbk1iM2dLQytwc0VWOTkrSU45cWppM3NJMFZSektjckgxRG1aWUQyenJuaU9sN0p2TVBtdVRTcmxhc0l3MDVtTlh5U3EwSG1DcFVQZVl1L2FDMjFhUnNCbjFGdkU3UmxndnBKU09UaUJtYVBNM0JtUHVQVVRhSHBTWDRDbG9UNzRudnlORGZVYVJKUzJYSUhCNkxscU4weFV1WExCeE4wMlJKQnBmd21CU1R0ejBSRUZidkFyT2VaWmR2QTA2YzVsa3JQcDJKZ3NncENKVEJpRnVKMGNFRktoclF4RjlTdlpERHQ5NEtoMnhMMitCNGZoS2xyTWNqelBDMUdzaWJSaDNsWVZIY0lDOHdKQU8wZ0tycUdWZDRUTCtJMzBxOEFmVXMvVkZuRDgrSjRsSnZNa3g1Z1ppSVlxdjRpQnZ4QVY4U3FHeEg2bURkNG5qVXVwdGxzWUhxQlFYQk1FcGNBcVp0RE0xL2oyU3pVeEFJRStvdHczaUxMTG1jSGNiaFpDY0ZYc2lJMG4wcysvb3NzSlVUd0lEdXhKZ25GOU1SVE9IcEJPNEtEMzNFMXQyQlB0TDhoYmYra0FCU2V2SThueE5TWWJxaXI4WGNOa0lWOUUzRXQyNkFZQWFkYWN6K1VJbXdCZ2FmLzlvQURBTUJBQUlBQXdBQUFCQmlKMlJ1UWJDTFAvQlU5LzhBN0RxaWJDRHkvd0MwUjRUM3RwSG5BWHBEcDdYVUxsSTlzcE90M0liNGVuc1VYc056dGhOQnhFbzljOUdCMnNvWk1oR04zRzVjRVhtbDNWSk5vb2RpMkxUbEgvYktzVko5a1pONDh3MXMzejFlQldESkJKanoxajFBSzJRTVUyTG9JRjZ5MERaQVhIVHV0MEJCSUV6N1ZqaW5FbDlNTlNJUkpQYWo2Z0tGc3N0VmlPSWV0Q3lHYjNaRUFKU3dhbEtldE50SWZuZ0xiOFZuRXF0K2xBRVdidzc0M1NmOE50OVdrcHZtZktLbWtmMHlNdkQ0MGlJSitNbUVncFdMemFQVWpUbG9aMFN0VEFXUUpNdW9TZmtnV3pBRVE4SDN4TGNBWFdzeGY0cjFtcC8wK2cyZWxka2dkanRYWGI2cVF2MjArTmdod21DWHg4QVI4RXgraEpBSkNQaWxBWWJmVkFQVFJJSUpOV1ovTTdWVEpBS0tZWkpCR0hzais0LzA0Sk1YWndKSklWMnhOSUhDSkFNZGpwSUpCQnNZSTdYVUlJSnREd0FCQUlOU0Rld01JQkpCTjRCSUFCUHZ4alRBSkFCQklnRUJJQkpObHgxcnhCQUJJb01BQkF0c3R0UkVHSUJJSHNrbGtvTk50eHFZUXFyVGNmL0VBQjhSQVFFQkFBSURBUUVCQVFBQUFBQUFBQUVBRVJBaElEQXhRVkZoUVAvYUFBZ0JBd0VCUHhEbmZFaVk0MitwbVlySEJ6bkdlczhBNFk0WWJiT0NJanhmU2VBNE9ObDRHMkcyMlBNZlFSeVJOc3Zoa0ZsbG5Bd3g3Q09TTHBiSElRY1pKWnlmSWZKYmZBaURqT0NXeEhCRU9VbjhzNUhQM2o0NWVIblRnaUk4R09NdDRnYll5UlBBRm5CblV2Um5JczRPR3lDeUNPRWNMYkx3bWNKdkJtTWVranhZaU5jaFBEQ2Z0L3M2dHRudUdNZWs4V25CQkJGdHN0c3N4d0xZK3cvWStlazhTRFp2dU9ROFdZZURnSWJQampmSWp3ZGwvSm54ZHI1TFNEcVBGMU1USHdKK1E0NlBKUEEvSTVIdlYxazBrbzA2NTNrZUVnNElQVUo0RTZzTDA5c1g1d2JxZkt5YVcyMjIydzhNSFhMNGd0aisyT0cybHBiUGdma3kvRVFPRE9yVHNtZU1Pbk84SEIxYndTNlhiazNidFdOMzRNWDRGdWhqdTdZZzRRem5aZEJDZmtmempQMGgvdDIrTjhpempMQXRlbmg0T0Y0L0o2Wi9tVmVGaWs5TU93Z25xekdRWmtGcTZiVDJYK3lRL3dDWFFmbGo2UXZ3c3hQNlNDN05MRnpzdk92aXNuVm5CUTlTeDFkbXozSjNEd0tINjJlQ2FYOVpiQllrMkR5ZlNlNzZsMUREMXhrNG4rd3M0ekRGOVpiSUhCZG5yalRBTE9IMC9UeU52aU9EK2lEOVdXRURiYjZ2aTNQdGoreUEyeEIvWTVmUzhiNmx3b2kyeHdaOG43SkYxL0pCL0lqZDNFSTA4SDByT0Z4QzJHMyszU1ZEZnQ5bHVsa2w4WER2U0tEdkw2RHAyMkJ5MGg0THV4NGIxS3hCTFNJSThDZE1LVyt2OHI2NGlFY2JaRnN1djNpaHcrSk16eEZQbGs3NWZRT051a2RROFJEaldYeHNETzdNVUVBWkl2bG9nK09IMG1KaDVWVzhHL2xsRnU5dGpPdlFvMlQxays4WWNZbGtSWmxnMjJlbzY3dE9teDZobnV5VTR3UTd4bk05ZTNYckhPRzh5YzZ1dGxuL0FFbHFIYXRXRGVvMUFrVDc2c2YrSkVoeWFEKzJsaDZQcXMrNG5nRHcvdDh6UGdQbkRmTWFBT3VQLzhRQUh4RUJBUUVBQWdNQkFRRUJBQUFBQUFBQUFRQVJFQ0FoTURGQlVXRkEvOW9BQ0FFQ0FRRS9FT3J5ekU4QlBCcTNKNjdQdGVObDRKNEpOc2NCSjJmVzlIcUpsa2xsamFtUHZlV1lzZzZMYmJiYndrblhQU3k4TXcyT3A2YmJiZlpQYXpid3c2TXN1Y050M3F6OTliUFVPcHN0dHNOdHR2REpQSjJabDZIM29zK1dlTTRaWkR5TitUeWV3T0dXWHFFbG5ESkxPSDB2WWVPR2VoQkZsbG5HU1JQTzlucTNJZDRaNkVSeTIyOFAzMUhvWENDK1k4TjlobmM1WjQyWHpQVGVtMjlEWkJGbUpONExJTElKNGVIaG4wYjFPeThHeWtOZ3haWjBmdkxaTmpZMlA4c3M3UFFMOW1PQUV2amx0c3ZaNFF0RnUzWXNXbHBhY3RqZm93eWZGdlQ4MlJKRUoxOGJDOC90dHRzOFpyT2VlanpuSGxmNmdISkxMTExKTXRFMCsyazQzejloZ1RSTnovWVA5akRlUmpadmZNNi9IUTR5U3pHT01nbjhFSVo4dm1TSmxvSjl5WVBZOGpvV1RFdmtNVDUrUXdud3kyeE40WDZQYStKNTJHMlF5VGdzemdTV29HLzFMWk9UMVBpZWc4TGVTSUxPWTNtMXRreVR3OW8wNENlZDRxc0hCQkxlSjlpT3ZBQ2VaNi95K01rOE04RVcyMjJwWWJURE9YeWVaaDluNlJKSk04QlpPOUdQdllRYmQ2M2xKbmdoaFAyL3hZMlhsdFdBRHNSSkY1NFBTbkxHWnp0dHRzYVlBOUFzNjlhYzV5Wlo0a2tocmtZUFVtK0w2Q3g5VHl5UTI4SG5nZldleXl5eVl6TE9JTW4yYjc4T1FKWk9ZREhuMWFmOFdqOFo4d0xXK0xDTmVqRC9BSWJKUEMrcCtYMWZVY0h5L094NC84UUFKeEFCQUFJQ0FnSUNBZ0lEQVFFQUFBQUFBUUFSSVRGQlVSQmhjWkdCb2JIUklNSGg4ZkQvMmdBSUFRRUFBVDhRdjNMOXkrSW1EQkJENmdjQnVhV2RhWDRtT3FoU1h3VFV0YTVNVmgwWmpGRENRcS9IVUxPUkthcDFMT0xibVFCbWpjdnNnM3JFUTFlZkYrQjhOdkU1bUVTWUF1WEZTcHVGY1I4eC93Q2xBVDFLMStaWVhCcXR3V1FPUXpLeExPbEVmUHZFRmhLUjVnaW1aZ00zQ05QaWNuaUpUNmpudUJKVmwxbVdCclhpNE1IeDNQRTRpOEU3Q1lTQUVDelhNY2JGM0ZLU0hEWDZnQkZsZ3RBTVN0NE5aRzdsOENjZ1lyOHhZVU9ZV01KU3hhNGZ6Qk9iVkRpS2lIQTlUS3htSnd6WFVCY0tTTmJ1T3BZM0Z4TktpdmpMZkJEVTNtL2lOUUdPZVcyTllPNFdDZk5ENGpJbER1aXI4ek8za0xLUG9saTBZb1ZIOXhkdzBjcWxJa0E2T1B1QkNBRmhrZnB4TXN4clZpL3VQdzViZ2h0VVUwRldlNmxUVFY2MWNvR3F0TjhRbUF1RUZ4SEl3RXpGaTJ6bVg0SWVBZkJYUVN5RmIwR296VVVHeStPb1pDWG92WHhLVzIwT1lSbVhxelFlb0ZtbzJwaVZBU00vajVsL2pOTnlnQlQvQU9SbjVsQTNDU2pEZ1NIR0NjMHFIVUNQY0VLYjVQOEFVeUpoVG51VW9oakFYVXN2R1NLa01sd1UxdGxuQkRoek1kK0NETUhndWlaVEdhWWVyM0tGYmJqUHVMdEJXNmdDd0MwcHpIQUhWQTVDQWhHMEY2K2pFbzA2Y1BVcEk2aXRZakRzdWtBeFJXTFpZVVUza04vcUJBWlBTNXRWVzZLaEN3S0QwaXpDMHY4QTFBdFl6VUduc3owU3FBc3BxR3FPWW9OTW9OejhJUUxnaGhvbDJ3WWh5cU91bDNqMmhKS3JGRDFYL2tKMW9mVE1WSEN4ZlJEV05ZOS9jS3FkQ0tpZndJT1VvWnBxWDJBZEt4TkdEdEtrWmJ5MUdsSk8xbU1RcU9uVkF6RmllN3ovQVBlNGxyK0Q2Z3ZUOHh5eXlWRExEREd3OVJVNWwrdkcwd2VQUkNITVFuYkxqWUZIcU8zQmtWMEJIYTAySGx2Zjdna0xwa0k0UXdIUEVvRXdFQ0JWdXRTK1NrNmxRQVgrSXRmWmlFMExPSU5IQXNJdFRSa1dsd2pPWTQ3QWlCYmtLUUFmY1VWTndBbDBBd1NxVENzWEREd0lZRkUzdUJYaWd5UzhRVXRYb0F2cnVOSk1JTVl4RklLd0FJbHdWS0d0UTZ5cnpLemQ3Nmd3QUxoaG9ZbHc3ODlwUVVuVnZFSTBVTXF3S2txajl4U2FQcXBhMnp0THdicytTVlVja3lscEMxS2lsZUIrQk13OEJuVVhnOG0zOVFUV2hlNHJYQ0x5cmNHenNZTWNRVVl6V1E3bWdaWVBSQkg3UUZHc1RKZGZ1RVFheEszNGppek1zQUUrSUd0VEIwUkJWWWpGaTZsS20yeEQ5Sk1VOXd5cEJCcFdQQVBBM0JIUkxYd0N0RzVYU2JUU3g4WVdiZ3FWTnEvMUFBb2JxdnpEb0JUSC9ZVjRnVFllSWFtSVlvSmRNU283RFBxWXFaTHhVb3FPeWhWTm1TNHJ1S29xbU5VekFCdXppSVlSbG1SVXI4QThINEJtVXMwUWUrSU9XRGFNQkRhOG0xemNNTTFwczU0Z2dhenV1SmtjbnVDMzFDS2NSQlVuRmN4UXFhVlNzWGNBTnloYVpkc1krSXIyZ2FheEpWOUk3cGVXVUZoVEhrd1VoOGZ5aEFWRGNFQ3BZWmgzcmdJNzBQNlNsTldjZFJGRElBamZhRGtjQ1dsYk1uSTlSMVE3aDZtUzNEQWlmWkw2cmxrSDFFdTY0bHI2Z1cxRUNVckV1aEs5d00xMHlqK0l3Q2htaHhNRHhMc1BCeGxRTWVCTDRqS3grWmUrS1lNM0FMQXdIQ0JPbW1LTWl2SnhEYk5EVDZmbVo4enZveEtrRnJFejRDRk1pVXVZQUZRRjBJMTFIbU40Z1dpVUxNVGJHcGdaQmVvQ3VYMUZXSkVHa25wajlURHFVaWszNXVKdXZMakRBb3UzTVVvWlZQNGdVRkEyd3Bxd3BKWENkcDA3aXBtMmtjSkdnYUc0SURjRnBIZGZFUnI4SjF4Q1dtNHFPYWhBTHVvaEpBUjFEWXNBTjRZalAvV1hjSjZuSXVpR3g4TWVNdnpGbVMrUEE3Z00rSUJsQ0tGSDhzdW0wS1BTZjhpQVlSbHNDTjFCVjUvTXJCbjlKWWk1d1Y2NGdDVTZGVUxHejZqOFhHUFplOE9KbW85WlA1WmtrSFozQW1aT1ZEOVFveEwza2Z1Yy9leGdMUmZNdDNFZ0JNd0dtYVJ4RGVPTFJyU3cvRHVOR1hnSmRrUWZGczNBa3d3UVlscnVPcFlNSjcxdUlvMFVwTFpkcGI5ZnFIQUVjcWxpZnhBYTVabTRkZGg0Yk9TRHNJRnRObUI3YitvL09nQlFScmVGZ0xVd1hHN1B0TklJclJpVFdid3FuMUEraE5CdCs0UDd4cGdzN2VHZUYxZi9BS2l1UDRmMHloS0NndjhBY1NwM2dTem9sUW9LQXUvbVVlSWRDQ0dLSGN0cXBucVdxdEUyZUMwUzVjUmtpU3E0SWowN2hIVXNkYjZnaEI5VlBtNGowOXdBdERJa0ZDeXJmTi8weFNxNk4xdUpoRDJJd21iNGpOcHFua2diRDZHamxsWHFpaGlqdVhITEpaQ1AyVXR0VlpUZ1dTcTUxNlJ3SW9LUm5JU21wRmk2UHFDU2RxcnZHcS9MVVFzeGNBQ05MS255aVltL2hyanhiSmdhamJVMlc4d0NDWnJEdzQvdUlHbFlZM2JNSldvUmwrNVpUWkM3N1dhQzdFUFN2M0FxTnhnZjRaUndWTnNIM0U3Y1JLQ0VHOWFsUHMrdWlWOEtFdlp1VWFRdVV3QmpxT2hScXFXNG5ZaHhoVlRCWk0rdElMZVorZVB6RHBTc3F5dTFnVEJ4Q2sxS0ltSlR3Rk55NG1vejlFWlNCcWhJQzVaeXozVVVVZ3FoVGMxRit6QVlXMVV6bDRobStvSktBM2wrNXNpckZZUHhkUTF0Tk5zZlUyT1VPODkwVVhLVWtEUkU0ZHRTL1N4RVE5a0gyMldKVGtmOWJnZHNuSm1OYmtXaUJ6c0tIUDU2SXhWdDJYOEhvbWtJdkVvWXdjK0tsNXpHek5rWmJpVi9DeHQwNVNVcTZYa2J6WDlRUnVMSDl3d2RoYXdtOGlaREx4TUJVcjVsRXRVRGZKMFM5a1RSRm1YUHFYMjhkWUhNUnROdFN4Mkd3NytTR1lEckQrS21YU0JEQy9MaVdHMkUzZnVDN1J5Y256SENYblBoZUl0NWc0OFhITVlESGhhWFEvRE9xTzROeldjNTl3eTRwZjFhNmg0T2g3RU9jalJlcHRGdWU4MVZHWlpHdnBnWkEvUkhEcWhEbXY4QWtMRG9aaXdvY3kydGdYY2FvbXFhcnVWNDVlNEZtOGZNNTFHUFJHaWs0WWUrZHdZYkYwQmNmQ1htVWZFc2dLVnFZRE0vTWQ3aHJ3MFk2akRoek16Q0FIdlVaazBNVGl0R2U0RGFzb0hvbWFSVnYyRUVFNE1ZNWcweGVWV3AzUk5vcTJpeW9OeDlpTjFHUTlrcERCYjJmOWlFVW9lVWowdCtZN0dwbnRjeVRoamtJQnVNZ3BhaDZsTFBtR0NMRkZCc2xVRUF1emNzclU2aU5IZC9FYnJFdjU4RjRQWkhCQnFDZWV5ZGR6UmFwekVJSnE4eXBPZUFZY0FHdGNYcytJOXppaHZ1QXVGT2VqTVFQQlRRbFZBM215SHBoSVBLd2hmVHFEckRzMS9VV2pvR241Z1JTMXdHL3dCekVJQnIvYUNaa0hpY29KbU50OEVHMlg3aGxqWmN3U0MxQi82RXZGU2k5eEN2RGtpb2kzRlh5OEpUR1JaTlRCTnV5SEQxN2xvZGZ1SUNVV1Y3aldiVXgzRFdsZXkvMUJxVmg3ZFJHVG11WXNpZm9ZcE82V0loMGFoVE1ERUZGZjhBV0VnSmt1eUxpRzFPUCs1aXFlM2d3UXpOSVJGUlMwRGtoWUQ5YkgzTHRnMDVsRXV5R0pjY01zamttU05hTkRDY3hFZHBLOUx2MnhWQWVWNWdCVVF6UjY0Z2tNQzI5eGpuVmJtR2x2SFpHNFhUYU13WVk1eERkazBRUmVqUys0eVN3Y1M4ZUhMWGdNc1lNQUtEbGFmbUFscDI3Sm9NZjRadU1WbmhQQ1pOUWg2NWZYTUphVnE1bVZFRjFmNGdYSWkzdXBRR3RhSVVLbDliams4MTQ0eEJqUE96R0pWUUxqTGJFNnVMdDl2Y1d6M0ZhaG4vQUFHWGZnNEpjcVdSaTlhZnVBaEVISkZzdGxzdUtETGlZaVdSbjZpaHh1ZlRMYVZxOVhtWHdrTHFyL3FHRmhudVpHeDRPV0pITkZid3hUaFV4Q1UwMnZ1TzFaeDR2eGN0OERVdWFsd0VBSWUzL0ZVd2Y4RVFYQ0tkS2dUWktVYW90RUlvdmRLYmt0cngxTFpPbHZXY3drdVZWS2R4MFg0anpHN21ZTDR2emZpL2N2M005LzRtNXpEd0ZHWWw3ZzJ5bzFXRThKVmpTUjNkL01jcXB3cmlBQlY2U3lNdnRodUpBdEF0UmswSE1yeUp4VVJVNi84QVRFMUJPRWx2SkJ0aC9pUWZWeWx4OUpjZlBVNmdodGlEV1pmd1FKS0pyTXIxNXVDNDFsUGd1SVhoSzd4R1B0V2d1NC8wa0ZLQjZJUWFBNHhBUktZSmtoWUovd0RSRnB5cjhyOG1vZFFNcldmUWxJV0FYeDhjZjRuZmdodUUyanVFNW1rWjRHbUZNdVl0Q0M3RlptWnVjd2dBQmlEMVAyQ0MzYlk1WnN3V3FOMmhWeE56bjRSMlIvbEFMRUU3UUdCRjBrQUFCV2c4Zi8vWgpFTkQ6VkNBUkQ=

Large encodings like this tend to break certain things, including downloading the vCard on iPhone… but I wanted my photo to be nice :slight_smile:

2 Likes

Uhh @amal proved up to 4K now IIUC. :smiley:

Whoa, amazing!
Tbh I do not like all the googleapis.com, as this wants to be privacy friendly.
But the page looks much better on Desktop and mobile now <3
That’s just bootstrap, right? I think we might steal that :stuck_out_tongue:

Also, wow, you used integrity and instantly addressed my main concern here :slight_smile:

Dunno about that. How does that work without script-src ‘unsafe-inline’ and ‘unsafe-eval’ in the CSP?
IIRC jquery often requires one of those, which I really wanna avoid. I really need to craft a CSP now…

Design away! The shortening of URLs is a topic, yes. Partly implemented on amals version right now. I have some ideas for saving bytes (better encoding than b64, compression, cutting redundant data i.e. BEGIN:VCARD), but that’s not a high prio right now. You can either save it on your NExT easily if you don’t have an image, or you can use the Apex and have an image.

Yeah wow… I’ll see if I can borrow an iPhone to test this properly. There’s a slightly different way we could make the download work, that might help.

These calls to googleapis.com were just to keep the display font the same across devices (and it’s my standard boilerplate layout) but easy enough to take out. Done.

I must be tired as I was looking at “integrity” and I was all “how does @yeka know I code with moral fortitude… weird”. Hehe. But yes, using the integrity attribute does solve the external resource security issues but in consideration of not using external resources:

  • Bootstrap CSS & JS files can be self-hosted (but are linking to a CDN for ease of use), and
  • Bootstrap Icons can actually be included individually as inline SVG (instead of loading the whole icon library but loading the whole library is easier when you aren’t sure which icons will be used), and
  • jQuery library has been removed (as it wasn’t being used yet anyway) but can also be self-hosted.

I believe (although I haven’t worked with CSP extensively) that jQuery only has a few issues that can be worked around (and would generally be considered good form for jQuery anyway). https://content-security-policy.com/examples/jquery/ For instance, using $(selector).click(doSomething); vs not using $(selector).attr('onclick', 'doSomething()');, which addresses ‘unsafe-inline’.

  • Header Bar: Added navigation icons to menu and added spacing and border to non-active pages (to help make the icons visually link with the menu text). Made dngr.us/vcf slightly larger to make the menu font size. Made the header sticky on Desktop (but not on mobile). This is mainly visible on the FAQ page.
  • Create page: Made the ‘Enter Contact Info’ and ‘Select .vcard’ side-by-side on Desktop. I’d also probably get rid of the two buttons and turn them into one button but that would require editing the JS (which gets away from changing just the design for now).
  • 1.html: Center and stack buttons and ‘or’ on mobile. (This probably doesn’t matter now considering @amal’s changes already.)
  • FAQ page: TODO: Make FAQ questions into an open accordion or stacked cards.
1 Like

This is great!!

CSP wise we probably want to aim for something like this:
default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self' https://cdn.jsdelivr.net; font-src https://cdn.jsdelivr.net
It can be added to the HTML like this as first thing in the <head>:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self' https://cdn.jsdelivr.net; font-src https://cdn.jsdelivr.net" />
but in the long run we want it as a header (in theory it’s more secure for various reasons).
This currently only blocks 2 lines of CSS you added (assuming we host the JS). (Why is CSS dangerous?)

We should think about hardening the CSP further then, i.e. hashes.
As you said, hosting the styles ourselves will make it more private too.

(Great moment to push Decentraleyes, a browser extension to load such libraries locally to not get tracked by “free” CDNs)

One thing I noticed, your website link in the footer doesn’t work.
Apart from that, I’m still amazed :smiley:

Is it possible to use a data url with the chip? I just write one to a tag using NFC Tools but it gives an error while writing

Instead of a URL like http:///blah you can go to data:text/html,<h1>Hello</h1> which is sometimes used for embedding images into the actual html body. I don’t know if it’s possible to ‘open a webpage’ with that as the contents though

i wish it was. No it’s not. That’s why we have to use location.hash on a https URL, it’s the only way.
See linked the posts above for detailed discussions.

1 Like

I was able to apply the CSP (using the meta header) and clean up the inline CSS. I also went ahead and swapped the icons to SVG and removed the Bootstrap Icon library (and removed the CDN reference in the CSP for the icon font).

Updated my link in the footer. It’s a reminder that I need to get SSL setup on that server.

1 Like

New UI by @comter deployed!!!

This looks much cleaner and is responsive :slight_smile:

This is basically a complete rewrite of the frontend and even has a <meta> based Content-Security-Policy.
Thank you @comter! <3

4 Likes

@yeka (especially) and @comter - you guys are legends! Absolutely brilliant solution and perfectly implemented.

Are we good to use it for ourselves? As you say, the source is apparent as it’s available in browser, but that doesn’t necessarily mean that it’s open source or have some Creative Commons licence.

Anyway that we can contribute some beer tokens for you both?

2 Likes

If you want to throw a few drinks my way, there is a Ko-fi button on Comter.Codes. Let me know if there are any features you’d like to see implemented. My TODO list for this project currently includes rewriting save.js in jQuery and simplifying the UI/UX when creating a link.

As for the license, we had talked about Creative Commons (CC BY-NC-SA) or Public Domain (Unlicense) but hadn’t decided on one or the other. Either one of those would still allow you to make a copy so certainly have at it.