Difficulty Hiding Access key from url path

[adefesoq]

Hi there,
I’m currently using screenshot API for a personal project. I’m using express to pull the data on the backend. And my response data is in this format below.

{
url: 'https://api.apiflash.com/v1/urltoimage/cache/4163q99pp1.png?access_key=12566e455...'
}

The url is what I’m passing to the img src attribute on the frontend. And when user open the generated screenshot image in another tab in the browser, you have the url with my access_key shown in the address bar like this https://api.apiflash.com/v1/urltoimage/cache/4163q99pp1.png?access_key=18e6bf4bdb43.....

Is there a way I can hide the access key from showing in the url path?

[m3g4p0p]

Hi @adefesoq, you could however make it more difficult to get the image URL; for instance, you might disable the context menu for the image so it can’t easily be opened in a new tab (you’d have to use the dev tools):

const screenshot = document.getElementById('my-screenshot')

screenshot.addEventListener('contextmenu', event => {
  event.preventDefault()
})

Another (somewhat hacky but less rude) possibility would be not to set the src to the image URL directly, but fetch the image using JS and create an object URL from the response body:

// As received from the backend
const response = {
  url: 'https://api.apiflash.com/v1/urltoimage/cache/4163q99pp1.png?access_key=18e6bf4bdb434eff9902bf28d594e28b'
}

const screenshot = document.getElementById('my-screenshot')

fetch(response.url)
  .then(res => res.blob())
  .then(blob => {
    // Will be something like
    // blob:https://my-site.com/3172335b-d353-4c69-b365-e27c2e821fbf
    screenshot.src = URL.createObjectURL(blob)
  })

Of course, the access key will still appear somewhere and can be acquired using the dev tools. If you really need to keep it inaccessible, you might have your backend act as a proxy and fetch the image from there… e.g. add an endpoint like /imageproxy/:filename and construct the actual URL on the server side.

[adefesoq]

Thank @m3g4p0p, your comment was insightful and helpful too. For context, this project made me started learning backend (node). From start I was making the request on the frontend and I bumped into this same issue of access key showing in the url path.

So I thought making use of the backend might actually solve that.

@m3g4p0p

. If you really need to keep it inaccessible, you might have your backend act as a proxy and fetch the image from there… e.g. add an endpoint like /imageproxy/:filename and construct the actual URL on the server side.

Which learning resources (articles, blog post or video ) can you recommend to implement this. I’m still pretty a noob in BE development, thank you!!!

[m3g4p0p]

@adefesoq

Which learning resources (articles, blog post or video ) can you recommend to implement this.

Hm sorry I don’t know any such resources offhand, but you might have a look at the express-http-proxy package:

const express = require('express')
const proxy = require('express-http-proxy')

const ACCESS_KEY = '18e6bf4bdb434eff9902bf28d594e28b'
const app = express()

app.use('/imageproxy/:filename', proxy('api.apiflash.com', {
  proxyReqPathResolver (req, res) {
    return `/v1/urltoimage/cache/${req.params.filename}?access_key=${ACCESS_KEY}`
  }
}))

And then the image would have the source set to something like imageproxy/4163q99pp1.png. If you want to implement this yourself though, have a look at the builtin http module… the basic idea would be to request the remote resource and pipe it to the response.

[adefesoq]

Thank you