Request Blocking Using Javascript?

Question

How to block requests from a certain URL using JavaScript? For example, the manual way to do so on chrome will be to open the inspect page, go to network and block from there. But I need to block requests from certain URLs for an automated test that i am writing in JavaScript (using testcafe, if that offers any help).

Here are screenshots of manually blocking a request from chrome, I want to do the same thing automatically in my test/JavaScript: ScreenShot1

Thank you.

Edit: I tired following this post: Blocking request in Chrome but for some reason i always keep getting an error stating that chrome is undefined when I use chrome.webRequest

Expropriate

you might want to check this out github.com/cyrus-and/chrome-remote-interface/wiki/… – Caoutchouc

Are you trying to use an extension to block requests? – Silo

Possible duplicate of Blocking request in Chrome – Sulk

@AbhishekAnand, I checked that already and tried it with changing the return pathname.match(/\.(css|png|svg)$/); to return pathname.match(/cdn/); to mach the blocking case in my screenshots. it didnt work – Expropriate

@VitalyMenchikovsky I tried this, I always seem to get an error when using chrome.webRequest it says chrome is undefined. – Expropriate

@Silo what do you mean? Sorry i dont get the question. – Expropriate

What do you mean by "block requests"? – Silo

@Silo I dont know really how to explain it. Best follow the screenshots hmm, ok try this: -in chrome open a new tab, then press CTRL+SHIFT+i -Navigate to the network tab -now go to any website and you will see the network tab page fill up, right click on one of them and you will have an option to block by URL, then this URL will be added to a filter at the bottom of the page. you can also use the + sign to add more URL with wildcards like in the screenshot – Expropriate

At Chromium/Chrome you can set a Policy, see chrome Pop-up blocker when to re-check after allowing page – Silo

Answer 1

You can use the nock library, which allows you to intercept requests and process them as you wish.

Veronaveronese

Answer 2

To achieve that you need to intercept & block the request originating from the response page to load ads. What you are looking for is the core principle of an ad-blockerwhich is possible with a browser extension.

so create a manifest.json with

{
    "manifest_version": 2,
    "name": "REQblock",
    "version": "2.3.4",
    "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
    "background": {
      "scripts": ["script.js"]
    }    
} 

and then create script.json

function getBlacklistUrls(){    
    var  urls = [
    "*://cdn.sstatic.net/*",
    "*://*.twitter.com/*",
    "*://*.youtube.com/*"
    ];

    return urls; 
};

(async () => {
  var dummyCallback = function (details) {
    return {
      cancel: true
    };
  };

  var list = getBlacklistUrls();
  var blockedUrls = { urls: list };

  //Add Listener
  chrome.webRequest.onBeforeRequest
    .addListener(dummyCallback,blockedUrls,["blocking"]);
})();

The above chrome extension will block all url returning from getBlacklistUrls(). If you still don't undestand what chrome extensions are and how to load & enable check my ad-blocker AdvertShield at github and follow the wiki as how to install it.

The result will come something like this

Hospitality