Is there a way to block HTTP requests with Javascript?

Question

Ultimately what I am looking for is a way to actually block all network traffic on a given browser tab. So I don't know if blocking HTTP requests would block things like streaming videos and stuff, but it's a start.

The reason for this question is that I have moved to a developing country with expensive internet and I am annoyed at websites that continue to suck up bandwidth after the page has apparently finished loading. That includes pages with infinite scrolling (seems to be becoming popular on news sites), sites that automatically start playing videos, and any other kind of stuff that might be running in the background. I could not find a Chrome extension to turn off/on internet traffic for a tab. I know that it is possible to set a tab to offline under Developer Tools > Network, but it is not practical to use that method constantly for regular browsing. I want to be able to turn of network traffic with a hotkey or even automatically after a page has loaded.

I think the following code which I found elsewhere on SO works to intercept an HTTP request. But then I don't know how to block it at that point.

XMLHttpRequest.prototype.send = function() {
  //what now?
}

And one more thing. After I have blocked all requests, how can I re-enable them? (How do I safely revert XMLHttpRequest.prototype.send to it's original form?) I suppose I could try to capture the original function in a variable and "re-attach" it later, but for an object that would require cloning, and I can't use a library like jQuery. I just tried:

bob = Object.create(XMLHttpRequest.prototype.send)
XMLHttpRequest.prototype.send = function() {
  console.log("Nope.")  
  return false
}
XMLHttpRequest.prototype.send = bob

But that didn't seem to work.

You could always turn off javascript in the browser and then back on when you need it — StudioTime
– StudioTime, Commented May 19, 2017 at 9:10
have you installed an adblocker? That would get rid of a lot in many cases. You probably don't want to stop all traffic on a page because so many sites use ajax to load content these days, and it might be content that you actually want. For videos, if they still use Flash you can install the Flashblocker plugin which lets you whitelist sites that can play video, or you just enable each video as and when you want it. Not sure about HTML5 videos but you can probably look around for a blocker. — ADyson
– ADyson, Commented May 19, 2017 at 9:10
@ADyson, I do want to block all traffic, even the useful stuff. — Moss
– Moss, Commented May 19, 2017 at 9:21
@DarrenSweeney At first I thought you didn't get my question. But now that I think about it, I suppose js would be needed to do all post-page-load requests, wouldn't it? I will do some testing. — Moss
– Moss, Commented May 19, 2017 at 9:22
Interesting results. Disabling javascript is helpful in some cases. For example, it turns Google search into a simple version that looks like it will save a lot of bandwidth. However, disabling JavaScript for a page doesn't seem to have any effect until the page is reloaded. So not exactly what I'm looking for. So my question is still legitimate. — Moss
– Moss, Commented May 19, 2017 at 9:53

Pierre Burton · Accepted Answer · 2017-05-19 09:52:59Z

10

You could simply add a return false and this will block every .send() methods.

Working fiddle (for code testing purpose) https://jsfiddle.net/L77cwcgb/

Actual snippet:

XMLHttpRequest.prototype.send = function() {
  return false;
}

edited May 19, 2017 at 9:52

answered May 19, 2017 at 9:29

Pierre Burton

2,0942 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

StudioTime Over a year ago

Probably because it's better to actually include the code in your answer instead of just a link with little explanation. It's not a lot of code after all.

Pierre Burton Over a year ago

Included snippets in answer can't be directly tweaked for testing. This live example contains a commented statement so the OP can try both cases.

Moss Over a year ago

Haha, so simple, now I feel stupid for asking. And it does seem to work, even for streaming videos. But there is a further complication which I have added to my question.

Moss Over a year ago

I don't know why it would be down voted. It works and is clear. I guess to make it better for anyone who wants to copy-paste later you could include the whole code in your answer, but it is obvious what to do anyway.

Pierre Burton Over a year ago

@Sovai, for fetch, you can simply try to override the default implementation like so: var nativeFetch = window.fetch; // Save the native implementation window.fetch = () => null; Or anything similar that fits your needs.

|

Collectives™ on Stack Overflow

Is there a way to block HTTP requests with Javascript?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related