Browser hacking for 280 character tweets

Twitter has raised the limit to 280 characters for a select number of people. However, they left open a hole, allowing anybody to make large tweets with a little bit of hacking. The hacking skills needed are basic hacking skills, which I thought I'd write up in a blog post.


Specifically, the skills you will exercise are:

• basic command-line shell
• basic HTTP requests
• basic browser DOM editing

The short instructions

The basic instructions were found in tweets like the following:

Click 'Tweet' in the web ui
F12 Remove 'disable' on the tweet button
Click it, and go to 'network', right click on the request and copy as cURL
Then, add &weighted_character_count=true as a param to the end of the url
Then, resubmit the tweet with curl.
Enjoy your 280 characters.

— Christien Rioux ⚛ (@dildog) September 27, 2017

These instructions are clear to the average hacker, but of course, a bit difficult for those learning hacking, hence this post.

The command-line

The basics of most hacking start with knowledge of the command-line. This is the "Terminal" app under macOS or cmd.exe under Windows. Almost always when you see hacking dramatized in the movies, they are using the command-line.

In the beginning, the command-line is all computers had. To do anything on a computer, you had to type a "command" telling it what to do. What we see as the modern graphical screen is a layer on top of the command-line, one that translates clicks of the mouse into the raw commands.

On most systems, the command-line is known as "bash". This is what you'll find on Linux and macOS. Windows historically has had a different command-line that uses slightly different syntax, though in the last couple years, they've also supported "bash". You'll have to install it first, such as by following these instructions.

You'll see me use command that may not be yet installed on your "bash" command-line, like nc and curl. You'll need to run a command to install them, such as:

sudo apt-get install nc curl

The thing to remember about the command-line is that the mouse doesn't work. You can't click to move the cursor as you normally do in applications. That's because the command-line predates the mouse by decades. Instead, you have to use arrow keys.

I'm not going to spend much effort discussing the command-line, as a complete explanation is beyond the scope of this document. Instead, I'm assuming the reader either already knows it, or will learn-from-example as we go along.

Web requests

The basics of how the web works are really simple. A request to a web server is just a small packet of text, such as the following, which does a search on Google for the search-term "penguin" (presumably, you are interested in knowing more about penguins):

GET /search?q=penguin HTTP/1.0
Host: www.google.com
User-Agent: human

The command we are sending to the server is GET, meaning get a page. We are accessing the URL /search, which on Google's website, is how you do a search. We are then sending the parameter q with the value penguin. We also declare that we are using version 1.0 of the HTTP (hyper-text transfer protocol).

Following the first line there are a number of additional headers. In one header, we declare the Host name that we are accessing. Web servers can contain many different websites, with different names, so this header is usually imporant.

We also add the User-Agent header. The "user-agent" means the "browser" that you use, like Edge, Chrome, Firefox, or Safari. It allows servers to send content optimized for different browsers. Since we are sending web requests without a browser here, we are joking around saying human.

Here's what happens when we use the nc program to send this to a google web server:

The first part is us typing, until we hit the [enter] key to create a blank line. After that point is the response from the Google server. We get back a result code (OK), followed by more headers from the server, and finally the contents of the webpage, which goes on from many screens. (We'll talk about what web pages look like below).

Note that a lot of HTTP headers are optional and really have little influence on what's going on. They are just junk added to web requests. For example, we see Google report a P3P header is some relic of 2002 that nobody uses anymore, as far as I can tell. Indeed, if you follow the URL in the P3P header, Google pretty much says exactly that.

I point this out because the request I show above is a simplified one. In practice, most requests contain a lot more headers, especially Cookie headers. We'll see that later when making requests.

Using cURL instead

Sending the raw HTTP request to the server, and getting raw HTTP/HTML back, is annoying. The better way of doing this is with the tool known as cURL, or plainly, just curl. You may be familiar with the older command-line tools wget. cURL is similar, but more flexible.

To use curl for the experiment above, we'd do something like the following. We are saving the web page to "penguin.html" instead of just spewing it on the screen.

Underneath, cURL builds an HTTP header just like the one we showed above, and sends it to the server, getting the response back.

Web-pages

Now let's talk about web pages. When you look at the web page we got back from Google while searching for "penguin", you'll see that it's intimidatingly complex. I mean, it intimidates me. But it all starts from some basic principles, so we'll look at some simpler examples.

The following is text of a simple web page:

<html>

<body>

<h1>Test</h1>

<p>This is a simple web page</p>

</body>

</html>

This is HTML, "hyper-text markup language". As it's name implies, we "markup" text, such as declaring the first text as a level-1 header (H1), and the following text as a paragraph (P).

In a web browser, this gets rendered as something that looks like the following. Notice how a header is formatted differently from a paragraph. Also notice that web browsers can use local files as well as make remote requests to web servers:

You can right-mouse click on the page and do a "View Source". This will show the raw source behind the web page:

Web pages don't just contain marked-up text. They contain two other important features, style information that dictates how things appear, and script that does all the live things that web pages do, from which we build web apps.

So let's add a little bit of style and scripting to our web page. First, let's view the source we'll be adding:

In our header (H1) field, we've added the attribute to the markup giving this an id of mytitle. In the style section above, we give that element a color of blue, and tell it to align to the center.

Then, in our script section, we've told it that when somebody clicks on the element "mytitle", it should send an "alert" message of "hello".

This is what our web page now looks like, with the center blue title:

When we click on the title, we get a popup alert:

Thus, we see an example of the three components of a webpage: markup, style, and scripting.

Chrome developer tools

Now we go off the deep end. Right-mouse click on "Test" (not normal click, but right-button click, to pull up a menu). Select "Inspect".

You should now get a window that looks something like the following. Chrome splits the screen in half, showing the web page on the left, and it's debug tools on the right.

This looks similar to what "View Source" shows, but it isn't. Instead, it's showing how Chrome interpreted the source HTML. For example, our style/script tags should've been marked up with a head (header) tag. We forgot it, but Chrome adds it in anyway.

What Google is showing us is called the DOM, or document object model. It shows us all the objects that make up a web page, and how they fit together.

For example, it shows us how the style information for #mytitle is created. It first starts with the default style information for an h1 tag, and then how we've changed it with our style specifications.

We can edit the DOM manually. Just double click on things you want to change. For example, in this screen shot, I've changed the style spec from blue to red, and I've changed the header and paragraph test. The original file on disk hasn't changed, but I've changed the DOM in memory.

This is a classic hacking technique. If you don't like things like paywalls, for example, just right-click on the element blocking your view of the text, "Inspect" it, then delete it. (This works for some paywalls).

This edits the markup and style info, but changing the scripting stuff is a bit more complicated. To do that, click on the [Console] tab. This is the scripting console, and allows you to run code directly as part of the webpage. We are going to run code that resets what happens when we click on the title. In this case, we are simply going to change the message to "goodbye".

Now when we click on the title, we indeed get the message:

Again, a common way to get around paywalls is to run some code like that that change which functions will be called.

Putting it all together

Now let's put this all together in order to hack Twitter to allow us (the non-chosen) to tweet 280 characters. Review Dildog's instructions above.

The first step is to get to Chrome Developer Tools. Dildog suggests F12. I suggest right-clicking on the Tweet button (or Reply button, as I use in my example) and doing "Inspect", as I describe above.

You'll now see your screen split in half, with the DOM toward the right, similar to how I describe above. However, Twitter's app is really complex. Well, not really complex, it's all basic stuff when you come right down to it. It's just so much stuff -- it's a large web app with lots of parts. So we have to dive in without understanding everything that's going on.

The Tweet/Reply button we are inspecting is going to look like this in the DOM:

The Tweet/Reply button is currently greyed out because it has the "disabled" attribute. You need to double click on it and remove that attribute. Also, in the class attribute, there is also a "disabled" part. Double-click, then click on that and removed just that disabled as well, without impacting the stuff around it. This should change the button from disabled to enabled. It won't be greyed out, and it'll respond when you click on it.

Now click on it. You'll get an error message, as shown below:

What we've done here is bypass what's known as client-side validation. The script in the web page prevented sending Tweets longer than 140 characters. Our editing of the DOM changed that, allowing us to send a bad request to the server. Bypassing client-side validation this way is the source of a lot of hacking.

But Twitter still does server-side validation as well. They know any client-side validation can be bypassed, and are in on the joke. They tell us hackers "You'll have to be more clever". So let's be more clever.

In order to make longer 280 characters tweets work for select customers, they had to change something on the server-side. The thing they added was adding a "weighted_character_count=true" to the HTTP request. We just need to repeat the request we generated above, adding this parameter.

In theory, we can do this by fiddling with the scripting. The way Dildog describes does it a different way. He copies the request out of the browser, edits it, then send it via the command-line using curl.

We've used the [Elements] and [Console] tabs in Chrome's DevTools. Now we are going to use the [Network] tab. This lists all the requests the web page has made to the server. The twitter app is constantly making requests to refresh the content of the web page. The request we made trying to do a long tweet is called "create", and is red, because it failed.

Google Chrome gives us a number of ways to duplicate the request. The most useful is that it copies it as a full cURL command we can just paste onto the command-line. We don't even need to know cURL, it takes care of everything for us. On Windows, since you have two command-lines, it gives you a choice to use the older Windows cmd.exe, or the newer bash.exe. I use the bash version, since I don't know where to get the Windows command-line version of cURL.exe.

There's a lot of going on here. The first thing to notice is the long xxxxxx strings. That's actually not in the original screenshot. I edited the picture. That's because these are session-cookies. If inserted them into your browser, you'd hijack my Twitter session, and be able to tweet as me (such as making Carlos Danger style tweets). Therefore, I have to remove them from the example.

At the top of the screen is the URL that we are accessing, which is https://twitter.com/i/tweet/create. Much of the rest of the screen uses the cURL -H option to add a header. These are all the HTTP headers that I describe above. Finally, at the bottom, is the --data section, which contains the data bits related to the tweet, especially the tweet itself.

We need to edit either the URL above to read https://twitter.com/i/tweet/create?weighted_character_count=true, or we need to add &weighted_character_count=true to the --data section at the bottom (either works). Remember: mouse doesn't work on command-line, so you have to use the cursor-keys to navigate backwards in the line. Also, since the line is larger than the screen, it's on several visual lines, even though it's all a single line as far as the command-line is concerned.

Now just hit [return] on your keyboard, and the tweet will be sent to the server, which at the moment, works. Presto!

Twitter will either enable or disable the feature for everyone in a few weeks, at which point, this post won't work. But the reason I'm writing this is to demonstrate the basic hacking skills. We manipulate the web pages we receive from servers, and we manipulate what's sent back from our browser back to the server.

Easier: hack the scripting

Instead of messing with the DOM and editing the HTTP request, the better solution would be to change the scripting that does both DOM client-side validation and HTTP request generation. The only reason Dildog above didn't do that is that it's a lot more work trying to find where all this happens.

Others have, though. @Zemnmez did just that, though his technique works for the alternate TweetDeck client (https://tweetdeck.twitter.com) instead of the default client. Go copy his code from here, then paste it into the DevTools scripting [Console]. It'll go in an replace some scripting functions, such like my simpler example above.

The console is showing a stream of error messages, because TweetDeck has bugs, ignore those.

Now you can effortlessly do long tweets as normal, without all the messing around I've spent so much text in this blog post describing.

Now, as I've mentioned this before, you are only editing what's going on in the current web page. If you refresh this page, or close it, everything will be lost. You'll have to re-open the DevTools scripting console and repaste the code. The easier way of doing this is to use the [Sources] tab instead of [Console] and use the "Snippets" feature to save this bit of code in your browser, to make it easier next time.

The even easier way is to use Chrome extensions like TamperMonkey and GreaseMonkey that'll take care of this for you. They'll save the script, and automatically run it when they see you open the TweetDeck webpage again.

An even easier way is to use one of the several Chrome extensions written in the past day specifically designed to bypass the 140 character limit. Since the purpose of this blog post is to show you how to tamper with your browser yourself, rather than help you with Twitter, I won't list them.

Conclusion

Tampering with the web-page the server gives you, and the data you send back, is a basic hacker skill. In truth, there is a lot to this. You have to get comfortable with the command-line, using tools like cURL. You have to learn how HTTP requests work. You have to understand how web pages are built from markup, style, and scripting. You have to be comfortable using Chrome's DevTools for messing around with web page elements, network requests, scripting console, and scripting sources.

So it's rather a lot, actually.

My hope with this page is to show you a practical application of all this, without getting too bogged down in fully explaining how every bit works.