Webrequestblocking Manifest V3 Improves Browser Privacy

Author

Reads 403

Person browsing the web on a MacBook at a wooden desk with a smartphone.
Credit: pexels.com, Person browsing the web on a MacBook at a wooden desk with a smartphone.

With the introduction of Manifest V3, browser privacy has taken a significant leap forward. Manifest V3 blocks web requests by default, reducing the amount of data sent to third-party trackers.

This change is a major win for users who value their online anonymity. By blocking web requests, Manifest V3 prevents advertisers and trackers from collecting sensitive information about your browsing habits.

The new permission model in Manifest V3 requires extensions to declare the data they need to access, making it more transparent and secure. This shift in approach has been a long time coming, and it's about time browser extensions were held to a higher standard of accountability.

As a result, Manifest V3 has already led to a significant reduction in the number of trackers able to collect data from users. This is a major victory for online privacy, and it's only the beginning.

See what others are reading: Webrtc Web Real Time Communication

Permissions and Warnings

To use the web request API in your extension, you must declare the "webRequest" permission in the extension manifest. This permission requires host permissions and access to both the requested URL and its initiator.

Some permissions show warnings to users, but not all of them do. The list of permissions that show warnings can be found by following this guide: https://developer.chrome.com/docs/extensions/mv3/permission_warnings/#view_warnings You can test which warnings are shown when developing your extension by following this guide.

Adding declarativeNetRequest in the Manifest file will show a warning to users when installing the extension, specifically: "Block content on any page".

Readers also liked: Chrome Extension Manifest V3

Permission Warnings

A hand holding a smartphone displaying a VPN app screen for secure online browsing.
Credit: pexels.com, A hand holding a smartphone displaying a VPN app screen for secure online browsing.

Adding declarativeNetRequest in the Manifest file will show a warning to users when installing the extension: "Block content on any page". This warning is not shown for all permissions, but only for a specific list that can be found online.

Some permissions show warnings to users, while others do not. You can test which warnings are shown when developing the extension by following a specific guide available online.

You can check which warnings are shown by visiting a certain Chrome page. This page is not specified here, but you can find it by following the instructions in the guide.

If you add a less powerful permission to an updated version of your extension, it will not show a warning popup if the previous version already has a more powerful permission. This means that you need to be careful when updating your extension's permissions.

To test for popup warnings due to new permissions on an updated version, you need to pack the previous version of your extension, install it, and then pack the latest version. You can then drop the latest version's crx file to check for the new permissions popup.

Worth a look: Html Popup Box

On Send Headers

A close-up of a padlock securing a wire fence, symbolizing protection and safety.
Credit: pexels.com, A close-up of a padlock securing a wire fence, symbolizing protection and safety.

The onSendHeaders event is fired just before a request is sent to the server. This allows for modifications made in the onBeforeSendHeaders callback to be visible.

The callback function for onSendHeaders looks like this: (details: object) => void. This function is where you can make any final adjustments before the request is sent.

The onSendHeaders event also includes a filterRequestFilter parameter, which is used to filter the request. This is useful if you need to block certain requests or modify them in some way.

The extraInfoSpecOnSendHeadersOptions[] parameter is optional and can be used to specify additional options for the onSendHeaders event. This can be useful if you need to include specific information in the request headers.

The onSendHeaders event is a crucial part of the request lifecycle, and understanding how it works is essential for managing permissions and warnings effectively.

Resource Type

Resource Type is a crucial aspect of Permissions and Warnings. There are several types of resources that can be specified, including "main_frame" which is the main frame of a resource.

Credit: youtube.com, How to preview Chrome Extension permission warnings

Specifying a resource as a "sub_frame" allows for more targeted permissions and warnings. This is useful for resources that are part of a larger frame.

An "image" resource is a visual element that can be used in a web page. This type of resource requires specific permissions and warnings for accessibility and copyright reasons.

A "ping" resource is used for diagnostic purposes, such as checking network connectivity. This type of resource typically requires permission for security and privacy reasons.

Content Security Policy (CSP) reports are generated by a "csp_report" resource. These reports provide valuable information for security and compliance purposes.

A "media" resource is used for audio or video content. This type of resource requires specific permissions and warnings for copyright and accessibility reasons.

A "websocket" resource is used for real-time communication between a web page and a server. This type of resource requires permission for security and privacy reasons.

A "webbundle" resource is a package of web resources that can be used together. This type of resource requires specific permissions and warnings for security and compliance reasons.

Implementation Details

Credit: youtube.com, Google will soon kill ad blockers with manifest v3 what s next

Developing an extension that uses the web request API requires attention to several implementation details.

Several implementation details can be important to understand when developing an extension that uses the web request API.

The web request API in Manifest V3 is more restrictive than in Manifest V2, which means you'll need to be more mindful of how you're blocking requests.

In Manifest V3, the web request API is more declarative, meaning you need to specify what you want to block rather than how to block it.

You'll need to consider the specific implementation details of the web request API, such as how to handle different types of requests and how to prioritize your blocking rules.

To effectively block requests, you'll need to understand how the web request API handles different types of requests, including navigation requests and fetch requests.

Error Handling

Error handling is crucial when it comes to web request blocking in Manifest V3. If you try to register an event with invalid arguments, a JavaScript error will be thrown, and the event handler will not be registered.

Credit: youtube.com, Solving the invalid value for web_accessible_resources in Chrome Extension Manifest V3

If an error is thrown while an event is handled or if an event handler returns an invalid blocking response, an error message is logged to your extension's console, and the handler is ignored for that request.

You can catch errors that occur during event handling by listening for the onErrorOccurred event. This event is fired when an error occurs, and it provides useful details about the error.

The onErrorOccurred event has a callback function that takes an object with details about the error. The callback function looks like this: (details: object) => void.

For more insights, see: Web Callback

Event Listeners and Handlers

Event Listeners and Handlers are crucial components of webRequestBlocking manifest v3. You can register an event listener for a web request using a variation on the usual addListener() function, which takes a mandatory callback function and an optional filter argument.

The callback function is passed a dictionary containing information about the current URL request. Depending on the specific event type and the content of opt_extraInfoSpec, the information in this dictionary may include blocking status, request headers, or other details.

Credit: youtube.com, Manifest V3 Explained - Technical

For example, when listening for the onBeforeRequest event, the callback function can return a webRequest.BlockingResponse to determine the further life cycle of the request, allowing for canceling or redirecting the request. The optional opt_extraInfoSpec array can contain the string 'blocking' to handle the callback function synchronously.

Here are some common event listeners and handlers in webRequestBlocking manifest v3:

  • onBeforeRequest: Fired when a request is about to occur.
  • onHeadersReceived: Fired when HTTP response headers of a request have been received.
  • onSendHeaders: Fired just before a request is going to be sent to the server.

Remember to call handlerBehaviorChanged() when the behavior of the webRequest handlers has changed, as this function call is expensive and should be avoided whenever possible.

Registering Event Listeners

Registering event listeners is a crucial step in setting up event listeners and handlers. You use a variation on the usual addListener() function to register an event listener for a web request.

The addListener() function takes three arguments: a callback function, a filter argument, and an optional extra info argument. The callback function is passed a dictionary containing information about the current URL request.

The information in this dictionary depends on the specific event type as well as the content of opt_extraInfoSpec. If the optional opt_extraInfoSpec array contains the string 'blocking', the callback function is handled synchronously.

Credit: youtube.com, Event Listeners - Javascript - Tutorial 14

This means that the request is blocked until the callback function returns. The callback can return a webRequest.BlockingResponse that determines the further life cycle of the request.

Here are the definitions of the three arguments to the web request API's addListener():

If the optional opt_extraInfoSpec array contains the string 'asyncBlocking', the extension can generate the webRequest.BlockingResponse asynchronously. This is only allowed for the onAuthRequired event.

On Before Send Headers

You can listen for the onBeforeSendHeaders event to modify request headers. The callback function is passed a dictionary containing information about the current URL request.

The callback function can return a webRequest.BlockingResponse to determine the further life cycle of the request. This response allows canceling or modifying headers.

The onBeforeSendHeaders event is fired just before a request is going to be sent to the server. Modifications made in previous onBeforeSendHeaders callbacks are visible at this time.

Here are the arguments to the onBeforeSendHeaders callback function:

  • callback function: (details: object) => void
  • filter: RequestFilter
  • extraInfoSpec: OnSendHeadersOptions[] optional

The extraInfoSpec array can contain the string "requestHeaders" to specify that the request header should be included in the event.

Filtering and Blocking

Credit: youtube.com, Chrome Extensions & Manifest v3 with Google DevRel Oliver Dunk

Filtering and blocking are crucial aspects of webRequestBlocking in Manifest V3. You can specify filters to apply to webRequest events using the RequestFilter object.

A RequestFilter object can have several properties, including tabId, types, urls, and windowId. The types property can be an array of request types, such as "script" or "other".

The urls property can be an array of URLs or URL patterns. For example, "abc*" would match any URL that starts with "abc".

You can also use the urlFilter property to specify a pattern that is matched against the network request URL. urlFilter is composed of an optional left/domain name anchor, a pattern, and an optional right anchor.

Here's an example of how to use urlFilter to block URLs that start with "adservice.google.com/adsid/google/ui" on the domain "example.com":

  • urlFilter: "adservice.google.com/adsid/google/ui|example.com"

Note that only one of urlFilter or regexFilter can be specified, and both must be composed of only ASCII characters.

Credit: youtube.com, The Hidden Agenda Of Google's Manifest V3 Update

The declarativeNetRequest API also supports dynamic rules, which can be added or modified at runtime. However, there is a limit of 5,000 dynamic rules per extension.

In addition to filtering and blocking, you can also use the onHeadersReceived and onBeforeRequest events to modify network requests. The onHeadersReceived event is fired when HTTP response headers of a request have been received, while the onBeforeRequest event is fired when a request is about to occur.

Take a look at this: Dynamic Web Page

Ghostery's tracker blocking relies on a list of over 4,000 filters, which would have to be rewritten to work with the new declarativeNetRequest API.

This would likely result in losing some filters, as certain types of matching rules, like Regex's, cannot be implemented in the new grammar.

The declarativeNetRequest API has a limit of 100 whitelisted sites, which is prohibitively low for Ghostery's "Trust Site" feature.

The new API also doesn't report the results of blocking back to the extension, so Ghostery would still have to run filters on all URLs via the webRequest API to display the list of trackers seen and blocked.

Take a look at this: List of Web Service Protocols

Credit: youtube.com, How Can I Block All Tracking Cookies? - SearchEnginesHub.com

Ghostery's cookie blocking uses a heuristic third-party cookie blocker, which would be affected by the dynamic filter cap and asynchronous nature of the declarativeNetRequest API.

The cookie blocking list would have to be reduced due to the limited rule threshold of the declarativeNetRequest API, which is already being maxed out with just 4,000 filters.

The declarativeNetRequest API can't distinguish between first-party and third-party contexts for a request, which would make it difficult to block cookies inside iframes.

Explore further: Html to Pdf Api

Extension Privacy

In WebRequestBlocking Manifest V3, extension privacy is a major concern.

Extensions can now block web requests in Manifest V3, which is a significant improvement over Manifest V2.

This change also requires extensions to declare a new permission called "activeTab" in their manifest file.

As a result, users will see a prompt to grant the extension permission to access their active tab.

Extensions can no longer access the webRequest.onCompleted event, which was a way for extensions to access sensitive information.

This change helps to prevent extensions from accessing sensitive information and improves overall user security.

Examples and Declarative Net Request

Credit: youtube.com, Will Manifest V3 Kill Chrome?

In Manifest V3, the webRequestBlocking API is replaced by declarativeNetRequest, which provides a more efficient way to block requests. To block all requests to www.evil.com, you can use the following declarativeNetRequest rule: {"id": 1, "priority": 1, "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "websocket", "other"], "urls": ["*://www.evil.com/*"]}. This rule matches all URLs that start with www.evil.com.

The declarativeNetRequest API also provides a more efficient way to delete the User-Agent header from all requests. You can use the following rule: {"id": 1, "priority": 1, "extraHeaders": {"User-Agent": ""}}.

The declarativeNetRequest API uses a different syntax than webRequestBlocking, with the following supported constructs: (optional Left/Domain name anchor) + pattern + (optional Right anchor). The urlFilter must be composed of only ASCII characters, and is matched against a URL where the host is encoded in the punycode format and any other non-ASCII characters are URL encoded in UTF-8.

Here is a table showing how the urlFilter matches different URLs:

Examples

A close-up shot of a modern, mounted surveillance camera highlighting security and surveillance.
Credit: pexels.com, A close-up shot of a modern, mounted surveillance camera highlighting security and surveillance.

You can block all requests to a specific website, such as www.evil.com, by using a blocking event handler that requires the "webRequest" and "webRequestBlocking" permission in the manifest file.

This method can be inefficient if the website is not the primary target, as it will block all requests to that site, even if they're not intended for it.

To achieve the same goal in a more efficient way, you can modify the code to only block requests targeted to the specific website, reducing unnecessary traffic.

The chrome.webRequest API can be used to delete the User-Agent header from all requests, which can be useful for privacy or security purposes.

Specifying the "extraHeaders" parameter can lead to Cross-Origin Resource Sharing (CORS) violations, so it's essential to use it carefully.

Declarative Net Request

Declarative Net Request is a powerful API that allows you to block or modify network requests in a more efficient way compared to the traditional webRequestBlocking API. It's a must-know for developers who want to create extensions that interact with web pages.

Credit: youtube.com, BlinkOn 16: Finer Control of Declarative Net Request Rules

In Manifest V3, declarativeNetRequest is the recommended replacement for webRequestBlocking. You can migrate your request modification logic to chrome.declarativeNetRequest rules and replace the webRequestBlocking permission with declarativeNetRequest.

The declarativeNetRequest API uses a declarative syntax, meaning you define the rules upfront, rather than using a blocking event handler. This makes it more efficient and easier to manage.

The urlFilter syntax is used to match against the network request URL. It's composed of the following parts: (optional Left/Domain name anchor) + pattern + (optional Right anchor). For example, "abc" matches https://abcd.com and https://example.com/abcd, but not https://ab.com.

Here's a table summarizing the urlFilter syntax:

Note that the urlFilter must be composed of only ASCII characters and is matched against a URL where the host is encoded in the punycode format and any other non-ASCII characters are URL encoded in UTF-8.

Claire Beier

Senior Writer

Claire Beier is a seasoned writer with a passion for creating informative and engaging content. With a keen eye for detail and a talent for simplifying complex concepts, Claire has established herself as a go-to expert in the field of web development. Her articles on HTML elements have been widely praised for their clarity and accessibility.

Love What You Read? Stay Updated!

Join our community for insights, tips, and more.