Navigator.sendBeacon() to pass header information

Question

I am using navigator for communicating with the server , but problem is that we need to pass some header information as there is filter which recognise the request is from the valid source.

Can anybody help on this?

Thanks.

Answer 1

See the Navigator.sendBeacon MDN documentation for further information.

Create a blob to provide headers. Here is an example:

window.onunload = () => {
  const body = {
    id,
    email,
  };
  const headers = {
    type: 'application/json',
  };
  const blob = new Blob([JSON.stringify(body)], headers);
  navigator.sendBeacon('url', blob);
};

navigator.sendBeacon will send a POST request with the Content-Type request header set to whatever is in headers.type. This seems to be the only header you can set in a beacon though, per W3C:

The sendBeacon method does not provide ability to customize the request method, provide custom request headers, or change other processing properties of the request and response. Applications that require non-default settings for such requests should use the [FETCH] API with keepalive flag set to true.

I was able to observe some of how this worked through this Chromium bug report.

Answer 2

I want to call an api when someone close the tab, so I tried to use navigator.sendBeacon() but the problem is we need to pass the Authorization token into it and sendBeacon does not provide that, so I found other solution that is more effective and very easy to implement.

The solution is a native fetch API with a keepalive flag in pagehide event.

Code

window.addEventListener('pagehide', () => {
  fetch(`<URL>`, {
    keepalive: true,
    method: '<METHOD>',
    headers: {
      'content-type': 'application/json',
      // any header you can pass here
    },
    body: JSON.stringify({ data: 'any data' }),
  });
});

FAQs / TL;DR Version

1. Why should we need to use the keepalive flag?

   • The keepalive option can be used to allow the request to outlive the page. Fetch with the keepalive flag is a replacement for the Navigator.sendBeacon() API.
   • Learn more about it, please visit https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters

2. What is PageLifecycle API

   

   • Learn more about it, please visit https://developer.chrome.com/blog/page-lifecycle-api/

3. From the Page Lifecycle image, shouldn't unload be considered as the best choice?

   • unload is the best event for this case but unload is not firing in some cases on mobile and it also does not support the bfcache functionality.
   • I also notice that when I am using unload then I am not getting proper output in the server log. why? IDK, if you know about it then comments are welcome.
   • Nowadays, It's also not recommended by the developers.
   • Learn more about why unload is not recommended: https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes
   • Learn more about pagehide: https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

Answer 3

As written in the Processing Model of sendBeacon :

Extract object's byte stream (transmittedData) and content type (contentType).

How extraction is performed is described here

What I've gathered is that the content type of the transmitted data is extracted, and it is set as the Content-Type of the HTTP request.

1) If a Blob object is sent, the Content-Type becomes the Blob's type.

2) If a FormData object is sent, the Content-Type becomes multipart/form-data

3) If a URLSearchParams object is sent, the Content-Type becomes application/x-www-form-urlencoded

4) If a normal string is sent, the Content-Type becomes text/plain

Javascript code to implement different objects can be found here

Answer 4

If you're using Chrome and you're trying to set the content-type header, you'll probably have some issues due to security restrictions:

Uncaught DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not any of the CORS-safelisted values for the Content-Type request header is disabled temporarily. See http://crbug.com/490015 for details.

See sendBeacon API not working temporarily due to security issue, any workaround?

Answer 5

After searching for an answer for this question I found out that for passing header with navigator we need to pass a blob object.

For example

var headers = {type: 'application/json'};
var blob = new Blob(request, headers);
navigator.sendBeacon('url/to/send', blob);

Answer 6

Because the method sendBeacon(..) does not allow headers manipulation, I added them into the form as normal fields:

    const formData = new FormData();
    formData.append('authorization', myAuthService.getCachedToken());
    navigator.sendBeacon(myURL, formData);

Then on the host side I added a simple Middleware class (.Net) which catches POST requests without headers and copies them from the body:

    public class AuthMiddleware
    {
        ...
        ...
        public async Task Invoke(HttpContext context)
        {
            string authHeader = context.Request.Headers["Authorization"];
            if (authHeader == null && context.Request.Method=="POST")
            {
                context.Request.Headers["Authorization"] = string.Format("Bearer {0}",
                    context.Request.Form["authorization"].ToString());
            }

            await _next.Invoke(context);
        }
    }

Answer 7

Posting as an answer as I'm not allowed to post a comment under the answer:

For Chrome, issue with navigator.sendBeacon sending Blob for with non CORS-safelisted types was fixed in Chrome version 81 so this should be safe to use now. https://bugs.chromium.org/p/chromium/issues/detail?id=724929

For IE, an alternative in unload event is to use synchronous ajax request, as IE doesn't support sendBeacon but supports synchronous ajax call in my case.

Answer 8

You can't send data with JSON after Chrome 39, has been disabled due to a security concern.

You can try to send data with plain text. But don't forget the parseing text from the backend.