Is 2FA using SMS Secure?

In case you were still in doubt after this SIM port horror story from back in May:

  • We examined the authentication procedures used by five prepaid wireless carriers when a customer attempts to change their SIM card, or SIM swap.
  • We found that all five carriers use insecure authentication challenges that can easily be subverted by attackers.
  • We reverse-engineered the authentication policies of over 140 websites that offer SMS-based authentication, and rated the vulnerability level of users of each website to a SIM swap attack.
  • We found 17 websites on which user accounts can be compromised based on a SIM swap alone.

Is SMS 2FA Secure? →

πŸ” Do note that 2FA using an Authenticator App/Device – I use Google Authenticator – to get a TOTP still is secure. The problem with SMS is the carriers that swap your phone number to another SIM without properly verifying things.

The Case for Web Components

With the release of β€œEdgium”, all major browsers now support Web Components.

Perfect time to link to this by Viljami Salminen in which he makes the case for Web Components:

We couldn’t just choose [a framework] because the different tech stacks were picked by different teams (or even different sub-companies) for different reasons and we would have never succeeded if we would have tried to force everyone to use a specific technology like React.

Instead, we had the urge to create a technology-agnostic instead of technology-specific system. A system that is based on Web Standards and would survive the births and deaths of JavaScript frameworks.

I’m very curious to see how Stencil wil fare from all this.

Why We Use Web Components →

πŸ’‘ Over at CSS Tricks you can find a solid introduction to Web Components, along with this recent one on the various current (and future) styling options for Web Components.

Debunking the Myth: Accessibility and React

Mark Steadman from Deque:

React can be an accessible application framework with the right knowledge and the right know-how. The stigma that it is not an accessible framework is simply not true. It has some of the best built-in accessibility functionality there is out there, and a large community of accessibility advocates that are creating content that is easily consumable in your application.

As Chris Coyier said it:

React didn’t use a <div> for a <button>, you did. React didn’t force extra markup all over the page when you decided to not use a Fragment. React didn’t forget to change the title of the page because that was something you neglected.

Yes! Yes! Yes! … A thousand times YES!

I see many (new) devs enter the JS game to just start throwing things around, totally unaware of (or even worse: neglecting) the foundation layers which JS enriches: HTML and CSS. It all starts with HTML and semantics β€” many unfortunately tend to forget this.

With a huge chance of sounding like a skipping record regarding this: go read Jeremy Keith’s post β€œRobustness and least power”. In said post he quotes Derek Featherstone who said:

In the web front-end stack β€” HTML, CSS, JS, and ARIA β€” if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works.

Data attributes & progressive enhancement by Derek Featherstone

Embrace the platform, folks.

Debunking the Myth: Accessibility and React →

Chromium-based Edge released

Two days ago, Microsoft released their new Edge browser β€” the one based on Chromium. Apart from a huge change in web features support it also pushes its privacy features – the new “Browser War” – forward.

With this release the version numbering also jumped from 18 to the Chromium version number it is based upon (79 at the time of writing).

Available on macOS, Windows, iOS, and Android.

Download New Microsoft Edge Browser →

ES-Everything: an ECMA Explainer

Matthew Gerstman explaining a lot of terms that evolve around JavaScript: ECMA, TC39, Babel, Polyfills, …

So you Google how to make your app work in IE 10, or 11, or whatever. You’re quickly flooded with acronyms and terms you’ve never heard before ES5, ES6, ESNext, ES2020, TC39, ECMA. What’s a transpiler? People are debating about polyfills and ponyfills; is there a difference?

If you’re overwhelmed, that’s okay, it’s a lot. This article will attempt to cover the entire ecosystem around shipping new-ish JavaScript to older browsers and how the community decides what features get added to JavaScript in the first place; let’s dive in.

ES-Everything: an ECMA Explainer →

Test an IMAP connection with cURL

Today I needed to debug an IMAP problem. I got reports from a user (whose password I recently rotated) that Outlook wouldn’t connect, even though they entered the correct new password. The connection to the server was made, but the login attempt always failed.

As I didn’t want to add the account to my local mail client I resorted to the almighty curl to test the connection. Below is how I did that.

🀬 To jump ahead: Eventually it turned out that the newly entered password in Outlook was correct but that Outlook basically ignores it. The correct way to change a password in Outlook is to go to the Control Panel instead, and change it from there (in a window that is basically the same as Outlook’s). Makes sense … NOT!

~

Depending of whether you’re using a secured connection or not, use one of these:

After successfully logging in, you should see output similar to this:

Click to expand
*   Trying XXX.XXX.XXX.XXX...
* TCP_NODELAY set
* Connected to domain.tld (XXX.XXX.XXX.XXX) port 993 (#0)
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
* Server certificate:
*  subject: OU=Domain Control Validated; OU=PositiveSSL; CN=domain.tld
*  start date: Sep  4 00:00:00 2019 GMT
*  expire date: Sep  3 23:59:59 2020 GMT
*  subjectAltName: host "domain.tld" matched cert's "domain.tld"
*  issuer: C=US; ST=TX; L=Houston; O=cPanel, Inc.; CN=cPanel, Inc. Certification Authority
*  SSL certificate verify ok.
< * OK [CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE NAMESPACE LITERAL+ AUTH=PLAIN AUTH=LOGIN] Dovecot ready.
> A001 CAPABILITY
< * CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE NAMESPACE LITERAL+ AUTH=PLAIN AUTH=LOGIN
< A001 OK Pre-login capabilities listed, post-login capabilities have more.
> A002 AUTHENTICATE PLAIN dXNlcm5hbWU6cGFzc3dvcmQ=
< * CAPABILITY IMAP4rev1 SASL-IR LOGIN-REFERRALS ID ENABLE IDLE SORT SORT=DISPLAY THREAD=REFERENCES THREAD=REFS THREAD=ORDEREDSUBJECT MULTIAPPEND URL-PARTIAL CATENATE UNSELECT CHILDREN NAMESPACE UIDPLUS LIST-EXTENDED I18NLEVEL=1 CONDSTORE QRESYNC ESEARCH ESORT SEARCHRES WITHIN CONTEXT=SEARCH LIST-STATUS BINARY MOVE SNIPPET=FUZZY PREVIEW=FUZZY NAMESPACE LITERAL+ NOTIFY SPECIAL-USE COMPRESS=DEFLATE QUOTA
< A002 OK Logged in
> A003 SELECT INBOX
< * FLAGS (\Answered \Flagged \Deleted \Seen \Draft)
< * OK [PERMANENTFLAGS (\Answered \Flagged \Deleted \Seen \Draft \*)] Flags permitted.
< * 3270 EXISTS
< * 0 RECENT
< * OK [UNSEEN 3256] First unseen.
< * OK [UIDVALIDITY 1325596071] UIDs valid
< * OK [UIDNEXT 67684] Predicted next UID
< * OK [HIGHESTMODSEQ 68768] Highest
< A003 OK [READ-WRITE] Select completed (0.074 + 0.000 + 0.073 secs).
> A004 SEARCH NEW
< * SEARCH
* SEARCH
< A004 OK Search completed (0.009 + 0.000 + 0.008 secs).
* Connection #0 to host domain.tld left intact
> A005 LOGOUT
< * BYE Logging out
< A005 OK Logout completed (0.001 + 0.000 secs).
* Closing connection 0

~

A note on usernames

If the username you are testing contains an @, you must use its urlencoded counterpart %40.

Alternatively you can also pass in the username:password combination separately using the -u flag

curl -v -u 'user:password' imaps://mailserver.tld/INBOX?NEW

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face. Thanks!

β˜•οΈ Buy me a Coffee ($3)

Squash all Git commits with git squash-all

Freek just shared his workflow to squash all git commits into one single commit β€” Handy for when you’re pushing a first public release of a project. His process involves removing the .git folder and starting off fresh again with a git init.

Wondering if there are handier/shorter ways to achieve this I set off on a Google Search and found some answers as detailed in this StackOverflow thread. Let’s go over the techniques mentioned.

~

1. Using Orphan Branches

As per Git Documentation:

The first commit made on an orphan branch will have no parents and it will be the root of a new history totally disconnected from all the other branches and commits.

This can be useful when you want to publish the tree from a commit without exposing its full history. You might want to do this to publish an open source branch of a project whose current tree is “clean”, but whose full history contains proprietary or otherwise encumbered bits of code.

After you’ve created the orphan branch, you swap it out the with the β€œold” master:

# Create a new branch, with no parent commits
git checkout --orphan squashed-master master
git commit -m "πŸŽ‰ First commit"

# Overwrite the old master branch with the new one
git branch -M squashed-master master

~

2. Using git commit-tree

Creates a new commit object based on the provided tree object and emits the new commit object id on stdout.

The command below will create one commit object using git commit-tree and then reset the HEAD to that commit:

git reset $(git commit-tree HEAD^{tree} -m "πŸŽ‰ First commit")

~

Alias it!

Since the git commit-tree method is a git one-liner, you can alias it:

git config --global alias.squash-all '!f(){ git reset $(git commit-tree HEAD^{tree} -m "${1:-πŸŽ‰ First commit}");};f'

From then on you can just run git squash-all in any repo of your liking:

git squash-all

πŸ™‚

I’ve also added this alias to ./freshinstall, a tool which I built to automatically configure macOS (Preferences, Dotfiles, Installed Software, etc)

~

Pushing your newly created branch

Since you rewrote history, you’ll need to use --force when pushing your newly created branch.

git push --force origin master

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face. Thanks!

β˜•οΈ Buy me a Coffee ($3)

Tiny Helpers – A collection of useful online web development tools

Nice new single-purpose site by Stefan Judis, which lists single-purpose web development tools – such as the aforementioned CSS Grid Generator and Smooth Shadow Generator for example – in one single place.

As detailed in a Twitter thread, the site is built using Eleventy, deployed to Zeit, and screenshots of the sites are automatically taken using Puppeteer.

The source is open, so you can add new services by opening a PR πŸ™‚

Tiny Helpers →
Tiny Helpers Source (GitHub) →

Should you self-host Google Fonts?

Google Fonts is great, but it also has a downside: it affects your page’s waterfall (during which some render-blocking may occur, as it involves CSS) as explained by Barry Pollard:

The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations.

This means you have to connect to fonts.googleapis.com, download the CSS, then connect to fonts.gstatic.com to download the actual fonts.

Fonts are often discovered late by the browser when loading a page (as you need to download the CSS to see them) but Google Fonts are discovered extra late, as you need to download the CSS from another domain, then the fonts from a 3rd domain and, as discussed above, making an HTTPS connection takes time.

This post goes really deep into how it all works. Covers things such as rel="preconnect", font-display: swap;, etc.

Should you self-host Google Fonts? →

πŸ”₯ Harry Roberts said it before: Self-Host your Static Assets