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".

https://i.sstatic.net/JiWbZ.png

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.

https://i.sstatic.net/wt5Z6.png

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

Is it possible to use regular expressions for this purpose?

javascriptajaxgoogle-chromexmlhttprequestdeveloper-tools

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of updating objects with React's useState() function

Having trouble updating my state using useState(). Whenever the alert pops up, it shows the initial value of my state. Below is a sample code snippet. I expect that when I click the Save button, setData should update data with the new form values, then di ...

javascriptreactjs

Tips for stopping variables from leaking in JavaScript

I'm currently working on a JavaScript code for my task manager website. Each page has its own JS file, but I've noticed that the data saved in one file seems to leak over to the others. How can I contain these variables so that tasks don't s ...

javascripthtmlcssvariables

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

javascriptthree.js

Issue with JQuery executing PHP in Chrome extension

I have been attempting to retrieve the PHP result after using JQuery's post method within the context of a chrome extension. Unfortunately, all I am seeing is the unprocessed PHP code. Below is how I am calling the post method : $.post(chrome.extens ...

javascriptphpjquerygoogle-chrome

Using jQuery to trigger an action when a user clicks on a regular audio element

Is there a way to detect a click on the default audio element of a browser using jQuery? I'm having trouble getting it to work in Chrome. $('audio').click(function(){ alert("You have clicked on an audio player"); }); <script ...

javascriptjqueryaudiohtml5-audio

Is there an Angular directive that can replicate a mouseenter event?

Is there a way to simulate a mouseenter event with a directive? I have been searching for a directive that can simulate a mouseenter event, but all I have found so far is one that binds a function to mouse over or karma tests for simulating mouse over. W ...

javascriptjqueryangularjsangularjs-directive

Using Express JS to implement a post method for multipart form data transmission

I recently attempted to send form data to my express js server. Below is the code snippet from my pug file: form(action="/profile" method="post" enctype="multipart/form-data") input(type="file" accept="image/*" name="profileimage") input(type="text" nam ...

javascriptexpresspugmultipartform-data

Is there an issue with retrieving data from asp.cs through ajax?

Currently, I am in the process of learning asp.net and trying to access server data to populate a textbox with the retrieved information. public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) ...

jqueryasp.netajaxwebforms

What is the method for retrieving an array or object that contains a collection of files designated for uploading within the jQuery file upload plugin?

Currently, I have successfully integrated a form into my Rails site and set up the jQuery file upload plugin. The upload form functions properly with the ability to select multiple files and utilize all ajax upload features. However, a challenge I am faci ...

javascriptjqueryajaxformsfile-upload

Update the image on a webpage within a template using AJAX code

I manage a website that utilizes templates. Within the template, there is a main image that I need to replace on specific pages, not throughout the entire site. I am seeking a way to change this main image to a new one on select pages using Ajax. Upon re ...

javascriptjqueryajax

"Track the progress of a form submission with a loading indicator using Sweet

I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...

javascripthtmlsweetalert2

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

javascriptcssreactjsmaterial-ui

VueJS / v-html is displaying a blank page (Bokeh-html)

Especially as a newcomer to VueJS, I am currently in the process of trying to showcase a local HTML file within the Vue Application. The method I'm using to fetch the HTML file involves Axios, here's how it goes: <template> <div> ...

javascripthtmljsonvue.jsbokeh

How can I convert a PHP date to a JavaScript date that works across all

I am attempting to create a JavaScript countdown timer that relies on the server time, but I'm facing difficulties in transferring PHP time to JavaScript seamlessly across different browsers. While it functions correctly in modern browsers, older ones ...

phpjavascript

Best practice for organizing a class in Symfony2

As a newcomer to Symfony2, I am curious about the recommended approach for handling certain tasks. In my application, there are numerous administrative actions that involve receiving form data and processing it. Typically, after processing is completed, t ...

phpajaxsymfony

What are the methods for handling JSON type in a web server?

Hey there! I'm currently working on making an AJAX call from the browser to a web service. The data is being sent as JSON from the browser to the web service. I'm wondering if there is a different way to retrieve it as a string and then deseriali ...

javascriptasp.netajaxweb-services

Exploring the power of Vue3 with Shadow DOM in web components

I've been experimenting with web components using Vue3 and I'm curious about how the Shadow DOM works. I encountered an issue where a third party library was trying to access elements using getElementById() and it was throwing an error because th ...

javascriptvue.jsweb-componentvuejs3

What steps can be taken to ensure that AngularJS does not detach a form input's value from its model if it is invalid?

While working on a form implementation in AngularJS, I encountered a baffling behavior that has left me puzzled. It seems that whenever I set ng-minlength=5 as an input attribute, AngularJS disconnects the value until it meets the length requirement. Thi ...

javascriptangularjsvalidation

D3 - Error: Unable to access property 'text' of an undefined method

I want to create a visual representation of significant events that have occurred in the United States over the past 30 years. Below is a snippet of code I am using for this project: var mevent = svg.append("text") .attr("class", "year event") .at ...

javascriptd3.js

Alter the component and then refresh it

I am encountering an issue with a component that has an event handler for a "like" icon. The goal is to allow users to click the like icon, update the database to indicate their liking of the item, and then re-render the component to visually reflect this ...

javascriptreactjs