How to deal with data behind authentification #56
Description
Martin Bergemann from the FREVA-Team approached me to discuss how to deal with data behind authentification as they have implemented Zarr-Streaming for the data in their databrowser but it can only be retrieved with a Bearer-Token.
Since FREVA is exposing a quite large amount of data I would propose that we implement at least something easy so that they could use gridlook for their data. I wouldn't try to add the token into the URL as we do it with anything else because this would be an open door for identity theft.
Zarrita supports custom headers so we could add the bearer token to the request:
const fetchOptions = { headers: { Authorization: "XXXXX" } };
const store = new FetchStore("http://localhost:8080/data.zarr", {
overrides: fetchOptions,
});The FREVA guys could use gridlook via an iframe and pass their token into a message
<iframe id="myFrame" src="http://localhost:3000/" width="600" height="300"></iframe>
<script>
document.getElementById("myFrame").addEventListener("load", () => {
const iframe = document.getElementById("myFrame");
// Send arbitrary data to the iframe
iframe.contentWindow.postMessage(
{
message: "Hello from parent!",
customValue: 12345,
token: "my-secret-token"
},
"*" // You can replace "*" with a specific domain for security
);
});
</script>Back on Gridlook-Side we could read the message via an event
useEventListener(window, "message", (event) => {
const data = event.data;
console.log("DATA", data);
});
This is maybe a very specific use case but it would not introduce much code into gridlook and would be very helpful to make gridlook integrable into other websites without much hassle.