如何保护图像 URL 免受角度未经身份验证的访问答案

【问题标题】：How to protect image URL from unauthenticated access in angular如何保护图像 URL 免受角度未经身份验证的访问
【发布时间】：2020-01-05 15:44:14
【问题描述】：

在我的 Angular 应用程序中，它没有图像 url，如何保护这些 url 免受未经授权的访问？例如，可以将 url 复制并粘贴到任何浏览器（无需身份验证）或发送到任何地方。

所以它使任何人都可以访问。但我需要保护，并且我需要在用户登录之前提供访问权限。是否有任何特定的角度或一般方法？

需要建议。提前致谢。

【问题讨论】：

标签： javascript angular angular8

【解决方案1】：

解决此问题的一种方法是在您的图像 url 中传递令牌并从后端验证令牌。如果成功返回图像。

www.samplesite.com/myImageUrl?token=123

图像标签看起来像这样。

【讨论】：

【解决方案2】：

对于未经授权的访问，您可以将服务器设置更改为仅提供来自特定域的静态资源，阻止所有其他域请求。
对于登录后的图像，您必须通过代码来完成，而且工作量很大。因为，您必须添加一个布尔值来检查用户是否已登录。

【讨论】：

问题是，用户想将img url复制粘贴到新窗口以查看完整大小。
那么，图像不在您的服务器或您的域上吗？
只有我的服务器和域名。它可以分享给任何人吗？另一个人会在没有任何身份验证的情况下看到是问题
您可以在用户登录后设置cookie并检查资源是否具有该cookie有效然后提供资源。因此，即使用户访问路径但没有设置有效的 cookie，他现在也可以看到图像。

【解决方案3】：

选项 1：

您可以将图像显示为 blob，如下所示：

var location = 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';

fetch(location).then(response => response.blob()).then(blob => {
    var url = URL.createObjectURL(blob);
    var image = document.createElement('img');

    image.src = url;

    document.body.appendChild(image);

    // your url will look like this:
    // blob:https://example.com/f347bbac-af35-40a8-ac2b-daf639faf2db
    // this url cannot be used on another domain
    console.log(url);
});

选项 2：

将所有图片移到无法直接访问的地方。登录后，每当您需要显示图像时，只需向服务器发出请求即可。然后，服务器将为请求返回一个文件。

Your_project
|_ wwwroot (public)
|_ Your image folder (private)
|__ folder01
|____ image01.png
|____ image02.png

参考：Returning a file to View/Download in ASP.NET MVC

【讨论】：