nginx内部访问特性如何实现静态资源授权访问

 更新时间：2024年06月19日 15:24:59   作者：左直拳  

这篇文章主要介绍了nginx内部访问特性如何实现静态资源授权访问方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

目录

• nginx内部访问特性实现静态资源授权访问
• 实现步骤
• 一、配置nginx
• 二、修改前端代码
• 三、增加后端代码
• 四、运行结果
• 说下总结

nginx内部访问特性实现静态资源授权访问

在nginx中，将静态资源设为internal；然后将前端的静态资源地址改为指向后端，在后端的响应头部中写上静态资源地址。

近期客户对我们项目做安全性测评，暴露出一些安全性问题，其中一个是有些静态页面（*.html）无须授权即可直接访问，里面的信息一览无遗，不安全。

这些静态页面都是arcgis地图页面，依赖arcgis for js，没有办法做成一般意义上的动态页面。或者说，该项目是个老项目，目前只处于维护阶段，大规模改头换面不现实。

怎么办，有没有什么方法，不改这些静态页面，或者是不做大的调整，就能实现只有登录后才能访问它们呢？

看到网上有文章介绍，可以利用nginx的internal特性，将静态资源设为内部访问，即可实现需要鉴权才能访问。

原理说起来也比较简单。所谓内部访问，是指你直接在浏览器输入静态资源地址，将无法访问，会直接报404，只有通过后端向nginx发送特定信息才可以。而后端，我们是要登录系统以后才能请求的，所以就能实现我们想要的效果了。

具体来说就是：

假设我们前端部署在nginx，原本我们要访问某个静态页面：/A.html，现在不行了，要将地址改为 /api/static/getA，改而向后端请求；后端收到请求后，在响应信息头里加上一句：

response.setHeader("X-Accel-Redirect", "/A.html");

返回；nginx接收到响应信息后，于是将/A.html最终返回。

现在来真的，我们要实现/projects/dzzhyj/index.html的鉴权访问。

实现步骤

一、配置nginx

server {
    listen      8001;
    server_name 192.168.0.218;
    
        。。。
    
    location /projects/dzzhyj/ {
        alias /home/gzdd_html/gzdd/projects/dzzhyj/;#物理路径

        location ~* \.html$ {#只设置*.html为内部访问
            internal;
        }
    }      
}

二、修改前端代码

<template>
  <div class="-map-container">
<!--    <iframe src="/projects/dzzhyj/index.html" ></iframe> -->
    <iframe src="/api/dzzhyj/redirect/dzzhyj" ></iframe>
  </div>
</template>

三、增加后端代码

@Controller
@RequestMapping("redirect")
public class RedirectController {
    @GetMapping("/dzzhyj")
    public void handleDzzhyj(HttpServletRequest request, HttpServletResponse response) throws Exception {
            response.setHeader("X-Accel-Redirect", "/projects/dzzhyj/index.html");
    }
}

四、运行结果

直接访问静态页面，不行

通过后端地址可以

但后端必须登录才行

完美。

说下总结

这功能在nginx下才能使用。

其他web服务器有没有类似机制不得而知。

但我们平时开发，用vue，都直接用npm来跑，所以后端代码做点更改，判断是nginx发出的请求，才做上述处理，否则跳转：

@Controller
@RequestMapping("redirect")
public class RedirectController {
    @GetMapping("/dzzhyj")
    public void handleDzzhyj(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String xForwardedForHeader = request.getHeader("X-Real-IP");
        if (xForwardedForHeader != null && !xForwardedForHeader.isEmpty()) {
            // 请求经过了 Nginx
            response.setHeader("X-Accel-Redirect", "/projects/dzzhyj/index.html");
        } else {
            // 请求未经过 Nginx
            String[] hosts = request.getHeader("X-Forwarded-Host").split(",");
            String url = String.format("http://%s/projects/dzzhyj/index.html",hosts[0]);
            response.sendRedirect(url);
        }
    }
}

其实没有方法能直接判断请求是否来自nginx，我是比较了从node发出的请求和从nginx发出的请求所包含的键值，看其中有没有包含“X-Real-IP”，简单地做了一下判断，不一定对。

1）vue运行时的请求request结构

2）nginx的request

补充：

• 我发现，也许是兜兜转转的缘故，浏览器对这种访问可能有一些处理。
• 当第一次因为系统初始化未完成，或其他什么原因，加载失败的话，后面就会一直失败。
• 这时候将浏览器关掉，重新打开再访问，或者换一种浏览器，就可以成功。
• 否则一直试，一直试，永远都找不到原因。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持小闻网。