Building an embed that works with API_KEY

Community Help
1

I am trying to make my own embed feature that works with API_KEYs. I have a version working here:

in the existing public notebook embed feature, the user code is served from a usercontent domain in an iframe, which is a useful way to discover who owns the code by sniffing the src URL. However, the full URL is unguessable so we can’t reuse that.

The way I am doing in a way that is untamperable, is having the embed server lookup the notebook owner using @mootari/notebook-data and setting headers when it serves it. The embed form then statically rendered the required configuration for the client to then also fetch the source code and hydrate the embedded notebook.

This is slower than necessary because I end up fetching the source twice (serverside and clientside). It would be nice if I could somehow statically render the module source code into the embed form, so the client does not need to call observable API itself, given I have the data at hand anyway. However, v3 API export uses ‘export’ keyword which cannot be inlined into a script tag so I am not sure if I can fix this.

With private team notebooks the slug is always d/klhasdlkhajsd, so its hard to know who the author is. So I feel the embed server always has to make an API call to discover that. I am using mootari/notebook-data but that is less than ideal as is a v1 API call (slower than v3) and fetches more info than I need.

Anybody got any ideas. What I have now is ok but I would love to shave off a network call if I can.

2 Likes
2

Not sure if it helps, but you can dynamically import object URLs:

import(URL.createObjectURL(new Blob([`
export default "foo"
`], {type: 'text/javascript'})))
2 Likes