在html上请求图像时，如何处理基于承载令牌的auth？

Question

我希望仅针对经过身份验证的用户下载html上的图像。 因此，例如，我编写了以下代码。

[客户端]

<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 "";
        }

    }
}

当然，身份验证过程是在客户端和ImageController之间的中间件上进行的。 但是，您知道，图像html标记无法发送带有基于标头的令牌的请求。 它仅发送带有cookie的请求。 因此，我决定将标头身份验证令牌与cookie身份验证令牌进行同步。

[客户端]

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

我想知道这种策略是否没有问题。

Answer 1

一种选择是添加端点GET /image/show-work-image/{fileName} 。 如果找到了fileName并且用户已通过身份验证，则此端点将返回图像。

您可以使用ajax获取图像并将其呈现在页面上。 有关更多信息，请参见Img带有要传递的标头参数的src路径

Answer 2

您应该在这里考虑多种安全级别：-

-在前端，您应该授权发送请求（例如使用JS onClick事件）：-

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

-在后端作为身份验证的最佳实践，您可以使用Passport并在api路由中将经过身份验证的路由封装在auth中间件下，例如：

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

-当然，您可以在控制器的方法中提取令牌（或确保令牌存在）：

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