How to Configure Blue Triangle to Alert on HTTP Header Size

Below is the snippet you can use to put into your synthetic script. It fires a basic XHR request to the page the script is on, then captures the response header, converts it to bytes, and formats an element with a result message (pass/fail) and adds it to the page. Modify the input parameter at the bottom of the script where the checkHeaderSize function is called to define your header size threshold. Finally, remember to place an assertElementPresent command with the target of id=response-header-size-check-passed right after the runScript command to perform the check. The example script used in the training is available for download at the bottom of this article.

function checkHeaderSize(thresholdBytes) {
  var request = new XMLHttpRequest();
  request.open('GET', document.location, false);
  request.send(null);
  var headers = request.getAllResponseHeaders().toLowerCase();
  var headersBytes = (new TextEncoder().encode(headers)).length;
  var customId = "";
  var customMessage = "";
  var threshold = thresholdBytes;
  if (headersBytes < threshold) {
    customColor = "green";
    customId = "response-header-size-check-passed";
    customMessage = "Pass. Observed response header size " + headersBytes + " is less than threshold of " + threshold + ".";
  } else if (headersBytes > threshold) {
    customColor = "red";
    customId = "response-header-size-check-failed";
    customMessage = "Fail. Observed response header size " + headersBytes + " is greater than threshold of " + threshold + ".";
  } else {
    customColor = "blue "; 
    customId = "response-header-size-check-error";
    customMessage = "Error retrieving response header data";
  }
  var messageNode = document.createElement("div");
  messageNode.innerHTML = "<h2 style='color:" + customColor + ";' id='" + customId + "'>" + customMessage + "</h2>";
  document.querySelector('header').firstElementChild.prepend(messageNode);
  console.log(customMessage);
};
checkHeaderSize(600);