How To Hack A Paywall
It’s a whole lot easier than you think.
How many times has this happened to you? You Google something, then happily click on one of the top three results that and see what looks like exactly the information you were searching. You start reading, scroll a little bit, then two seconds later, a paywall appears—some full-screen overlay that blocks the content beneath it, demanding that you subscribe for $6.99 per month or disable your ad blocker or whatever else the publisher wants after luring you onto their site.
I’m going to show you how to circumvent these silly obstacles, and you won’t need any coding experience whatsoever. All you will be doing is using your web browser’s built-in functionality. It’s as easy as clicking here, clicking there, tapping a key and then you’re done. You only need a few rounds of practice before you’ll be telling the money-grubbing internet to go bother someone else.
Wait—is that legal?
I did a little research to find out if this was illegal, and if so, just how illegal. There are some general copyright protection issues in play, but in most cases (as far as I can tell) there’s nothing wrong with using your web browser’s built-in functionality simply to reformat content that has already been delivered to your web browser.
That’s right, the content is already there! All we are doing is clearing away a layer of cruft on top of it so that we can properly view it. Safari’s Reader View feature does this for you automatically in some cases.
So, if these websites were serious about protecting their content, they should not be giving it away like this, practically begging anyone with a bit of technical knowledge to simply ‘fix’ this problem.
Ready? Let’s do this.
Your Browser’s Developer Console
I’ll be using Chrome for this demonstration, but all modern browsers including Safari, Edge and Firefox will the same equivalent functions, you might just have to dig the menu for them. The first thing you have to find is access to is your browser’s developer tools. In Chrome, this can be found under View > Developer > Developer tools. You’ll see a panel appear across the bottom or side the window that looks like this:
Once you figure this out, you might as well learn the key command that makes this appear much quicker thank pocking around in the menu. On macOS, just press ⌘⌥ I (command + option + i).
Let’s try it with this article where I recently encountered a paywall asking that I disable my ad blocker before continuing.
After bring up the developer tools with ⌘⌥ I, here’s what I see.
Now we want to pick a tool from the toolbar along the top of the developer tools console called Select Elements, which can also be quickly accessed by the key command ⌘⇧ C (command + shift + c).
This tool allows you to hover over elements on the page you are viewing, which will highlight them in various colors (orange, blue, etc.). When you click the highlighted element, the HTML code of that element becomes selected in the Elements tab of the developer tools console.
Now that you have it selected, you can just press your Delete key and voilà, the code is deleted and the element is no longer rendered on the page.
Rinse and repeat with that translucent black background and now you can see the article clear as day once again.
But there’s another problem: The article won’t scroll anymore. The code that presented the layers of HTML for the paywall has also disabled scrolling on the entire page. So all we have to do is re-enable it.
To do that, select the Elements tab from the developer tools (if it’s not already selected) and expand the top portion of the tab that is displaying HTML code so that you can see enough of it.
We have to search for some CSS style code that is disabling scrolling so we can delete it. Luckily in this case, it’s visible right away on both the <html> and <body> tags. The code in question is the part that says:
style="overflow: hidden;"All you have to do is double click within that style attribute on the <html> tag and the contents will be automatically selected.
Now you just press your Delete key and it will be removed.
Repeat this with the <body> tag as well, as both will be necessary to re-enable scrolling in this case.
Give it a try to see if scrolling is now restored in your browser.
Ahh, much better. Once it works you can close your developer tools and read this article as God intended without all the trickery employed to make it unreadable.
If you liked this article and want to become a Medium member, please consider showing your support by using my referral link to sign up. I’ll do my best to keep bringing you tips and tricks for surviving the internet 😎.
