Easy fix for: Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load

At URIports, we process a lot of Reporting API intervention reports containing the following violation:

Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load

Intervention violations can cause unwanted behavior and are visible in the visitors' developer console. Additionally, browsers can send violation reports to alert website administrators using the Reporting API. This allows web developers to resolve these violations proactively and monitor how frequently they occur.

What is the intervention violation about?

This violation is about the javascript event listener beforeunload. Here is an example of that type of listener:

window.addEventListener('beforeunload', (event) => {
  event.returnValue = 'Are you sure you want to leave?';
});

This event enables a web page to trigger a confirmation dialog asking users if they want to leave the page. The browser navigates to the new page when the user confirms or cancels the navigation.

Why would you use it?

You can warn your user that user input is lost when leaving your site. Like:

• Your user has not yet completed a form, e.g., when making a purchase;
• There is a network requested that is not completed yet, e.g., saving the user input;
• <sarcasm>Your user is missing out on a fantastic offer...</sarcasm>

Sadly, this feature was (and still is) misused by many site owners, and to combat this misuse, Chrome 60+ will only show a confirmation box if the user has interacted with the page. When no user interaction is detected, the confirmation box is not shown and the violation "Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load" is triggered.

How to fix this violation

The fix is pretty straightforward: Make sure the user interacts with your page before showing the beforeunload confirmation box. If the user did not interact with your page, do not create a beforeunload event listener.

Here is an example of a page that listens to text input changes. If the element contains a value, it adds a listener for beforeunload. If the element is empty, it removes the listener:

This is just an example, but the usage comes down to only using the beforeunload event when the user has interacted with the page and only using the confirmation box if it is beneficial for the user!

const beforeUnloadListener = (event) => {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to exit?";
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
  }
});

Monitor this and many other violations on your site

If you want to monitor these violations, check out our monitoring platform URIports. With our service, you can monitor network traffic, network disruptions, content security policy violations, and much much more!

If you have any questions about this subject, please drop me a line at @roelandkuiper or @uriports