前後端分離部署時如何保護前端程式碼不被匿名訪問
阿新 • • 發佈：2019-09-25
背景
現在很多專案早就採用前後端分離的方式開發和部署了。前端程式碼部署在nginx伺服器上，由nginx直接對外提供靜態檔案的服務，後端介面則由nginx做反向代理。
這本來是極為合理的部署方式，但對於一些需要登入才能進行訪問的系統，負責安全的同事就會提出如下的疑慮：
index.html允許匿名訪問，別有用心之人豈不是可以根據index裡的<script>標籤，拿到你所有的前端程式碼了？
看來要解決這個問題。
思路
為了保護前端首頁程式碼，一次請求的流程應該是下面這樣：
使用者發起首頁的請求，服務端發現使用者沒有登入，跳轉到登入頁;
使用者發起首頁的請求，服務端發現使用者已經登入了，正常輸出首頁的內容。
注意，這裡是服務端判斷，而不是客戶端判斷。
判斷有沒有登入，毫無疑問是是我們的java後端才能做到的事情，但是首頁是html檔案，在nginx下面，使用者請求它的時候還沒到後端這裡呢，怎麼判斷？
當然，你可以把前端檔案移到後端tomcat下，由tomcat提供服務，但這樣又走回老路了，這不是一個好方法，不推薦。
其實，在不改變部署架構的前提下，我們簡單的通過nginx的配置和後端介面的配合，就可以達到目的。
簡單來說，利用nginx的rewrite + error_page指令來實現。
- 首先，利用nginx的rewrite指令，把對index的請求，rewrite到後端某個介面上
- 後端這個接口裡判斷當前使用者是否已經登入，如果沒有登入，返回302跳轉，跳轉到授權頁去登入
- 如果後端介面判斷當前使用者已經登入，則返回一個錯誤碼給nginx（例如404），nginx利用error_page，指定404時，輸出index.html的檔案內容。
nginx示例配置如下：
server { listen 80; server_name www.abc.com; recursive_error_pages on; #這個選項要開啟 location / { root /path/to/front-end; } location /api #交由tomcat處理 { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Cookie $http_cookie; proxy_pass http://localhost:9000; } location ~* ^(/|(/index\.html))$ { #未登入的情況下，不允許訪問首頁，注意這裡rewrite到一個location，而不是直接proxy_pass到後端介面。因為我要在@fallback裡利用queryString rewrite ^/(.*) /abcdefg?res=$request_uri; } # location /abcdefg { proxy_pass http://localhost:9000/api/home/check-user?res=$request_uri; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_intercept_errors on; error_page 404 = @fallback; } location @fallback { if ($query_string ~* ^res=([^&]*)) { set $path $1; rewrite ^ /local/scripts$path; } } location /local/scripts/ { internal; #nginx內部才有效的location，外部無法通過/local/scripts/這個路徑訪問 alias /path/to/front-end/; #注意，最後有個/符號 error_page 404 =200 /local/scripts/index.html; } }
後端check-user介面示例如下：
@GetMapping("check-user")
public void checkUser(String res, HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException {
if(session.getAttribute("User") == null){
response.sendRedirect("login?returnUrl=" + URLEncoder.encode(res, "UTF-8"));
return;
}
response.setStatus(HttpStatus.SC_NOT_FOUND);
}