Weird JavaScript

This is something I stumbled across a while ago. Someone on the internet said he was asked this question during an job interview:

Can you think of a situation where this is true:

a == 1 && a == 2 && a == 3

Well, yes.

You have to ask the question, what a is.

Is it a number? Obviously not.

The solution is quite simple if you know how JavaScript works.

You can define a to be an object and overwrite valueOf:

const a = {
    i: 1,
    valueOf: function() {
        return this.i++;
    }
};

if (a == 1 && a == 2 && a == 3) {
    console.log('yeah');
}

I think this is very awkward!

Or like someone else on the internet said:

Sometimes when I’m writing Javascript I want to throw up my hands and say “this is bullshit!” but I can never remember what “this” refers to.

Generate htpasswd entries with bcrypt

This week I was digging around in the configuration of my webserver.

For some internal pages I am using Basic Auth. Looking at the password hashes I noticed they start with $apr1$.

What is that? The Apache documentation about password formats tells us that this is some kind of MD5 hash.

Thanks, but no thanks (It’s a mystery to me why I decided to use this..).

So let’s strengthen security by using blowfish!

It is possible to create bcrypt hashes using the htpasswd command. This is some utility that ships alongside Apache. I am no Apache user, and I am not willing to install it just for one small task. So what do we do?

There are some alternative implementations of just htpasswd (htpasswd.py in python and Apache::Htpasswd in perl) but they don’t support blowfish as far I can see. Sad. Alternatively, there are a lot of online generators out there. But someone must be totally crazy to use them…

Python to the rescue! If you have the bcrypt package installed, you can use this script to generate the hash:

#!/usr/bin/env python3

import bcrypt

print(
    bcrypt.hashpw(
        input().encode(),
        bcrypt.gensalt(rounds=10)
    ).decode()
)

I am using input() here, so the password won’t show up in plaintext inside the ~/.python_history file when using the interactive prompt.

If you save the script inside some file, you may use it like this to append a new entry:

echo "user:$(./htspass.py)" >> .htpasswd

So long.

Fnord Day

Happy fnord day!

23.5

Live CSS editing on page

So, I just stumbled across something really cool!

It is possible to edit CSS live on page!

If you have some <style/> tag, you can add some style attribute to itself. First use display: block, so it shows up on page.

And then the second trick: Add the contenteditable attribute, to make it changeable.

<style style="display: block;" contenteditable>
    /* ... */
</style>

That’s it - new styles get applied immediately.

Demo

Demo Box

So, go on and change some of the CSS below:

I think this is awesome! Please don’t ask me, where it could be useful – still, awesome!

You could also do that for <script/> tags, but to trigger the Javascript again you’ll have to reload the page and then all the changes are gone.

So long!

Calculate IPv6 link-local from MAC Address

While preparing for my final exams I stumbled across some question:

Please calculate the IPv6 link-local Address from the following MAC Address…

Good question.

Well, it’s pretty easy if you know how to do it.

Let’s say you have the following (hypothetical) MAC Address:

5f:4e:3d:2c:1b:0a

First thing, you have to add some ff:fe in the middle:

5f:4e:3d:ff:fe:2c:1b:0a

Now for the tricky part - the calculation. Look at the first part, in this case 5f. Convert it from HEX to BIN (see table below if you need help):

      5        f    (HEX)

0 1 0 1  1 1 1 1    (BIN)

The second to last bit needs to be flipped. Or more technically speaking the result needs to be XORed with 0 0 0 0 0 0 1 0.

0 1 0 1  1 1 1 1

0 0 0 0  0 0 1 0    (XOR)

0 1 0 1  1 1 0 1

Lastly, convert it back to HEX:

0 1 0 1  1 1 0 1    (BIN)

      5        d    (HEX)

Now we get the following:

5d:4e:3d:ff:fe:2c:1b:0a

As a final step add the prefix fe80, fill it with zeros and format it like a proper IPv6 Address:

fe80::5d4e:3dff:fe2c:1b0a

As I told you - pretty easy.

BIN - HEX table

HEX BIN HEX BIN
0 0 0 0 0 8 1 0 0 0
1 0 0 0 1 9 1 0 0 1
2 0 0 1 0 a 1 0 1 0
3 0 0 1 1 b 1 0 1 1
4 0 1 0 0 c 1 1 0 0
5 0 1 0 1 d 1 1 0 1
6 0 1 1 0 e 1 1 1 0
7 0 1 1 1 f 1 1 1 1

XOR table

A B XOR
0 0 0
0 1 1
1 0 1
1 1 0

The other way around is similar – chomp both fe80:: and ff:fe, then use the same XOR operation as above.

If you know all this above, you can easily spot generated link-local addresses, when they contain some ff:fe.

There are some operation systems around that use randomly generated ones - so don’t be confused if your machine does not generate one like above. I don’t know if this is compliant with the spec…

So long!


Update:

Just fixed some mistake – the final address was incorrect, I forgot to add leading zeros:

Changed: fe80:fe80::

Further – If you want to know more, take a look at those RFCs:

  • 4291 IP Version 6 Addressing Architecture – Section 2.5.6 Link-Local IPv6 Unicast Addresses

  • 4862 IPv6 Stateless Address Autoconfiguration – Section 5.3 Creation of Link-Local Addresses

  • 7721 Security and Privacy Considerations for IPv6 Address Generation Mechanisms

  • 4941 Privacy Extensions for Stateless Address Autoconfiguration in IPv6

So, yes, using randomly generated link-local addresses is compliant with the spec…

Catchall Mail

As a proud owner of a domain coupled with a mail server I have the freedom to use any mail address below that domain. So a long time ago I decided to use a catchall address. This is great, I can use it to track who is leaking my mail address (either by accident or on purpose - does not matter).

So when I register somewhere using shabby-webshop@example.org and, after a certain period of time, spam arrives on that address I know what to do: Cancel my account there and reject all further mails to that address. Maybe also poke around how this happened - but that’s optional…

But catchall addresses have some huge drawback:

After some time you completely lose track which addresses are in use, how often mails arrive there, and so on. All I have is my list of blacklisted addresses - I don’t know anything of the active ones.

This has to stop - so today I started to fiddle around in my mail setup to track active addresses.

I am using procmail to sort the mails directly on the server anyway - so why not start here? The first rule inside the definitions looks now like this:

:0 c
| /some/path/to/monitor.py

It passes a copy of the mail (note the c flag) to the monitor.py script and continues normally afterwards.

Inside the monitor.py script I am using something similar to this:

#!/usr/bin/env python3

from email import message_from_file
from email.utils import getaddresses
from json import dump, load
from os import path
from sys import stdin

FILENAME = 'monitor.json'

# read the mail from stdin
mail = message_from_file(stdin.read())

# parse the recipients
recipients = []
for field in ('To', 'Cc', 'Bcc'):
    recipients.extend(mail.get_all(field, []))

# load existing content from json file
result = {}
if path.exists(FILENAME):
    with open(FILENAME, 'r') as jfile:
        result = load(jfile)

# count the addresses
for _, addr in getaddresses(recipients):
    result[addr] = 1 + result.get(addr, 0)

# store result in json file
with open(FILENAME, 'w') as jfile:
    dump(result, jfile, indent=4)

Please note this is just some example code - I’ve added error handling and much more. Please do not just copy & paste that if you intend to use it!

The result is a json file with that content:

{
    "info@example.org": 23,
    "mail@example.org": 42,
    "something@example.org": 5
}

I am totally looking forward to look into the json file after some time. Hopefully this will help me to find some addresses I am using and already have forgotten about. And much more important: Hopefully this script won’t eat up all my mail.

If I won’t reply for some time, you know what happened… 🙈🙉🙊

So long.

Compound Words

In programming you always have the problem to join words together keeping the syntax intact and to keep at least some amount of readability.

Those compound words got some names, so everyone knows what you are talking about.

You might be familiar with:

  • CamelCase - Maybe the most famous one, most people might know it from Wikipedia

  • snake_case - Very popular in Python, but don’t fall for that. The name of the language refers to Monty Python, and not the snake.

  • kebab-case - This is my favorite name - Not really common because it is not easy to distinguish it from a minus sign. So you’ll find it mostly in markup languages (Pretty common for HTML class names and/or CSS)

But there is one which was new for me:

  • beercase - I guess it is inspired by two glasses clinking together. 🍻

You can grow old, but you never stop learning.

Cheers

Reading List

It’s been a while since my last post.. Yes, I promised to write about my experiences of how I built this Hugo template, and yes, I haven’t forgotten about it.

FYI - it doesn’t really look like it will get better in the near future:

I can program quite well, but sometimes I have the impression, that I’m not using the most optimal solution. Mostly I’m lacking a general overview of what’s possible, and some search terms, so I can read more about it.

Lately I’ve read a lot of positive things about the following books I stumbled:

So I invested the money I got for Christmas and just bought them. The package arrived today - so I can’t tell if they are good or not, yet.

This is a lot to read, I guess

This is a lot to read, I guess

I am especially looking forward to “A Programmer’s Introduction to Mathematics” The Approach to explain mathematics via code really looks promising.

Guessing from the titles you may notice that I’ll have some plans for the future. But this will be another story, to be told..

But what I can tell you right now is how I’ll spend my evening: reading!

So long.

How light chains work

Every year, on Christmas I ask myself the same question:

How does a light chain work? Why is it possible to blow a single light, but the others still work?

Obviously they are connected in a row. I had the basic understanding that a light chain looks like this:

This is how I thought a light chain would work&hellip;

This is how I thought a light chain would work…

If you would open SW1A as depicted (= lamp is broken), all lamps would turn off, because the circuit is interrupted.

Please don’t take that diagram too serious. It’s not aimed to be technically correct, I just want to explain the basic principles.

Investigating further — The first hint you get: If you manually plug out one lamp, the whole chain stops working. In conclusion - there must be something inside (or near) the single light bulbs.

Let’s take a closer look:

Taking a closer look..

Taking a closer look..

In the bottom of the bulb please note the little thing connecting the wires (right above the glass knob). It turns out this is a so called varistor. It is also called a voltage-dependent resistor - Something I’ve never heard of before…

Think of it like something between a valve or a fuse: At low voltage it has a high electrical resistance, at high voltage the resistance gets lower.

So we have to correct the diagram to look like this:

This is how it really works&hellip;

This is how it really works…

Because the lamp and the varistor are set in parallel, they divide the voltage in two halves. The moment one bulb gets broken, the full voltage ends up at the varistor. The varistor then drops his resistance and let’s the current flow through itself… As a result the circuit is still intact, and someone can quickly see which bulb has to be replaced. Genius!

I learned something new today, and I hope you did too.

Merry Christmas!

Hello Hugo

Say hello to my new site!

You may have guessed it - I was not really happy with Ghost so I decided to use Hugo for this site now.

The migration of the content was really a breeze. I wrote the entries in Markdown inside Ghost, so after all it was just copy pasting.

It’s great that Hugo supports aliases for URLs, so all the links should stay intact. You’ll get redirected to the new location if you hit an old one. Also I’m trying to redirect the URL of the RSS feed - Let’s see how this will work out..

As a cherry on top, I wrote myself some script to automatically build the Website when I’m pushing new content into the git repository. This is very comfortable - editing content locally inside a good and well adjusted text editor, publish it with git, and let the server do the rest.

But the best part: I can finally abandon Node.js from my server. Node itself is not a problem, but keeping all packages for Ghost up to date is really time consuming and all the worries about it are driving me mad…

However I struggled very much to select a decent theme:

  • It should look good
    • Must work on small and big screen sizes
    • Text should be readable (high contrast)
  • It must have a decent quality in code
    • Doesn’t use string concatenation to construct URLs
      • this will break if you have some special requirement - been there, done that)
    • (HTML) Output should be readable and straight forward
      • As little JavaScript as possible, please
      • Doesn’t use a full blown framework for just one tiny feature
  • Must be focused on privacy
    • No external requests for CSS, Fonts, JS, whatever
  • RSS Feed must have full content
    • I hate that when others do it

This is really much to ask, so the selection boils down to (almost ?) zero. So I did what seemed logical - I forked some existing theme which I liked and implemented/changed what was missing.

It would have been faster to write a theme from scratch I guess… In a future blog post I’ll tell you more about the adventures I encountered while building a theme for Hugo.

Stay tuned!