Debugging: "Refused to get unsafe header" in Chrome

Recently, we ran into a scary looking error message in the Chrome console, Refused to get unsafe header "TrackJS-Correlation-Id". Our code was indeed trying to read this header from a request, so we explored this right away. The funny thing is, other than the error message in Chrome, everything was working fine.

We were testing a prototype of our browser error monitoring agent when this error came to our attention. It showed prominently red in the Chrome console, but no other browsers reported it. And the execution of our code was not affected.

Even stranger, none of our monitoring could detect this error. It only appeared in the Chrome DevTools console. Digging into the changed code, we can recreate the error with sample code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://cdn.trackjs.com/agent/v3/latest/t.js");
xhr.addEventListener("load", function(data) {
  console.log("header:", xhr.getResponseHeader("Fake-Header"));
  console.log("Other execution.");
});
xhr.send();

This simple example fetches a file from the TrackJS CDN and attempts to read the Fake-Header header from the request, which obviously doesn’t exist. We can see the error in our console, printed from the call to xhr.getResponseHeader along with a stack trace. But we can also see that we received a null value from the call, and that the function continued to execute!

Code snippet console output

Root Cause

This is non-standard behavior in the Chromium source code. It prints an “non-error” message into the console, but this is a browser-level error rather than a JavaScript one. It cannot be logged, and no execution has been stopped.

Why the Chromium team decided to print this scary message any time a nullable value returned null is not clear.

Workaround

Despite this message being a “non-error”, you may still want to avoid it in your console to save yourself some stress and questions down the road. xhr.getResponseHeader is unsafe to call unless you know the header is present and readable, which we can check with xhr.getAllResponseHeaders.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://cdn.trackjs.com/agent/v3/latest/t.js");
xhr.addEventListener("load", function(data) {
  if (xhr.getAllResponseHeaders().indexOf("Fake-Header") >= 0) {
    console.log("header:", xhr.getResponseHeader("Fake-Header"));
  }
  console.log("Other execution.");
});
xhr.send();

In this example, we check the complete string of headers to see if our header is present before asking for it. Thus, we avoid the scary Chrome “non-error”.

There are all kinds of errors on the web, many that will cause problems and prevent your site from working right. TrackJS can help you know when errors happen and how to fix them. Give it a try with our totally free trial and let us help you build a better website.