Using jsonbin in the browser

Today I pushed a few security tweaks to jsonbin, the personal RESTful JSON store that allow you to use jsonbin directly in the browser…if you so choose.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

£249+VAT - reserve your place today

By default, if you want to use jsonbin, you have to authenticate using your API key, for example:

$ curl -X POST https://jsonbin.org/me/blog \
     -H 'authorization: token 12345678-abcd' \
     -d '{ url: "https://remysharp.com" }'

And putting your API key in the browser is fine (in theory) if you don't intend to let anyone other than yourself access the web page. So I've added support for JWT bearer tokens.

This means a few things:

You can place an expiry on the bearer token, ranging from milliseconds to days or weeks.
You can specify what path in your store the token has access to.

In practise, this means that you could collect user content in your store by generating a bearer token that's valid for 10 minutes (for instance) and your browser code can now POST to the specific endpoint you give.

You can either make an authenticated call to /_/bearer to get a bearer token, or you can generate these yourself (on your server):

const jwt = require('jsonwebtoken');

const apikey = process.env.JSONBIN_TOKEN;
const expiresIn = '10m';
const publicId = 'AC12345'; // note that older ids are uuids
const path = 'urls.0'; // can only write to first array entry

const token = jwt.sign({ id: publicId, path }, apikey, { expiresIn });

Now anyone with the token can POST (and GET) the end point https://jsonbin.org/me/urls/0 - but not /urls root or any other element in the array.

To use it in the client, you can:

fetch('https://jsonbin.org/me/urls/0', {
  method: 'post',
  headers: {
    authorization: `Bearer ${token}`
  },
  body: 'http://example.com' // this is our change
}).then(res => {
  console.log(res.status);
});

This is the first stab at client side access to jsonbin, and I'm thinking about limiting bearer tokens to only being able to GET and to POST where the request doesn't mutate the original data (i.e. only append a new property or array element). I'd appreciate any thoughts on this too.

Using jsonbin in the browser

Comments