講解素材
網頁如圖，這裡只是說明整個網站的一些技術點，所以不該看的地方我都打上馬賽克了，讓我們揭開這些網站的整個前端工作原理

首先剛進去的時候顯示一堆亂七八糟的東西，點進去其中一個頁面，下面各種虛假評論，然後每隔幾秒鐘彈出第幾几几個會員充值成功，我們先把這個刪掉

好了，我們繼續研究這個網站內部結構了
正常情況每個頁面的視訊都是試看幾十秒就會提醒你充值，當然這是這類網站的常規套路，我們在瀏覽器的Network觀察載入的js，我們可以看到裡面這段程式碼

這是一份叫做lsj.mp4.js的程式碼的其中一部分，我們可以看到裡面有個關鍵的判斷，具體就是判斷你是否是會員，如果是那就根據型別是否是2返回play_url_arr_oumei

var isvip = getCookie('lsjyy');
if(isvip != undefined && isvip != ''  && isvip.match(rgExp)){}else{}

上面這兩句還告訴我們第二個關鍵點就是我們可以根據isvip的cookie值來偽造身份，這個cookie就是儲存到我們的本地瀏覽器上，所以如果我們能成功改寫它的話我們就能變成會員繞過這個判斷，這份程式碼已經封裝好getCookie

function getMp4Url() {
        var play_name = getParam('play_name');
        var type = getParam('type');
        var rgExp =/^(v|V)[i|I|p|P|0-9]{2,3}$/g;
        var isvip = getCookie('lsjyy');
        var pic = $('.movie-pic img').attr('src'
 
);
        var html = '<img src="'+pic+'" style="height:auto; width:100%;display: none;">';
        html = '';
        var play_url = '';
        //vip會員
        if(isvip != undefined && isvip != ''  && isvip.match(rgExp))
        {
            var play_mp4 = getCookie('play_mp4');
            if(type == 2)
            {
                play_url = play_url_arr_oumei[play_rand2];

            }else{
                play_url = play_url_arr[play_rand];

            }
        }
        //試看
        else if(( play_name != '')&&(play_name != 'undefined'))
        {

            play_pic = 'http://oewx8de7n.qnssl.com/9e0120cv23/images/'+play_name+'.jpg';
            play_url = 'http://oewx8de7n.qnssl.com/9e0120cv23/images/mp4/'+play_name+'.mp4';
        }
        else
            play_url =  "http://su.cywl5.com/sy/h34.mp4";
        return play_url;
}

在lsj.pay.js?v=256這份程式碼的279行中我們又找到了一個線索，我們從程式碼看到，如果支付成功會在本地瀏覽器設定使用者的cookie值，有兩個關鍵的值出現了，分別是lsj和lsjyy
lsj

setCookie('lsj', pay_tee, 'd730');

lsjyy

setCookie('lsjyy', 'vip', 'd730');

其實我想了很久這個名字跟vip有什麼關聯，估計這個網站的作者想寫的是老司機和老司機YY的意思吧，不過不管它是什麼意思，現在只要我們嘗試用它封裝好的setCookie方法自己改寫這兩個cookie值，就能在本地順利成為會員，繞過剛才的判斷條件了
lsj.pay.js

function checkOrderStatus() {
    $.post("./pay/ok.php?action=check&uid="+getCookie('user'), function(data) {
        var pay_tee = Number(data);
        if (pay_tee >= 1) 
        {
            ispay = 1;
            ispay = true;
            var lsj = getCookie('lsj');
            if(lsj == null) lsj = 0; 
            if(pay_tee > lsj)
            {    
                setCookie('lsj', pay_tee, 'd730');
            }
        }   
        if ((pay_tee > 0)&&(pay_tee <= s_v1_money)) 
        {
            setCookie('lsjyy', 'vip', 'd730');
        }
        else if ((pay_tee > s_v1_money)&&(pay_tee <= s_v2_money)) 
        {
            setCookie('lsjyy', 'vip2', 'd730');         
        }
        if (pay_tee >= 1) 
        {
            var dt1 =Math.round(new Date().getTime()/1000);
            setCookie('lsjtime', dt1, 'd730');
            setCookie("isPayClick",0, 'd1');
            var isPayClick = getCookie("isPayClick");
            if (isPayClick == 0)
                window.location.reload(); 
        }
       // el_checkpay.hide();
    })
} 

其實往下也可以看到有一個clearVIP函式，更肯定了剛才我們的結論，VIP和非VIP其實就是這兩個值在作怪，所以我們預設的值應該就是clearVIP函式設定的值

function clearVIP()
{
    setCookie("lsjyy",0, 's1');
    setCookie("lsj",0, 's1');
}

如下圖，我們在瀏覽器執行這兩個函式，執行成功後我們就能看到cookie被成功改寫


在這裡我設定lsjyy為vip2，當然我在後面測試的時候發現這兩個值貌似沒什麼區別

然後我們可以用lsj.pay.js第179行的showpay函式來檢測是否已經是成功變成VIP

function showpay() {
    var rgExp =/^(v|V)[i|I|p|P|0-9]{2,3}$/g;
    var isvip = getCookie('lsjyy');
    if(isvip != undefined && isvip != ''  && isvip.match(rgExp))
    {
        alert('您已經是vip了哦.');
        return false;
    }
   //省略後面的程式碼
}

如果成功完成上面的步驟，我們在控制檯輸入showpay()就會看到下圖這個彈窗，那證明我們已經成功升級為VIP…

我們再次進入其中一個帶有視訊的網頁看看變成VIP會會真的有VIP的”待遇”，我們發現頁面內容塊變成了空白，控制檯報了下面這個錯，那是提示有一個值叫play_rand沒有定義，其實來到這裡我們已經發現我們已經繞過了剛才會員判斷，進入我們是會員的判斷分支，只是因為一個未定義的值停止了程式碼的執行


由於這個值我們可以看到是一個數組的索引值，所以我們在控制檯全域性定義

var play_rand = 1

我們把id為play-html節點的元素樣式設定diplay為顯示，我們就可以看到正常的播放器出來了

分析原始碼得知，它大概的工作原理就是根據url的引數，比如play_name和play_type，根據你是否VIP然後載入播放器播放拼接完的URL，play_name還含有undefined很不科學，說明有些視訊根本只有圖沒有源
開啟play.html檢視裡面的原始碼，可以看到視訊的連結源
play.html第21行

<script type="text/javascript">
    var cdn_url = 'http://oewx8de7n.qnssl.com/9e0120cv23';
</script>

往下面看我們可以看到剛才play_rand選取的對應的那個視訊，事實上play_url_arr_oumei和play_url_arr陣列已經定義好了VIP可以觀看的這十幾個視訊，所以不管怎麼樣付錢後都是看這十幾個裡面的其中一個，在這裡其實已經可以自己拼接對應的連結進入相應的視訊
play.html第324行

var play_url_arr_oumei=new Array();
    play_url_arr_oumei[1]=cdn_url+"/vip/2/om_1.mp4";
    play_url_arr_oumei[2]=cdn_url+"/vip/2/om_2.mp4";
    play_url_arr_oumei[3]=cdn_url+"/vip/2/om_3.mp4";
    play_url_arr_oumei[4]=cdn_url+"/vip/2/om_4.mp4";
    play_url_arr_oumei[5]=cdn_url+"/vip/2/om_5.mp4";
    play_url_arr_oumei[6]=cdn_url+"/vip/2/om_6.mp4";
    play_url_arr_oumei[7]=cdn_url+"/vip/try7.mp4";
    play_url_arr_oumei[8]=cdn_url+"/vip/try8.mp4";
    play_url_arr_oumei[9]=cdn_url+"/vip/try9.mp4";
    play_url_arr_oumei[10]=cdn_url+"/vip/try10.mp5";
    var play_url_arr=new Array();
    play_url_arr[1]=cdn_url+"/vip/try1.mp4";
    play_url_arr[2]=cdn_url+"/vip/try2.mp4";
    play_url_arr[3]=cdn_url+"/vip/try3.mp4";
    play_url_arr[4]=cdn_url+"/vip/try4.mp4";
    play_url_arr[5]=cdn_url+"/vip/try5.mp4";
    play_url_arr[6]=cdn_url+"/vip/try6.mp4";
    play_url_arr[7]=cdn_url+"/vip/try7.mp4";
    play_url_arr[8]=cdn_url+"/vip/try8.mp4";
    play_url_arr[9]=cdn_url+"/vip/try9.mp4";
    play_url_arr[10]=cdn_url+"/vip/try10.mp4";

當然我們為了證明我們剛才上面的推測，我們可以在控制檯把lsj.mp4.js的getMp4Url函式執行一次

我們可以看到一個可用的連結就這樣出現了
當然你可以再執行如下程式碼，讓它在網頁端執行，關鍵就是用playHtml3函式載入播放器，並開啟拼接好的視訊連結，有時候載入的是一張圖片，更有時候載入的視訊連結也根本無法播放，其實不管是否會員，最後也只是播放在頁面最後定義好的那十幾個視訊，支付變成會員只是它們把資料入庫，然後幫你設定個cookie的過程而已
當然這些網站的前端人員的程式碼和註釋還是挺可笑的

至此，就可以看懂這種網站的工作原理了，所以遇到小心上當了

———————-update 2016.12.26————————–
技術本身不可恥，可恥的是濫用技術的人！
後續更多內容可關注作者本人@Wscats或者star本文