Forem: Ruud Schroën

Redirect IE11 users in NextJS

Ruud Schroën — Thu, 17 Jun 2021 19:32:36 +0000

A while ago, a client I work for decided after a lot of discussions to finally drop support for IE11. Hurray!

Later, they decided to a show a nice page with an explanation to anyone who might still be using IE11 and encourage them to download a more modern browser.

But because we dropped support a while ago, we didn't test in IE11 anymore, and so any page we tried to load didn't work. Trying to make the pages work would be a waste of time, because in time they might stop working again.

So we decided to redirect all IE11 users to a simple static page.

Redirects in NextJS

Since version 9.5 it is possible to declare your redirects in next.config.js.

The redirects property accepts an async function, that returns an array of redirects.

The redirect in this array goes from the homepage to /ie_warning.html (which is a file served from the public folder), and is set to be non-permanent, meaning that the server will return a 302 HTTP status code. If permanent is set to true, a 301 code is returned instead.

module.exports = {
  redirects: async () => {
    return [
      {
        source: '/',
        permanent: false,
        destination: '/ie_warning.html',
      },
    ]
  },
}

After restarting NextJS, the homepage should redirect you to the static file. But right now this will happen in all browsers, which is not what we want.

Matching the User-Agent header

So what if we only want to redirect users that are using IE11?

That's easy! Redirects also accept a has property, that contains a list of "things" the request should contain. These can be headers, cookies or query parameters.

We will be checking against a header. The User-Agent. All IE11 user-agents contain the word Trident in their user-agent, so we can simply use a regex-like string to check if the header contains that word.

module.exports = {
  redirects: async () => {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value: '(.*Trident.*)',
          },
        ],
        permanent: false,
        destination: '/ie_warning.html',
      },
    ]
  },
}

Restart NextJS again, and go to the homepage in IE11. It will still redirect you, while other browsers will not.

But right now the redirect only triggers on the homepage. You'll want this to trigger on all pages, which we'll do next.

Site-wide redirect

In order to trigger a redirect on all pages, we can make use of a regex-like string again.

module.exports = {
  redirects: async () => {
    return [
      {
        source: '/:path((?!ie11_warning.html$).*)',
        has: [
          {
            type: 'header',
            key: 'user-agent',
            value: '(.*Trident.*)',
          },
        ],
        permanent: false,
        destination: '/ie11_warning.html',
      },
    ]
  },
}

Restart NextJS one more time and now the redirect will trigger on all pages, except /ie_warning.html. The exception is required to prevent a redirect loop.

Conclusion

As you can see, it is quite easy to setup a redirect for a specific browser. Personally I had some trouble with the regex-like strings at first, but then again, regex is difficult anyway.

Hope this was helpful!

Always double-check what you copy from websites

Ruud Schroën — Thu, 18 Mar 2021 20:30:02 +0000

Let's say you are following a guide on the internet and it provides a command for installing a package.

sudo apt install package

Without a second thought, you copy the command and quickly paste it in your terminal. Now imagine there was a different command in your clipboard, like this one:

sudo rm -rf / *do not actually run this command!

This command forcefully and recursively deletes all your files and folders starting from the root directory. If you paste text containing a newline character in your terminal, it will automatically be executed. If your terminal has elevated permissions, because you already executed a sudo command in the same session, it will not ask for your password.

Goodbye precious data!

How can this happen?

There are three ways how websites can trick you into copying something else:

By using the execCommand method from the Document interface
By changing the clipboard data within the copy event
By placing hidden and/or offscreen text within the visible text

The execCommand method

If you've ever copied a command from a website, you may have noticed that some offer a button that, once clicked, copies the command for you.

These buttons use the execCommand method from the Document interface. It is deprecated and can be removed at any time, but for now it is still working.

As the name implies, it allows you to execute a command. One of the commands you can execute is copy. By executing this command you can copy the current selection to the clipboard.

An example is given below:

const hiddenInput = document.querySelector("input");
hiddenInput.value = "Text that should be copied";
hiddenInput.select();
document.execCommand("copy");

The tricky part is that malicious websites can have that button copy something completely different from what you are expecting.

So if you are on a website that you don't trust and you use one of these buttons, always double check what is currently in your clipboard by pasting it in a safe place, Notepad for example.

Changing the clipboard data within the copy event

Whenever you copy something using CTRL + C or the context menu, a copy event is fired. A handler for this event can modify the clipboard contents using the following code:

const handleCopyEvent = (event: ClipboardEvent) => {
  // Set the clipboard contents to a string of your choice.
  event.clipboardData.setData(
    "text/plain",
    "sudo rm -rf /" // DON'T RUN THIS COMMAND
  );

  // Prevent the default action from overriding the data
  // we just set.
  event.preventDefault();
};

The code should be self-explanatory but if you want a more detailed explanation I recommend reading Stop Rashly Copying Commands From Websites by Louis Petrik, where I originally read about this exploit. It also includes an example and a link to a browser extension that I have created. More on that in a minute.

Placing hidden and/or offscreen text within the visible text

When you select text on a website it becomes highlighted. You would expect that the highlighted part is exactly what you are going to copy.

The problem is that, in some cases, invisible or offscreen text will also be part of your selection, even when it's not highlighted.

Some examples that hide text but still allow it to be selected are:

Using font-size: 0
Moving text offscreen with absolute or fixed positioning
Using absolute or fixed positioning in combination with transform: scale(0)

Just to name a few.

There is an example that demonstrates this trick. The commands that you see there contain a span that is moved offscreen.

How to protect yourself?

A good practice is to always double-check what is in your clipboard, by pasting it in a safe environment first. But what if your browser could warn you when your clipboard data is altered? How about a browser extension?

Meet Copy Guard

I have created a simple browser extension that does exactly that! It is called Copy Guard and its source code can be found on my GitHub. By using my extension you can let your browser warn you when a website is using the second or third method.

It injects a script which listens to the copy event. Whenever you copy something using CTRL+C or the context menu, it takes your current text selection and compares it to the data that is placed in your clipboard. Aside from that, it also checks if your text selection contains any hidden or offscreen elements.

Available for Chrome, Firefox and Edge.

A note on cryptocurrency

When I posted my browser extension on Reddit, I was told that stuff like this happens within the crypto community as well, which makes perfect sense. A website could have you copy a totally different wallet address. If you were to send your precious crypto to this address, it could be lost forever.

Something similar happened to a Reddit user once. Although this particular user probably had malware on their computer, it could also happen on the web, without any malware.

Conclusion

There are multiple ways how websites can trick you into copying something different from what you expect.

Always double-check your clipboard. My browser extension can at least warn you when something is fishy, but a good practice is to paste your selection in a safe environment first, before you paste it in your terminal.

At least do this for websites you don't trust.