Prevent access to URLs that do not match a certain pattern in Chrome

Question

Prevent access to URLs that do not match a certain pattern in Chrome

I will be implementing a filter to block request URLs that do not match a specific pattern.

To achieve this, you can utilize the request blocking feature within Google Chrome's network tab. Simply right click on the request Row and select "block request URL".

For instance, in the request blocking tab, I have 7 XMLHttpRequest(XHR) URLs sent with Ajax:

You can add a pattern (e.g., *family*) and block requests with that specific pattern by clicking the plus sign.

Remember: Patterns are case sensitive.

Looking to block requests without the word "family"? Here's how:

Is it possible to use regular expressions for this purpose?

javascript ajax google-chrome xmlhttprequest developer-tools

Answer 1

Answer №1

To prevent requests from the client browser, you can utilize HTTP Request Blocker and Request blocker extension available for Google Chrome.

When it comes to managing requests on the client-side, consider implementing the following code snippet to create an interceptor in AngularJS that allows you to control requests before and after they are sent:

myApp.config(['$httpProvider', '$locationProvider',
            function ($httpProvider, $locationProvider) {
            $httpProvider.interceptors.push(function ($q) {
                return {
                    'request': function (config) {

                    },
                    'response': function (config) {

                    },
                    'requestError': function (config) {

                    },
                    'responseError': function (config) {

                    },
                }
            });
        }]);

Request blocker extension

Interceptors guide

Answer 2

To prevent requests from the client browser, you can utilize HTTP Request Blocker and Request blocker extension available for Google Chrome.

When it comes to managing requests on the client-side, consider implementing the following code snippet to create an interceptor in AngularJS that allows you to control requests before and after they are sent:

myApp.config(['$httpProvider', '$locationProvider',
            function ($httpProvider, $locationProvider) {
            $httpProvider.interceptors.push(function ($q) {
                return {
                    'request': function (config) {

                    },
                    'response': function (config) {

                    },
                    'requestError': function (config) {

                    },
                    'responseError': function (config) {

                    },
                }
            });
        }]);

Request blocker extension

Interceptors guide

Answer 3

Answer №2

If you take a closer look at the DevTools source code

https://github.com/ChromeDevTools/devtools-frontend/blob/aaad45c61dfb22ad885b507a0f38f19863c09553/front_end/network/BlockedURLsPane.js#L194

    for (var blockedUrl of this._blockedCountForUrl.keys()) {
      if (this._matches(url, blockedUrl))
        result += this._blockedCountForUrl.get(blockedUrl);
    }
    return result;
  }

  /**
   * @param {string} pattern
   * @param {string} url
   * @return {boolean}
   */
  _matches(pattern, url) {
    var pos = 0;
    var parts = pattern.split('*');
    for (var index = 0; index < parts.length; index++) {
      var part = parts[index];
      if (!part.length)
        continue;
      pos = url.indexOf(part, pos);
      if (pos === -1)
        return false;
      pos += part.length;
    }
    return true;
  }

The interesting thing is that it doesn't utilize RegEx. Therefore, in simple terms, it does not have support for using regular expressions. However, the good news is that you can easily implement this feature yourself by adding regex patterns and submitting a pull request to suggest this enhancement.

Answer 4

If you take a closer look at the DevTools source code

https://github.com/ChromeDevTools/devtools-frontend/blob/aaad45c61dfb22ad885b507a0f38f19863c09553/front_end/network/BlockedURLsPane.js#L194

    for (var blockedUrl of this._blockedCountForUrl.keys()) {
      if (this._matches(url, blockedUrl))
        result += this._blockedCountForUrl.get(blockedUrl);
    }
    return result;
  }

  /**
   * @param {string} pattern
   * @param {string} url
   * @return {boolean}
   */
  _matches(pattern, url) {
    var pos = 0;
    var parts = pattern.split('*');
    for (var index = 0; index < parts.length; index++) {
      var part = parts[index];
      if (!part.length)
        continue;
      pos = url.indexOf(part, pos);
      if (pos === -1)
        return false;
      pos += part.length;
    }
    return true;
  }

The interesting thing is that it doesn't utilize RegEx. Therefore, in simple terms, it does not have support for using regular expressions. However, the good news is that you can easily implement this feature yourself by adding regex patterns and submitting a pull request to suggest this enhancement.

Prevent access to URLs that do not match a certain pattern in Chrome

Answer №1

Answer №2

Similar questions

Executing Ajax requests to interact with a RESTful API

Dealing with AngularJS memory leaks caused by jQuery

Can Ajax and WAMP Server work together?

The success callback method is no longer correctly referencing the variable due to a change in the AJAX request

At what point are routed components initialized?

Trying to assign a property to an undefined variable inside a function

The ng-model is not properly syncing values bidirectionally within a modal window

Is there a way to add pins to separate entity layers, and then remove them from a specific entity layer using Bing Maps AJAX Control, Version 7.0?

Error message: "Element not found in Selenium WebDriver on (bamboo)"

Identifying and Blocking Users from Accessing External Domains Outside of the Angular Application

Error message: JQuery IAS Infinite Scrolling + Packery - The IASCallbacks function is not declared

Guide for utilizing ajax and php to establish a connection with a mysql database when developing with phonegap

Is Q.js capable of functioning independently from node.js and require()?

What is the best approach to establish multiple global prefixes in a NestJS project?

Displaying content based on changing conditions fetched from the database

Personalized Svelte interface Slider tag

Determine image size (pre-upload)

Create a function called "insertEvent" that will insert a new event on a specified date

Error: Unable to execute $(...).stellar since it is not a recognized function

Using a jQuery calendar to generate a JSON date range