Hasura does not send User-Agent header to action handlers #8070
Description
Version Information
Server Version: 2.1.1
Environment
Cloud / OSS
What is the expected behaviour?
Hasura should send a valid User-Agent header to action handlers by default.
Keywords
Glich.com, action handler, 403 error
What is the current behaviour?
Hasura seems to not send a User-Agent header to action handlers by default, unless one is explicitly configured, or hasura is set to forward client headers.
This causes an issue with platforms like glitch.com
Specifically, glitch will throw a 403 and respond with a webpage that includes the following message:
Waking up
To keep Glitch fast for everyone, inactive projects go to sleep and wake up on request.
How to reproduce the issue?
- Create a simple glitch.com project with a simple action handler
- Create a hasura action and point it to that handler
- A 403 error is thrown when executing the action
Screenshots or Screencast
Full error response:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maintenance</title>
<noscript>
<meta http-equiv="refresh" content="1">
</noscript>
<style>
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
}
main {
padding: 1rem;
}
p {
max-width: 500px
}
.note {
font-size: small;
color: #9B9B9B;
}
.content {
margin: 50px;
position: fixed;
}
#loader:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4, end) 1000ms infinite;
content: "\2026";
width: 0px;
}
@keyframes ellipsis {
to {
width: 1.25em
}
}
canvas#background {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<main>
<div class="content">
<p class="status">
<span id="message">Waking up</span>
<span id="loader" ></span>
</p>
<p class="note">
To keep Glitch fast for everyone, inactive projects go to sleep and wake up on request.
</p>
</div>
</main>
<canvas id="background" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.9.4/bowser.min.js"></script>
<script>
// drawing
var canvas, context, canvasImage;
var cursorPosition = {
x: undefined,
y: undefined,
};
var color = '#e5e5e5';
var size = 30;
function randomColor() {
var colors = [
'#fcd1c4',
'#abfcec',
'#a3d9e1',
'#fbbfff',
'#a9ef8f',
'#fff0b2',
'#fff0b2',
];
color = colors[Math.floor(Math.random() * colors.length)];
}
function throttle(ms, fn) {
var lastCallTime;
return function () {
var now = Date.now();
if (!lastCallTime || now - lastCallTime > ms) {
lastCallTime = now;
fn.apply(this, arguments);
}
}
}
function drawCircle(event) {
context.beginPath();
context.arc(cursorPosition.x, cursorPosition.y, size, 0, 2 * Math.PI);
context.closePath();
context.fillStyle = color;
context.fill();
canvasImage = context.getImageData(0, 0, window.innerWidth, window.innerHeight);
}
window.onload = function () {
randomColor();
canvas = document.getElementById('background');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext('2d');
window.onresize = throttle(100, function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.clearRect(0,0, window.innerWidth, window.innerHeight);
canvasImage && context.putImageData(canvasImage, 0, 0);
});
window.onmousemove = throttle(10, function (event) {
cursorPosition = {
x: event.clientX,
y: event.clientY,
};
drawCircle(event);
});
window.ontouchmove = throttle(10, function (event) {
cursorPosition = {
x: event.touches[0].clientX,
y: event.touches[0].clientY,
};
drawCircle(event);
});
}
</script>
<script>
// container status updates
setTimeout(function () {
function reloadAfterDelay(delay) {
delay = delay || 1000;
return setTimeout(function () {
window.location.reload(true);
}, delay);
}
try {
var isValidBrowser = bowser.check({
ios: "7",
msie: "10",
android: "4.4",
chrome: "16",
firefox: "11",
});
if (!isValidBrowser) {
throw new Error("Jump to refresh");
}
var initialReloadHandler = reloadAfterDelay(5000);
var ws = new WebSocket("wss://" + document.location.hostname + "/___glitch_loading_status___");
ws.onmessage = updateContainerStatus;
ws.onerror = reloadAfterDelay;
ws.onopen = function () {
clearTimeout(initialReloadHandler);
setInterval(function () {
ws.send("keepalive");
}, 15000);
};
ws.onclose = function () {
reloadAfterDelay(1000);
};
function updateContainerStatus(event) {
try {
var data = JSON.parse(event.data);
var message = document.getElementById('message')
var text = "";
switch (data.text) {
case "initialize":
text = "Waking up";
break;
case "install":
text = "Preparing";
break;
case "restart":
text = "Starting";
break;
case "listening":
text = "Ready";
break;
default:
return;
}
message.innerHTML = text;
document.title = text + " ･ﾟ✧";
if (data.text === 'listening') {
window.location.reload(true);
}
} catch (e) {
reloadAfterDelay();
}
}
} catch (e) {
reloadAfterDelay();
}
}, 0);
</script>
</body>
</html>Any possible solutions?
This can be worked around by explicitly setting a User-Agent header for your actions.