Idea: Allow access to location hash params #key=value

[jflatow]

It would be really cool if we could load notebooks with hash params #key=value&secret=123 and have them loaded into the notebook in some way. This would allow doing things like passing in access_tokens for apis without compromising the sharability of the notebook (and in fact improving it).

[bumbeishvili]

You already can do something like that

Take a look at this notebook

Parameterized Notebooks

[mootari]

@jflatow

This would allow doing things like passing in access_tokens

You can already store secrets in Observable that only you can access:

Using secrets with Observable | Observable documentation

@bumbeishvili

You already can do something like that

It’s not exactly the same. The key difference is that a hash won’t get send to the server and can thus not be logged server-side. Obtaining the hash is currently not possible:

Getting document.URL

This should work: Object.assign(document.createElement("a"), {href: ""}).hash Edit: actually it won’t because we don’t pass the hash down to the worker. So, you’ll need to use the query string, at least for now.

[bumbeishvili]

Yes, I was referring to query string option (though I did not remember, that hash option was not working )

[bgchen]

Access to hash params would also allow for much longer parameters to be passed to a notebook. I’ve been messing around with a code editor in an Observable notebook and it would be nice to be able to share permalinks to code examples using hash params. Query strings have a max length which is inconvenient for this use case.

[jflatow]

Yeah its great that you can use query strings (I though that was restricted too actually), but hash params would open up some new possibilities for the reasons mentioned (they don’t get sent automatically by the browser and increased size limits).

[mootari]

@bgchen

Query strings have a max length which is inconvenient for this use case.

Where/when did you encounter this limit? Afaik it should be high enough that you’ll rarely hit it.

For massive amounts of data there’s also the option to gzip the data and encode it with a base higher than 64. Perhaps there’s also a way to get deflate to output a limited character range, but I haven’t found anything conclusive yet.

[bgchen]

@mootari

Afaik it should be high enough that you’ll rarely hit it.

You’re probably right; with some more testing, the limit for observablehq.com seems to be ~5k characters and passing around URLs of that length is problematic no matter how the data is encoded. Here’s something close to what I’ve been working with:

CodeMirror editor for testing query parameters

I think I was remembering what happened with some other server which had a much lower limit. Nonetheless, I support the request for access to hash params.

[mootari]

@bgchen

Here’s something close to what I’ve been working with

I have a UrlParam class in one of my notebooks that encodes and decodes arbitrary data:

Triangles And Circles

The notebook also contains a more complex example of retrieving and applying data for multiple cells. Applying URL data happens in the second cell (which has no output unless there’s data).

Applied to your notebook it would work like this (note that you don’t need to share the UrlParam instance, you can create as many as you like whenever you like):
https://observablehq.com/compare/84d33e17af6d5036@57...646ddd087841b1f3@78

[mootari]

Btw, I found that Observable’s server stops responding to URLs somewhere between 7000 and 8000 characters.

[bgchen]

Wow thanks, this is really great! I’ve merged your suggestion.

[jashkenas]

Great discussion as always, folks.

We’ve just pushed a change that copies querystrings and hash parameters down from the notebook’s parent frame to the worker, so you can now use location.search (for querystrings) and location.hash (for client-side hash parts) much more naturally.

Here’s a little demo:

URL querystrings and hash parameters

[jflatow]

Woo you guys are awesome!!

[j-f1]

@jflatow If you click the button under Jeremy’s answer, it’ll mark this topic as resolved and make it so that future visitors will see the solution right away.