Embedding items stored in a DropBox onto a static page

[baileythegreen]

To embed an image

To embed an image with this share link:

(opens in Dropbox preview) – https://www.dropbox.com/s/oms452nw3yqewsh/Photo0213.jpg?dl=0

Using the link as-is does not work:

Changing the ending to raw=1, does:

(opens raw image) – https://www.dropbox.com/s/oms452nw3yqewsh/Photo0213.jpg?raw=1

PDFs seem harder

Clicking this just downloads the item: "https://dl.dropbox.com/s/74sk9c4ba0p3yhj/Dynamic%20variable%20naming%20discussion.pdf?raw=1"

Same for ending in ?dl=0, ?dl=1, and nothing on the end.

Solution?

Dropbox seems to offer an embedder to its developers: https://www.dropbox.com/developers/embedder

I think it is easy to become one of these, but you need a domain name so that it can be whitelisted.

[baileythegreen]

I now have this working with baileythegreen.github.io being whitelisted. It looks like this, with a zoom feature, and clicking on the 'View on Dropbox' option opens a normal pdf preview window, from which it could be downloaded or printed, not a view of the dropbox folder itself, so I think that is relatively secure.

[thismatters]

Nice find on the whitelist! I think it would be preferable to proxy the pdf to obscure the storage service, but that might not be technically possible with a static site so maybe that concern can be addressed a bit further down the road.

[baileythegreen]

Yeah, I am not sure how to do that, but definitely something to think about. Likely an instance where I will need some help choosing the right search terms.

[thismatters]

So there are a few ways to proxy content that I'm aware of (and probably several dozen ways I'm not aware of):

• Use an http server (e.g. nginx, apache) which listens to a specific domain (e.g. chroniclearning.org) to forward a users request to https://chroniclearning.org/asset to a different domain (e.g. dropbox) for the real response and then forwards that response to the user. This works when the urls in the forwarded service (dropbox) are relatively predictable.
• Use an application instance to receive the user request which is then translated into a separate request to the remote service (dropbox) to get the content. The content is cached (stored) by the application instance (at least breifly) while it prepares a response to the user with the content. This works whenever there is some special process that the remote service requires to grant access to the content; for instance the application instance might have an API key for the remote service that should be kept secret from the user.

There are probably proxying services that would let us buy this behavior relatively cheaply compared to running an app ourselves. Or, we just deal with having the dropbox banner until there is a donor base to support something more robust.