Repository
Repo: https://github.com/MattyIce/steem-keychain
PR: https://github.com/MattyIce/steem-keychain/pull/102
Context
Most of you must already know and use Steem Keychain extension for Chrome desktop browser, if not then I recommend you to give it a go. Even https://steemit.com is now supporting this extension for authentication your session on their website.
What Steem Keychain does is allow you to store your Private Keys inside the browser (AES encrypted) and will sign and broadcast transactions on behalf of the websites supporting it. What this means is your Private Keys will never leave your browser, the Dapps will not need to know about them. This is, thus, much safer.
For more details, please read the following posts:
- Hate putting private keys into websites? Introducing Steem Keychain!
- Steemit's Security Values & How Steem Keychain Can Help
New Features
In the following issue raised on Steem Keychain GitHub repository Allow Steem Keychain to be triggered by a click on a Steem Connect link #41, I've suggested that the extension should parse the content of the current page and see if there are any Steem Connects links and divert the link into a Steem Keychain event instead. For example, it would be nice when someone clicks on a SteemConnect transfer link, the extension prevents the browser from opening a new tab to SteemConnect but, instead, open a Steem Keychain popup with all the data pre-filled in the form.
Wouldn't that be nice? Well it will be soon possible, as my pull request has just been approved and merged.
On the following subscription page to @steemsql, you can see the "Click here to execute the transfer via Steem-Connect" and the URL shown at the bottom confirms that this is a SteemConnect link:
https://steemsql.com/daily-subscription/
Now if I click on that link, my local development version of Steem Keychain will Keychainify the link and this is what happened when I click on the link:
Tada!
Now all Steem Connect links are even safer than they were before 😉
Roadmap
Due to technical reasons in the implementation of Steem Keychain, Keychainify currently only supports transfer links. More details on the following GitHub issue: Allow username selection for delegations and witness vote requests #101. Once this issue and @eonwarped's Add username choice for sign buffer requests #92 are solved, then I will be able to also support delegation and witness vote links. But I think, transfer links are the most important ones so for now it's good enough.
Technical talks
This is a #development post so lets talk coding a little bit.
Let start with the simple changes. On @yabapmatt and @stoodkev's request, I've added a config settings in the extension so users can toggle the feature, this was obtained by simply adding some little HTML code into the popup file:
This gives us this:
This will save the settings in the extension's local storage as seen in the code above.
The more interesting bit is the content script. I've used a Mutation Observer, a Javascript feature that is not often used but that is very useful for extension such as my Steemed Phish which needs to parse the content every time something changes on the page (lazy loading of comments for example). The Mutation Observer allows me to only trigger my event handler when it is needed instead of executing it at regular set interval.
The Mutation Observer handler will parse all anchor in the HTML source of the page and will try to parse any URL from steemconnect.com, it will also add an HTML class named steem-keychain-checkedso that it will ignore links that were already processed in the past.
The convertSteemConnectURL function calls the getVarsFromURlfunction to parse the parameters from the Steem Connect URL.
Next step is to decide which Steem Keychain event to emit, so here is my switch(true) block.
WTF is switch(true) will you be asking 😅. Usually, we use the switch statement with a variable and we check if it matches a certain value. Here I'm passing true as the switch value and I will check any statement that will be true, in this case, I'm checking if the URL contains steemconnect.com/sign/transfer which means this is a transfer link from Steem Connect. I find switch/case cleaner and more readable than a succession of if/else blocks.
Once a transfer link identified, we will dispatch a request to Steem Keychain like this:
The code is already prepared for delegations and witness votes, but it has been disabled and will forward to Steem Connect in the mean time:
I'm excited to see this pull request merged and I'm looking forward to see the new version of the extension released to the public.
Thank you for your contribution. A great post with all the details as well as a nice addition to an awesome extension. I agree with you once you add delegation and witness vote links then you do not need steem-connect and users can fully rely on KeyChainify.
I did not know about Mutation Observer, might be because "a Javascript feature that is not often used", but once people will know its importance might be it will be used often.
The code is of high quality and it follows all best practices.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @codingdefined! Keep up the good work!
That is an unbelievably gooood PR! Can't wait for implementation.
Great work! Once your used to Keychain Steem Connect is a pain and feels insecure.
Posted using Partiko iOS
Cool that would make splinterlands slightly less confusing 😆 just as one use case or maybe just in my case I can log in with keychain but purchases want steemconnect (or at least did on the weekend when I bought cards).
Posted using Partiko iOS
They could also update their code to detect Keychain and allow the purchase with it or else fallback to Steem Connect. But, yes, in this case this new feature might help it depends how Spliterland has implemented the Steem Connect, ie: as a link or an button with an internal logic, in which case this change wouldn't be able to capture.
Hi @quochuy!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hi, @quochuy!
You just got a 0.64% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
Hey, @quochuy!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Excellent idea - I have been holding off from integrating Keychain into my project for various reasons - but this changes my thinking a bit. It would be great to have this pick up all Steem functions, including posting comments and making votes :).. One issue I see though is that you are over-riding the handler of the links that use SC commands and I'm pretty sure some of my custom code has other things being triggered from that same event - so it will be complicated for me no matter how I go about it.
Do you mean that you also add a “click” event listener on SC anchors and Keychainify will prevent you from triggering other events? Maybe I can remove the stopPropagation().
Posted using Partiko iOS
Steem Keychain already support posting comments and making votes. Are you suggesting intercepting posting and votes links from SC?
Posted using Partiko iOS
Yes - so that keychain handles all SC events automatically. :)
Yea that is possible but the way Keychain is currently implemented prevents me from doing this for other SC events. It does not allow account selection for those events and requires an account being defined and passed into the event being dispatched. Once this is solved, I will be able to cover more SC events.
Posted using Partiko iOS