Forem: Bjørn Fridal

Unraveling My Uncle's Online Gold Scam

Bjørn Fridal — Mon, 20 Nov 2023 19:44:52 +0000

The media is overflowing with stories of people getting scammed. Romance scams, investment scams, charity scams, sextortion and the list goes on. As a tech-savvy person, it is often easy to spot the difference between a genuine email from the bank and a fake phishing email from a scammer. That being said, as the scammers get more sophisticated, even people in the tech industry fall victim to scams.

It’s no wonder that people who are not as digitally literate are particularly vulnerable to these deceptive tactics. It could be someone close to you. Perhaps a relative. Perhaps your uncle.

My Uncle, The Victim

My uncle had over the past year made a few remarks about some "secret investments" he was making. At first he was very withholding as to the nature of these investments, but after pressing him on the matter, my fears were confirmed.

He had met a young woman online. Even though they had never met in real life, they had quickly struck up a romantic relationship. Only the young woman was in a dire situation. She was supposedly due to receive a significant inheritance in gold, yet she claimed she couldn't access it without first paying a 'retrieval fee' amounting to several thousand dollars. Horrifyingly, my uncle had paid this fee, only to discover that now even larger fees were demanded.

By this stage, all of your spider senses should be going off! The scenario was a textbook example of a classic romance scam. The lack of originality was actually surprising to me. One would think that scammers might have better success if they tried with new approaches.

Yet, the specifics of the story were less important than my uncle's circumstances. Being elderly, single, with ample free time and retirement savings, he was an ideal target. Despite his naturally skeptical disposition, the scammers gradually drew him into their fabricated realm over several months. It was a world filled with adventure and intrigue, where a young woman required his assistance, gold needed to be smuggled from African countries, corrupt officials bribed, and numerous other challenges surmounted.

To an outsider, the whole situation resembled a poorly written crime novel, with my uncle cast as the improbable hero, inadvertently caught up in a tangled web of intrigue and romance. I guess that his belief in these unlikely tales stemmed from a combination of loneliness and the thrill of what seemed like an adventurous, albeit risky, escapade. These elements, coupled with skillful manipulation by the scammers, made the implausible seem all too real to him.

Our Failed Attempts at Reasoning

As you can imagine, when my uncle's story became known among our family, numerous worried relatives reached out to him. It was surprising and disheartening to find that all our attempts to reason with him proved futile. He dismissed our warnings with laughter. Each time someone pointed out the inconsistencies in the scammers' stories, he would simply retort with 'you don’t understand'. Eventually, it dawned on me that the scammers had skillfully sown seeds of distrust towards us in his mind, effectively cutting him off from our concern.

With Great Risk Comes Great Reward

Several months had passed since I first became aware of my uncle's so-called investments. I was wary of alienating him by persistently pointing out that he was falling for a scam, yet the thought of passively watching him get swindled was unbearable. Then, one day, I received a text from my uncle: “With great risk comes great reward :)”. Attached was a screenshot of a bank balance boasting an impressively large number.

At last, I thought! This could be the breakthrough I had been waiting for. Gaining access to any material produced by the scammers could potentially enable me to expose their fraudulence. Playing along, I asked my uncle if I could have the bank's website address. A few minutes went by, and then the website's address appeared on my phone!

1. The fake looking banking website

The banking website was absurdly poorly built. It used a cheap WordPress theme and several of the pages still had the original "Lorem ipsum..." text that the theme came with! The bank's logo, name and colour scheme had been ripped from a real bank in the UK. Piggy bagging off of a real bank was a smart move, but to a developer, the website looked every bit as fake as it was.

2. The clue in the SSL certificate

I looked up the registrar of the domain, but all contact details were hidden. However, the website had a Let's Encrypt SSL certificate, though it's Common Name (CN) was issued to a Nigerian Hotel. Strange for a bank located in the UK, but lucky for me. With the name of the Nigerian Hotel, I was able to find another fake website using the same WordPress theme, but this time fitted for a hotel. I never did figure out what scam the hotel website had been used for, but when I looked up the domain registrar I hit the jackpot! The registrar's name and email address stood there in plain text!

3. The amateur web developer

With the name and email address of the domain registrar, I was able to find a string of expired domains the registrar had previously owned. 113 domains to be exact! Many of the domains sounded like banking websites, exchange websites or investment websites. It was all to easy to imagine how they could have been used for scams similar to my uncle's.

I used Reverse Contact to search for the registrar and came up with a LinkedIn and Facebook profile belonging to a Nigerian software developer. I also found the software developer's name in some pictures EXIF data. It seems very likely that this is indeed the person behind the websites, but I suspect that he is just a single piece of a bigger operation.

4. The fake and the real gold trader

My internet detective skills had brought up some solid findings, but I wasn't prepared to present them to my uncle yet. He had recently told me about a gold trader who overlooked the sale of my uncle's gold investments. This time I asked my uncle for the name, email and website of the gold trader. This time the person and the website seemed genuine and authentic. There was a registered gold trader with that name in the country mentioned on the website. However, the email address my uncle has was a Gmail address. Definitely something I had to look into.

I sent a message to the official email address displayed on the website. I explained the situation without giving away any sensitive details. Honestly, I thought that my message might end up in a spam folder if I used words like Nigerian and Scam and I had already planned on calling up the trader the next day.

To my surprise, the real gold trader replied within a day. This was not the first time someone misused his name to commit fraud in far-away countries. The trader was very polite, but obviously also upset.

5. The Developer Turned Hacker

By now I had a good pile of indications and evidence. At the same time, I was sure that the fake banking website contained more information. As any other web developer would have, I attempted to guess the login to the WordPress administration. That didn't work and my IP address was banned for an hour. Now, I don't dislike WordPress per se, but the CMS does carry around some legacy code.

I wondered if I could extract a username from the website. After some Googling, I saw that the WordPress REST API apparently let's anybody fetch the WP users. Really? I pointed my browser at:

https://fakebank.com/wp-json/wp/v2/users

And it instantly returned the following:

{
  "id": 2,
  "slug": "nimda"
  ...
}

It looks like WordPress just gave me the administrator username - nimda is admin spelt backwards! If the username is that weak could the password perhaps be just as weak? Or even worse, could the password be the same as the username? The answer is YES!

I realize that this may be a bit controversial and that some readers will feel that I have overstepped my mark here. My justification is that the potential to prevent an ongoing scam outweighs the breach of digital etiquette. I am not endorsing hacking, I am using my technical knowledge in a responsible way to fight back against a harmful deception.

Logging into the administration of the fake banking website gave me access to everything the scammers had access to on the website. It was plain to see that the sole purpose of this website was to defraud my uncle and only him. Whenever my uncle had "traded" gold someone would manually log into the WordPress administration and update his "bank deposit" and "bank statement".

However, the biggest surprise was hidden deep in the Media archive of WordPress. Passport pictures of what were clearly other victims! I found other materials that confirmed my suspicion that the website had been reused over and over again for similar scams. Seeing these pictures of elderly men, likely victims of the same scam as my uncle, filled me with a profound sense of sadness.

I took screenshots of all of my findings and hoped that this would be the final nail in the coffin of my uncle’s scam!

Presenting the Evidence to My Uncle

Armed with all the screenshots and my correspondence with the legitimate gold trader, I visited my uncle. We had a talk. A long talk. We went back and forth over the details. I made every effort to translate my technical discoveries into terms that resonated with him.

The challenge was immense: I was attempting to undo a year's worth of fanciful tales and deceit spun by the scammers. Their presence in his life had been constant – even as we spoke, his phone buzzed continuously with their messages. It was understandably overwhelming for him to process and accept the reality of the situation.

Gradually, I began to sense a shift. He began to ask questions, showing a growing understanding and scepticism towards the situation. It was the breakthrough I had been hoping for! A few days later, he filed a report with the police.

What Happens Once the Lie is Exposed?

Even as I was gathering evidence against the scammers, I grappled with a conflicting fear: what would happen if I successfully convinced my uncle about the scam? I would be taking away something significant from an elderly man. His primary interactions were with the scammers. The excitement in his life, the allure of romance, and the promise of wealth all stemmed from their fabricated tales.

Honestly, this was the hardest part and still is. Before I even went to see my uncle I had talked to several family members, briefing them about my intentions. I wanted to let them know that my uncle could use our support now more than ever.

We didn't think less of him because he had lost a lot of money on his "investments". His self-imposed isolation didn't change our view of him; his rightful place was, and always will be, among his family.

Conclusion

Online scams are a crime with real victims and the damage goes far beyond the financial losses. The victims often struggle with shame and a sense of betrayal, which can result in lasting emotional distress.

As an onlooker, it is deeply frustrating to witness someone you care about being deceived and have your warnings dismissed. Yet, we have to persist and do everything we can to help the victims. Particularly once they come to the painful realization that they have been exploited.

Disclaimer The victim in this story isn't really my uncle, but another close relative. I have changed a few other details as well to ensure the privacy of everyone.

Let's Build a Redux Clone

Bjørn Fridal — Wed, 01 Nov 2023 17:41:06 +0000

To get a better understanding of how Redux works we are going to build a simplified Redux clone from scratch. To visualize how Redux works, I've made an interactive flow chart to go along with this blog post. Have fun!

Isn't Redux like… old?

Redux was first released way back in 2015 and since then we have seen plenty of new ways to manage state in React. We have Context, Zustand, Jotai and XState just to name a few. Does it even make sense then to spend time learning about Grampa Redux?

For a lot of simpler applications, React's Context will probably suffice, however, as we will see in this blog post, the real strength of Redux comes when we leverage its middleware feature. Middleware is something Context doesn't support out-of-the-box.

Besides, there are thousands of React apps in the wild that are built using Redux, so chances are good that you will eventually work on a project with Redux. So yes, Redux may be old, but it's not dead and it's definitely still worth understanding how it works.

What is Redux?

In short, Redux is a state management library. It is most often used in React applications, but it is actually framework agnostic. Once we integrate Redux with React we have an easy and predictable way to access and update state from anywhere in our application. With Redux middleware we will be able to handle operations related to our state such as fetching data from an API and placing it into Redux, logging Redux state etc.

How does Redux work?

In Redux we always have a single store and that store contains our state. The store allows us to subscribe to changes made to the state and it allows us to update the state by sending an action to the store. We do that using the dispatch method. A dispatched action will first go through any middleware the store has and then through the store's reducer where it will update the existing state and return the new state to all subscribers. An action can also dispatch new actions along the way

What we will build

We will build our own version of Redux and even though it will be greatly simplified compared to The Real Redux, it will have everything we need to get a good understanding of how Redux works.

Since Redux is most often used with React, we will drop our Redux Clone into a small React application. The only thing the application does is 1) fetch a random Pokémon from an external API and 2) display the Pokémon on the screen. We will then use our Redux Clone to manage the state.

I assume that you are already familiar with React, Reducers and Context. If not, I hope that you are a fast learner.

Application Step-by-Step

Here's a step-by-step breakdown of how our React application will use the Redux Clone.

1) A user is presented with our UI. The UI contains a Fetch Pokemon button and a status text that says No Pokemon.
2) The user clicks the Fetch Pokemon button.
3) We dispatch an action of type fetch.
4) The store receives our action and runs it through the middleware.
5) The thunk-middleware sees that the action has a fetch method and invokes it.
6) The fetch method makes an async call to an API. Since the API may be slow to respond we dispatch an action of type fetching.
7) The new fetching action is also run through the store's middleware, but nothing happens since it has no method that can be invoked by the thunk-middleware.
8) The action then runs through the reducer and updates the "status" state.
9) Since our UI (React) is subscribed to the store it receives the new state and accordingly changes the status text to Fetching....
10) Eventually, the API responds to our request and returns the Pokémon data. We dispatch a new action of type fetched and this time we include the Pokémon data as a payload.
11) Like before, our actions first run through the middleware, but again there's no action method to be invoked.
12) The action proceeds to the reducer and here it now updates the "status" and the "pokemon" properties.
13) Again our UI receives the updated state from the store and can now show the Pokémon we fetched from the API.

Interactive flow chart

That's a lot of steps to wrap your head around. To make it easier I build this fancy interactive flow chart. Click the button and each step will be shown.

Interactive flow chart

The Store

Now that we know exactly what we are building, let's get coding! I mentioned that we always have a store in Redux and that's where we will start.

const createStore = (reducer, initialState) => {
  const store = {
    state: initialState,
    listeners: [],
    getState: () => store.state,
    subscribe: (listener) => {
      store.listeners.push(listener);

      return () => {
        const index = store.listeners.indexOf(listener);
        store.listeners.splice(index, 1);
      };
    },
    dispatch: (action) => {
      store.state = reducer(store.state, action);
      store.listeners.forEach((listener) => listener());
    }
  };

  return store;
};

Instead of going through the createStore function line by line (use ChatGPT for that), I will zoom in on the most important parts; subscribe and dispatch.

The subscribe method allows us to "listen" to changes in the store's state. When the store's state updates, all subscribed listeners are notified. In our case, it will be React Components that subscribe to the store.

Dispatch

The dispatch method is used to send, or "dispatch", actions to the store. When an action is dispatched, the store uses the reducer to determine how the state should change in response to that action. After the state is updated, all subscribed listeners are called, notifying them of the change.

The createStore function is the core of our Redux Clone. We can use it in different applications without changing it. What will change from application to application is the two parameters: Initial State (to initialize our store's state) and Reducers.

Reducer

The store in our Redux Clone expects a single reducer (in the real Redux a store can have multiple reducers). The reducer is passed into the store as an argument to createStore.

const reducer = (state, action) => {
  switch (action.type) {
    case 'idle':
      return { ...state, status: 'idle' };

    case 'fetching':
      return { ...state, status: 'fetching', pokemon: null };

    case 'fetched':
      return { ...state, status: 'fetched', pokemon: action.payload };

    default:
      return state;
  }
};

As you can see it's an ordinary reducer. Any action dispatched to the store will go through the reducer and return a new object with the updated state.

By now we can create a fully functioning Redux store:

const initialState = { status: 'idle', pokemon: null };
const store = createStore(reducer, initialState);

Since we need the store to work in our Pokémon application we need a way to integrate it with React.

React Integration

We can use React's Context to make the store available throughout our application.

const ReduxContext = createContext();

const ReduxProvider = ({ children, store }) => (
  <ReduxContext.Provider value={store}>
    {children}
  </ReduxContext.Provider>
);

Now that we can access the store in our components, we need an easy way to get the store's state. Both when our component mounts, but also when the store's state is updated. Maybe a small hook?

const useSelector = (selector) => {
  const store = useContext(ReduxContext);
  const [state, setState] = useState(selector(store.getState()));

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const newState = selector(store.getState());
      setState(newState);
    });

    return () => {
      unsubscribe();
    };
  }, [selector, store]);

  return state;
};

The selector parameter is a callback function that, when given the store's state, extracts and returns a specific slice of that state.

Inside useEffect, we subscribe to changes in the store. When the store's state changes, we update our local state with setState, causing our component to rerender with the new state.

Here's an example of how we can use useSelector in a component.

const ShowStatus = () => {
  const status = useSelector((state) => state.status);

  return (
    <p>Status: {status}</p>
  );
}

As you can see we use the selector to pick just status instead of returning the entire state object.

Let's also create a hook to access the store's dispatch method.

const useDispatch = () => {
  const store = useContext(ReduxContext);
  return store.dispatch;
};

And here's an example with the useDispatch hook.

const FetchPokemonButton = () => {
  const dispatch = useDispatch();

  const handleClick = () => {
    // Dispatch the "fetching" action
    dispatch({
      type: 'fetching'
    });

    // Fetch a random Pokémon
    fetch(`https://pokeapi.co/api/v2/pokemon?limit=1&offset=${Math.floor(Math.random() * 1000)}`)
      .then((res) => res.json())
      .then((json) =>
        // Dispatch the "fetched" action
        // with the Pokémon as the payload
        dispatch({
          type: 'fetched',
          payload: json.results[0]
        })
      );
  };

  return <button onClick={handleClick}>Fetch Pokémon</button>;
};

We first dispatch a "fetching" action to the store. This allows us to immediately update our UI with a message that informs the user that the request is being processed.
Once the asynchronous fetch completes, we dispatch another action that contains the fetched data. Now we can update our UI with the fetched Pokémon.

Be sure to check out the flow chart if this doesn't quite make sense.

Let's run the first version

With our React integration in place, we now have everything we need to run our application. Are you excited? Clik the button to run our Redux Clone in StackBlitz.

Middleware

We now have a working state manager. Still, it feels a little like a one-trick pony.
It would be nice if we could make our Redux Clone extendable and make it cater to different use cases.
That's exactly what middleware is - a way for us to extend Redux.

The simplest type of middleware is probably a logger. Below is a loggerMiddleware that will log all actions dispatched to the browser’s console. Simple, but useful.

const loggerMiddleware = (store) => (next) => (action) => {
  console.log(action);
  return next(action);
};

Redux favours functional programming over object-oriented programming hence the curried function signature above.

Explaining currying is beyond this blog post. However, if the technique is new to you, just know that we will use currying to pass getState and dispatch to our middleware.

Our Redux Clone should be able to handle multiple middlewares. We will create an applyMiddleware function that can help us with that.

const applyMiddleware = (...middlewares) => {
  return (createStore) => (reducer, initialState) => {
    const store = createStore(reducer, initialState);

    const composedMiddleware = middlewares
      .map((middleware) => {
        // Give the middleware access to
        // the store's state and dispatch.
        return middleware({
          getState: store.getState,
          dispatch: (action) => store.dispatch(action)
        });
      })
      .reduce((composed, middleware) => {
        // Compose the middleware together.
        return (...args) => composed(middleware(...args));
      });

    // Override the store's dispatch method.
    // Now any action dispatched will run
    // through each middleware first.
    store.dispatch = composedMiddleware(store.dispatch);

    return store;
  };
};

We use the parameter createStore function to create our store inside of applyMiddleware. We can then pass the store's getState and dispatch methods to each middlware, which we then compose (or chain) together.

We return to our createStore function for the final adjustment.

const createStore = (reducer, initialState, middleware) => {
  if (middleware) {
    return middleware(createStore)(reducer, initialState);
  }
  ...
};

Here we have added a third optional middleware parameter. If the new middleware parameter is available we invoke it and instead return the store created in applyMiddleware.

That's all we need to support middleware in Redux Clone!

And we can do a lot more than logging with our middleware. A very common middleware is Redux Thunk which allows us to dispatch functions as actions and have our middleware invoke those functions. The functions can be asynchronous or have other side effect.

That seems useful to us, so let's write a thunkMiddleware.

const thunkMiddleware = (store) => (next) => (action) => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

Now that we have written two middlewares let's see how we can add them to the new store.

const initialState = { status: 'idle', pokemon: null };
const middleware = applyMiddleware(loggerMiddleware, thunkMiddleware);
const store = createStore(reducer, initialState, middleware);

Action Creators

A common practice in Redux is to use Action Creators to create the action we want to dispatch. Action Creators help us reduce code duplication and extract logic out from our components.

Action Creators may seem like overkill in our tiny Pokémon application, however now with thunkMiddleware our store can also handle actions that are functions. Let's use Action Creators to create both action objects and action functions.

const fetching = () => ({
  type: 'fetching'
});

const fetched = (pokemon) => ({
  type: 'fetched',
  payload: pokemon
});

const fetchPokemen = () => (dispatch) => {
  // Dispatch the "fetching" action
  dispatch(fetching());

  // Fetch a random pokemon
  fetch(`https://pokeapi.co/api/v2/pokemon?limit=1&offset=${Math.floor(Math.random() * 1000)}`)
    .then((res) => res.json())
    .then((json) =>
      // Dispatch the "fetched" action
      // with the Pokémon as the payload
      dispatch(fetched(json.results[0]))
    );
};

The Action Creators fetching and fetched both return plain objects.

The fetchPokemen is a bit more interesting. It returns a function and if we look closer we see that the function has the same behavior as the click event handler handleClick. Why is that? Because we know that action functions will be invoked by thunkMiddleware we can extract logic out from the component and place it into an Action Creator.

We also see that fetchPokemen has access to the dispatchmethod (thanks applyMiddleware), which means that we are not restricted to only dispatching events from components.

That leaves us with a small and very readable React component.

const FetchPokemonButton = () => {
  const dispatch = useDispatch();

  const handleClick = () =>
    dispatch(fetchPokemen());

  return <button onClick={handleClick}>Fetch Pokémon</button>;
};

Let's run the final version

By adding support for middleware we have made our Redux Clone extendable and with Action Creators we have better separation of concerns and our actions stay DRY.

The UI will look the same as in the first version, but that doesn't mean that we shouldn't take our final version for a test run. Clik the button to run our Redux Clone in StackBlitz.

Wrap up

I hope that you enjoyed this blog post and I hope that you have a better understanding of how Redux works. I appreciate any feedback you have small or big.

Connect and say hi on LinkedIn or X/Twitter 😊

You can find the source code on GitHub.

Forem: Bjørn Fridal

Unraveling My Uncle's Online Gold Scam

My Uncle, The Victim

Our Failed Attempts at Reasoning

With Great Risk Comes Great Reward

1. The fake looking banking website

2. The clue in the SSL certificate

3. The amateur web developer

4. The fake and the real gold trader

5. The Developer Turned Hacker

Presenting the Evidence to My Uncle

What Happens Once the Lie is Exposed?

Conclusion

Let's Build a Redux Clone

To get a better understanding of how Redux works we are going to build a simplified Redux clone from scratch. To visualize how Redux works, I've made an interactive flow chart to go along with this blog post. Have fun!

Isn't Redux like… old?

What is Redux?

How does Redux work?

What we will build

Application Step-by-Step

Interactive flow chart

The Store

Subscribe

Dispatch

Reducer

React Integration

Let's run the first version

Middleware

Action Creators

Let's run the final version

Wrap up