摘要：嘻嘻大功告成計劃完美實現參考文獻樂柔嘴巴反向代理學習及實例筆記利用的反向代理克隆生成鏡像網站中間人攻擊原作者的原始游戲頁面上國人搬運的開源鏡像特別致謝執著的少年

先前在某個Q群里有位網友發了個鏈接，一點進去，發現是個極度讓人耳目一新的初音未來音樂網頁游戲。 為了讓有幸看到這篇文章的看官也來體會下本人第一次玩時的激動，拋個鏈接——樂柔嘴巴。鏈接的具體地址是blog.eunji.cn/music/music.html。盡管這個頁面實在讓人上癮，但是自己同樣是個喜歡折騰博客網站的家伙，而這位仁兄是在一個博客網站下放的這個網頁。自己就開始思量，可不可以在自己的的博客下www.lesliewong.cn也放個這樣的游戲呢？這也很彰顯自己的品格<(￣︶￣)>

? 于是自己也就開始開展A計劃了。。。

? 鑒于樂柔嘴巴的鏈接就是一個靜態地址，盜鏈真的是直接就手到擒來、屢試不爽的了。

? 將自己的博客主頁上的“相冊”字段對應的鏈接改成https://blog.eunji.cn/music/m...。

相冊

效果如下：

? 看！訪問我的網站www.leslieowng.cn可以玩到如此新穎的游戲——

? 不過，過了不久，還是覺得有些不爽。自己還是有點控制欲的念頭的，為什么自己的博客網站要跳轉到人家的博客上去玩初音未來的音樂游戲，自己家里就不能玩嗎？說白了——看見這個音樂游戲上頭的地址欄的域名不是自己的就真心讓人不爽。

? 不行！我要做到點我博客主頁鏈接的時候仍然跳轉到我的域名下——

? 于是，靈機一動下，有了B計劃。

? Nginx服務器具有很強的反向代理功能。通常那些大流量網站都借助Nginx服務器的反向代理功能將訪問請求均勻地分配到內網的其他業務服務器進行處理，實現負載均衡功能，業務處理完畢后再通過Nginx服務器返送回去給請求者。

? 換個方向思考，如果我轉發的不是自己內網的業務服務器，而是外網上別人的網站呢？請求者訪問我的網站，我將這個請求轉發到外網上別人的網站上，然后將他們返回的數據反饋給我的請求者。那么，對于我的請求者而言，他從頭到尾都是訪問我的網站，而不知道自己收到的數據其實是從另外的網站轉發過來的。

? 在這樣的邏輯下，結合這篇文章的指導——《利用Nginx的反向代理克隆生成鏡像網站——中間人攻擊》。自己也就在自己的一臺架設了Nginx的服務器上搗弄了。用music.lesliewong.cn這個域名來轉發那位仁兄的網頁。配置文件如下：

server {
    listen       80;
    server_name  music.lesliewong.cn;
    root   /webser/www/musiz;
    index  index.php index.html index.htm;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        proxy_pass https://blog.eunji.cn/music/music.html;
    }   

    location ~ .php$ {
        fastcgi_pass   php7-fpm:9000;
        fastcgi_index  index.php;
        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    }

}

然后重啟自己的服務器，心想這下該大功告成了吧! 去地址欄里滿心歡喜地輸入music.lesliewong.cn。然而結果卻是——

? 吖！自己頓時有點摸不著腦袋，然后回去看那篇《利用Nginx的反向代理克隆生成鏡像網站——中間人攻擊》，最后面作者提示道，“網站全站HTTPS之后，如果網站被克隆了，里面的域名被替換，那么將會因為域名與預期不符從而導致網站顯示異常”，也就像上面的炮灰例子一樣。自己代理的是一個https的頁面，是搞不了Nginx反向代理中間人攻擊的。。。話說這也讓自己更理解到——Nginx反向代理用的最多的地方還是內網負載均衡，因為內網大都是用http來轉發吧？！

? 自己折騰了這么久，得到的卻是這樣一個結果，是有幾分泄氣的。難道就沒有辦法了嗎？難不成自己要一磚一瓦地仿照著寫個這樣的頁面，那有多么可怕啊！難道就沒有源碼嗎？自己可以直接拿來用——

? 接著，C計劃開始籌劃。。。

? 自己發現在發這個樂柔嘴巴的Q群里有位網友還另外發了個同樣的實例網站http://miku.iysheng.com/。界面如下：

? 現在總算找到了原作者了，原來是彩虹貓歌曲的作者寫的，瀏覽了下他的網站，發現他還弄了好多很有趣的東西——（內心忽然鄙視自己這種可惡的伸手黨）

?

? 另外，自己也把失敗折騰過程和Q友執著的少年談了談，汗顏的是，沒過不久他就把github上的開源鏡像給我找到了（好吧，自己當時沒想到去github搜一搜）鏈接如下：

https://github.com/HFIProgram...

? 自己真的是喜出望外，立馬把上面的代碼都給fork了下來。然而，使用這些源碼發現，出來的效果是這樣地。。。

?

? 而不是我想要的上面樂柔嘴巴的樣子——

?

? 不過，既然自己都有了源碼，照著人家樂柔嘴巴的樣子依葫蘆畫瓢也就不是什么難事了。自己把源碼研究了下，偷梁換柱一番終于實現了自己希冀的效果，配置前后對比如下：

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  







  


  


    
Mikutap

    


      
十分抱歉
您的瀏覽器并不支持本頁面需要的特性

    

    


      
!開始!

    

    
*關于*

    


      
※請打開聲音并享受。

    

     


     
注意！搬運內容，原頁面(Origin Site): https://aidn.jp/mikutap

    

  

  


    
 

  


    


      
點擊 & 拖動或者按任意鍵!

      
背景音樂: 開啟

    

  

  


  


    


      
×

      
 聲音來源 Hatsune Miku 

      
 作者 daniwell (twitter) 

      
 靈感來源 Patatap
(令人贊嘆的網頁!)

    

  

  
＜返回

  
□全屏顯示

  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    



    
  

    
  

      
    
MUSIC
      
    

        
      
十分抱歉
您的瀏覽器并不支持本頁面面需要的特性
        
    
      
    

        
      
!開始!
        
    
      
    
      
    

        
      
樂柔要唱歌啦
        
      
※請打開聲音并享受。
        
    
      
  
      
  
    
  

      
    
 
    
  

      
    

        
      
點擊 & 拖動或者按任意鍵!
        
      
樂柔的嘴巴: 開啟
        
    
      
  
    
  
    
  
＜返回
    
  
?全屏顯示
    

? 具體說來后者的區別就是注釋掉了不少內容，換了下一些用詞——但，奏效就行(￣▽￣)ブ

? （另外，相應的JS文件也進行同樣偷梁換柱的操作）

接著就把這一摞子的源碼都放在了自己的hexo博客后臺一個命名為MUISIC的文件夾里，并把自己博客主頁的“相冊”字段改為“音樂”字段且映射到MUSIC文件夾里，最終再git到自己在github上的博客代碼倉庫。

? (^__^) 嘻嘻……

? 大功告成！C計劃完美實現——

樂柔嘴巴
Nginx 反向代理學習及實例筆記
利用Nginx的反向代理克隆生成鏡像網站——中間人攻擊
原作者daniwell的mikutap原始游戲頁面
github上國人搬運的mikutap開源鏡像

執著的少年