Create a unique code to an image

support
1

Thanks for creating hugo.
Just reaching out to the community for the following question.
We have a small university event coming up and I we would take pictures
from people, and then give them some short code so they can download the picture.

So I was thinking about a simple page, with a single input box and then they fill in
the code and can see/download the picture.

Nothing fancy is needed, just a way that the pictures cannot be randomly downloaded.
(so that the pictures are not public to everyone, only the one with the code can see it and you cannot randomly guess the pictures)

We do not need authentication or so, I was thinking something like this:

  • We take the picture: we have a picture name eg: picture1.jpg
  • We give them a code and keep the link between the picture and the code. Eg. picture1.jpg - ABCDE
  • They go to a url and fill in ABCDE and they get the picture.

We would generate some codes upfront and keep track of the links in an excell sheet or so.
And then name the pictures like the code.

Would that be possible with hugo? thanks

2

Hi Koen,

Welcome to the HUGO community.

As a static site generator - the html, css, js, images etc. that Hugo generates usually ends up hosted and readily available with no form of authentication required (the awesome team @Netlify do offer some solutions for this with their premium plans)).

This means that if you put up a directory full of images, a visitor to your site would be able to look in your source code, identify the path to your images and get easy access to them all if they so choose. e.g. here you can see an image directory on the gohugo.io site:

CloudApp

If you don’t mind someone getting access to the images if they wish to, then you can do what you would like to pretty easily.

You can create a map to the images using HUGO’s Data Templates to provide the links to the images and then you could attempt some “security through obscurity” to try and hide the image locations…but not very well if someone wants to get at them and knows how to view page source.

In summary here, you can do what you want but the protection of your pictures is weak and tending towards zero.

However…if you want to make things somewhat harder, you could get a little more technical. :slight_smile:

You could encrypt the images using the unique code you plan to give out as the unique encryption passcode for each image - all clientside.

You could then change your form to be a two field form. 1 field would take a unique identifier that can be mapped (as described previously) to the encrypted image files or (base64 encoded data). the 2nd field would take the symmetric passcode used to encrypt the image which would be used this time to decrypt it.

Submitting the form would return the decrypted image to the visitor.

The length of the passcode would need to be a decent length of random bits in order to actually give any hugely worthwhile protection, but, I would think that 8 bytes or so would hold an attacker back for at least a few minutes which is probably enough for your use case.

Have a look at crypto-js and/or Forge for the practicalities of the encryption.

If anyone is interested in this concept more generally, drop me a line.

h2h

Saul

1 Like
3

This is really more about image management than site generation, but if you just want hard-to-guess URLs, generate a bunch of random file names using something like random.org, print out a page containing a blank for the student name, the random string (ex: b5t0v), and a third column that says "your picture will be example.com/event/b5t0v.jpg"; fill in the name, then tear off the third column and hand it out. Just make sure that indexing is off on your web server so people can’t list the entire contents of example.com/event/. Choose a string length you’re comfortable with, and print with a font that makes “l1”, “0O”, etc look distinct.

I used to do this sort of thing when I was the photographer for an autograph show, except that I used the random string as a directory name containing multiple pictures of the guest.

-j

1 Like
4

@jgreely you’re right - the issue is more about image management, however, tackling problems like these is always interesting as it forces some imaginative solution creation to be able to push things to the front end.

Obscuring the files and directory structure is always a good shout and the three column proposal is great and should work albeit with a slightly more cumbersome user experience.

To keep the originally planned user experience with a form with a single field and a single code to be handed out, you could do this:

  1. Ensure that directory listing is disabled with your host

  2. Generate some random codes (the more files you have and the more obscurity your assets need, the longer the codes you should generate). For this example, say 8bits. e.g. “abcdefg”.

  3. Add picture assets to your project, naming them by taking a code generated in step 2, splitting it in two and appending half to a randomly generated string as suggested by @jgreely. e.g. “abcd-tuvwxyz.jpg”

  4. Create a simple key-value data structure using HUGO’s Data Templates. The key should be the other half of the code generated in step 2 and the value should be the randomly generated string generated in step 3 and will look something like this in json:
    {"defg":"tuvwxyz.jpg"}
    If anyone looks in the source code of your site, they can only find this key value store but they cannot build the full link to the pictures from it.

  5. Build the form as you described @Koen_van_Besien. When the code is entered, split it in two with js and use the second half (or first if you did it the other way around) to look for a match in your data structure. e.g. I enter “abcdefg” in the form and a lookup is performed with “defg”.

  6. If a match is found in step 5, use the other half of the code entered to create the URI to the image with the value from the data object. In the example, you end up with the name created in step 3 abcd-tuvwxyz.jpg which you can use to fetch the image.

In this way, you get the UX you wanted with some degree of obscurity.

Be sure to use at least alphanumerics when generating your code as it will dramatically increase the complexity. In this example, the “private” 4byte alphanumeric string will have just under 1.7million permutations which an attacker would need to guess. A 5byte alphanumeric will have just over 60 million permutations (requiring your code to be 10 chars long). All of this is relatively trivial to someone who really wants to get at your images but it would likely put most people off!

h2h

Saul

5

I don’t see a practical difference. The photographer needs to know every student/code pair in order to build the site, and each student needs to know their code and the site URL. No matter how you implement the web front-end, the information required is the same for all parties.

If you don’t want them to type a URL containing the code, you can make a one-page site with a single-field form that does a Javascript redirect/load to show the picture. Pick a CSS/JS framework that looks nice, Google for just enough Javascript to make an onsubmit function for your form that concatenates a string and redirects to it (with jQuery, something like $(location).attr('href',myjpg)).

-j

1 Like
6

You’re right J - In reality, there’s little practical difference and the URL need not be a large problem. Your method is likely the easiest way to go. Simple is better :grinning:

1 Like
7

Yeah, event photography is basically Adventures In Bookkeeping. Back when I did this with film, there were several occasions where I mislabeled a roll and had to reconstruct who was on it by using the background to figure out where I was in the ballroom. Not fun.

-j

1 Like
8

I can well imagine what a pain that must have been! Haha.
Saul

9

hi all, thanks a lot for the information and ideas on this. This helped me a lot.
What I ended up doing was the following, just because I managed to get it working
fairly quickly and I could handoff most of the work to someone else for the picture uploading:

  • Setup a google user account (gives you 300$ free credits)
  • Setup firebase for it.
  • Used firebase hosting for a simple html site with input box and some javascript as mentioned by @jgreely
  • Used firebase storage for the picture hosting
  • Created a list of random strings
  • Asked the person who takes pictures to keep an excell sheet with picture name - random string - student name/email
  • When finished just run a rename of all the pictures from picture name to random string .jpg
  • Asked them to go to the firebase admin panel and just upload all the images using the web interface.

In that way I did not have to help out with the images upload etc and everything could be tested upfront.

So thanks a lot for the ideas and help on this. I did not use hugo in the end as it was indeed more a picture management thing then a full client side setup. but very interesting ideas with the encryption though!

Thanks,

Koen

2 Likes