How do you handle bearer token based auth when requesting an image on html?

Question

I would like images on html to be downloaded only for authenticated users. So, for example, I have written the following code.

[Client-side]

<img src="/image/showWorkImg?fileName=ed296da987c8ab75c42dce07e.jpg" alt="undefined" style="float:left;height: auto;width: auto"/>

[ImageController]

class ImageController extends Controller
{
    public function showWorkImg(Request $request)
    {
        try {
            $fileFullName = config('app.image_path') . '/' . $request->fileName;

            return \Image::make($fileFullName)->response();

        } catch (\Exception $e) {
            return "";
        }

    }
}

And definitely, an authentication process is on the Middleware between the Client-side and ImageController. However, as you know, the image html tag is not able to send a request with header-based tokens. It sends a request only with cookies. So I have decided to synchronize a header auth token with a cookie auth token like this.

[Client-side]


localStorage.setItem(keyName, response.data.token);
cookies.set(keyName, response.data.token, {path: '/'});

I wonder if there are no problems with that sort of strategy.

What sort of problems are you anticipating? Security related? I think cookies are pretty secure nowadays. — apokryfos, Mar 17 '19 at 07:37
I was just wondering if the strategy - using both of them is commonly used. — Kang Andrew, Mar 17 '19 at 07:55
What you're doing is not common I'll admit but the "not common" part is getting images behind authorisation so in your case you don't really have much other choice unless you are using a session. — apokryfos, Mar 17 '19 at 07:57
The reason I did that was raw image html tags is from DB due to a text editor, Wysiwyg. — Kang Andrew, Mar 17 '19 at 08:02
I am using Oauth2 in SPA(Single Page Application), not a session. But image tags created by a text editor have made me use a session. — Kang Andrew, Mar 18 '19 at 00:44

score 0 · Answer 1 · answered Mar 17 '19 at 09:18

An option is to add an endpoint GET /image/show-work-image/{fileName}. This endpoint will return the image if fileName is found and the user is authenticated.

You can fetch the image with ajax and render it on the page. For more info see Img src path with header params to pass

score 0 · Answer 2 · answered Mar 17 '19 at 09:19

there's multiple of security levels you should consider here:-

-In Frontend you should authorize sending requests (like using JS onClick event):-

<img src="yourimage.jpg" onclick="check authorization">

-In Backend as best practice in authentication, you can use Passport and in your api routes encapsulate your authenticated routes under auth middleware like:-

Route::group(['middleware' => 'auth:api'], function () {
     Route::get('getImage', 'ImageController@showWorkImg');
  });

-And of course you can extract you token (or assure that it exists) in controller's method :-

public function showWorkImg(Request $request)
{
   if(isset($request->bearerToken())){
         ...your code
   }
   else{
         return response()->json(["message" => "Unauthenticated"],Response::HTTP_FORBIDDEN);
   }
}

Well.. image tags are created by a javascript text editor and saved into DB as a format of raw html, so there are no attributes such as 'onclick'. — Kang Andrew, Mar 18 '19 at 00:40

How do you handle bearer token based auth when requesting an image on html?

2 Answers2