【JS】去NM的視訊廣告

清一色天空發表於2020-01-08

宣告

禁止轉載
嚴禁商用化
若有從事以下（芒果Tv、騰訊視訊、愛奇藝）的工作人員，希望您看完本篇文章後，可以聆聽下我們心聲

因為它註定是侵犯公司利益的，但我選擇捍衛群眾利益

寫在前頭

如果覺得囉嗦的可以直接跳到下面

問題： 廣告煩不煩？

理由： 煩，從以前的“有線電視”到“數字電視”再到如今的“網路電視”，廣告無處不在，但仍有人津津樂道，埋怨廣告的同時，也笑談著人生，兜裡沒幾塊錢卻強迫著自己看廣告，牢牢守在電視機前，等待接下來的動畫片，結果怎樣？到最後竟成了不少80、90後的回憶，現在幾乎人手都能嚷出“你是我的優樂美”、“看前面的帥哥清爽帥氣”的臺詞，爆出臺詞還能聯想到產品，聯想到畫面，這才是廣告最巔峰的地方，那些都是美好、純真的回憶，無一例外

但如今它的性質卻變了，變得不再讓人喜歡了

“我喜歡優酷，那兒廣告少，而且支付寶整天送我“會員”跟“跳廣告”權益，領都領不完，真好啊！”

我媳婦突然跟我說，我沉默了，版權紛爭、片源壟斷，我好像不知從什麼時候起，快忘記它們了，明明以前自己最喜歡土豆、優酷的

這是社會進步而帶來的優劣化影響，不懂得變通的產品終將淘汰，電視的收視率低了，產品開發商們擠破了頭想推銷自己產品，而它們為了自身利益，縱容並且接納了

15s，30s，45s，60s，120s，屢次中途插15s，30s，等等等等

知道這意味著什麼嗎？拿動漫舉例，一部簡短的24分鐘動漫本來就少，前後2分鐘bgm，2分鐘前情提要，核心部分僅有18分鐘左右，匆匆一點即可快進，但加上不可跳過的2分鐘那就不一樣了，什麼詞？度日如年，有多少小夥伴為了看動漫，點開一集又一集視窗，就為了自己能看的連貫？又有多少小夥伴為了看的舒心放心，忍痛買了會員？—— 誰知“道高一尺魔高一丈”，人家也有騷操作，“會員專享廣告”在等你，意不意外？動漫本就很短，若是遇到《海賊王》這類更拖沓的前景提要，這幾分鐘廣告不會讓你失去對它的喜愛，只會讓你對平臺更加失望

這算不算是欺詐消費者呢？嘿，不算！人家霸王條款說了，裡面有一條，使用者同意我司可對合同進行調整（微笑），那麼長的“使用者協議”誰又會在意呢

《慶餘年》那可真是好看啊，vip點播、vvip超前點播，我把後面的也想好了，應該叫vvvip超越點播，真是vip本v啊，除了會員這碼事，盜版風波也重回巔峰，之前《堡壘》上市，我還一度以為盜版要滅亡了，盜版真香，特別是片源方洩漏那就更香了，人家還在劇裡苦等更新，殊不知隔壁老王已看到大結局了，還是沒廣告的那種

穿插在劇情裡的廣告好嗎？生硬，齣戲且不說，時不時給產品一個鏡頭，真是噁心到不行，但《慶餘年》就不一樣啊，它讓主角本身跳出了劇情之外去推銷產品，觀看產品的同時也不會出戲，最重要的是，他能快進啊！

那不是廣告沒有出路了？誒？還真不是，我對一種廣告完全喜歡並沉浸著欣賞著，那就是綜藝裡的廣告，《明星大偵探》不知小夥伴們有沒看過，很奇怪，我完全不反感

說了好多雜七雜八的，來總結一下不惹人嫌的廣告型別

簡短的廣告
可快進的劇外廣告
在綜藝里加廣告
...（或許還有）

目標： 幹掉視訊廣告

為什麼最後再來提這個？我明明可以寫個更技術性，更吸引人的標題的，其實是為了勸退某些人，讓他們一點進來以為這是沙雕分享文，好了，閒話都說了，準備進教程吧

我們的標題應該是 —— Js指令碼注入，視訊免廣告

教程

操作步驟： 以下所有操作步驟大致僅分兩步

將網站地址（程式碼）新增進收藏夾
進視訊平臺後，點選開啟收藏夾對應地址

相容性： Pc端應該皆可

一、芒果Tv

官網地址：www.mgtv.com/

1、點選“新增到收藏夾”選擇“更多”（以chrome為例）

2、輸入自己定義的“名稱”，在網址一欄中，輸入以下程式碼

芒果Tv - 程式碼塊

javascript:if(typeof _r==="undefined"){window._r=Array.prototype.reduce;Array.prototype.reduce=function(){var _f=arguments[0];if(typeof _f==="function"){arguments[0]=function(){if(arguments[3]&&arguments[3][0]&&arguments[3][0].hasOwnProperty("hideADLogo")){arguments=[]}return _f.apply(this,Array.from(arguments))}}return _r.apply(this,Array.from(arguments))};alert("OK")}else{alert("OK")};
複製程式碼

3、開啟網站，隨意點播一個視訊，進視訊頁面，開啟收藏夾，點選剛收藏的網址（程式碼）

注意

在掘金複製程式碼可能會有以下字尾跟在程式碼後面，請刪除後，方可使用

“ 作者：清一色天空連結：juejin.im/post/5e1576… 來源：掘金著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。”

然後？

接下來你會彈出一個“OK”的彈窗，此時你當前視訊仍然是有廣告的，請你隨意點選右邊任意一集，你會發現該視訊沒廣告了，此時你再點回剛才那集就行

什麼情況下不行？

頁面重新整理後，該程式碼需重新注入
頁面退出後，再進入需重新注入
開發者重寫了

為什麼我需要點其他視訊再點回來才生效？

不是點回來才生效，而是注入後，點該頁面中任何一個視訊都已經生效了，為什麼當前還在播廣告？因為它在注入之前就已經在播了...

怎麼實現的？

具體可進下一章節“思路”裡檢視

二、騰訊視訊

官網地址：v.qq.com/

步驟與“芒果Tv”一致，指令碼直接塞上，複製進收藏夾

騰訊視訊 - 程式碼塊


javascript:if(typeof _f==="undefined"){window._f=Array.prototype.forEach;Array.prototype.forEach=function(){if(this[0]&&this[0].el&&this[0].el.localName==="video"){this.splice(0,this.length)}return _f.apply(this,Array.from(arguments))};alert("OK")}else{alert("OK")};

複製程式碼

接下來的使用方案跟呈現效果也是與“芒果Tv”相同的

三、愛奇藝

官網地址：www.iqiyi.com/

前面相同，將以下指令碼複製進收藏夾，但呈現效果略微不同

愛奇藝 - 程式碼塊


javascript:if(!Function._apply){Function.prototype._apply=Function.prototype.apply;Function.prototype.apply=function(){var a=Array.from(arguments);if(a[0]&&a[0].currentCount){a[0].currentCount=a[0].repeatCount}return this._apply(a[0],a[1])};alert("OK")}else{alert("OK")};

複製程式碼

注意： 該效果將在你點選收藏夾網站時，直接生效，實現效果為視訊廣告一頓一卡，間接結束

為什麼一卡一卡，好像廣告在快進？

其實並不是廣告在快進，而是廣告在跳進下一個廣告，簡單來說，就是廣告不是單獨的，它是由多個廣告拼接而成，我所做到的，就是讓他跳到下個廣告，直到跳沒為止

最終，你的收藏夾應該是這樣的（舉例）

思路

這裡我是不放平臺程式碼的，以防萬一

一、引子

或許這一章節，才是大家關心的，畢竟這是技術社群

那麼在這之前，我再簡單拋個引子

大家是否有過這樣的經歷——痛苦的大學選修課，大學裡的選修課真是苦不堪言啊，看不完的頭疼視訊，沒營養聽不進且不說，最令人頭疼的是，它竟然還有種種限制，什麼滑鼠移出暫停，什麼中途插驗證碼，什麼不能拖動滾動條，煩的要死，然後解決方案也是牛鬼神蛇，多開啦，虛擬機器啦，而其中有一種，叫做——JS指令碼注入

二、思考

幹掉廣告，首先要搞清楚這個廣告是怎麼播放的，哪些能肯定，哪些是不能肯定，得先理理，因為接下來看的，是一整片雜亂無章的程式碼，是被編譯混淆過的程式碼，這一想法將貫穿整個過程，無時無刻都要思考

思考結論：

這個結論其實畫設計圖會更好，但我懶得弄了，直接碼字

若是斷點修改資料能遮蔽廣告，那就有成功的希望
若是有希望，那怎麼能從芸芸程式碼中找到那個地方，那個檔案？
定時器一定是前端控制的，是否能嘗試下修改定時器相關的地方，追蹤到目標頁面，做到修改時間跟廣告？
只要有一點能成功，那就開始找上下文，是否有控制播放函式，控制遍歷廣告函式的地方等
若有，則斷點再進入那裡，回到第一點，修改相關資料是否能遮蔽廣告
若成功，再開始找上下文中能注入JS的地方，成功就End，失敗則再找下一處，畢竟斷點修改資料能跳廣告了不是嗎？
End

直接刪廣告的Video dom能否去掉廣告呢？

這種簡單粗暴的方式，我沒嘗試過，或許你可以試試，有意外之喜也不一定

三、找入口

先找切入口，找到目標js檔案，上文所述是從定時器開始，從dom節點找，再全域性搜尋相關類名，id，setInterval，setTimeout，這樣固然慢，但也是沒辦法中的辦法，我先把他叫做節點方案

事實上也有其他快速方法，節點方案我們把它做下下策也未嘗不可

我們可以檢視Network，也許廣告xhr被明文看到了呢？然後全域性搜尋相關介面，快速追蹤到目標檔案（但我沒找到）

我們可以檢視控制檯，也許哪家公司的開發人員，就把廣告資訊console.log列印了呢？我們可以直接追蹤到目標檔案，檢視上下作用域（事實上某平臺真出現這種情況了）

我們可以檢視播放暫停鍵，一切能干預到廣告的按鈕，都會綁有事件，我們可以從Event Listener Breakpoints去觸發，再把jq之類的庫關小黑屋，來由上往下定位，找到目標檔案（因為一般這類函式是跟視訊等其他函式放一起的）（某平臺太可惡了，廣告連暫停都不給）

Other...

四、找上下文

從結果來看，是找到那個js檔案了，但過程很痛苦

找上下文是個辛苦活，它是與從哪兒注入是並列最難的兩種，兩種都非常考驗Js功底與閱碼的能力

哪兒打斷點並改一處資料，就能跳廣告呢？結論是瘋狂打斷點

不存在一招命中，至少我找的時候沒去洗臉，可以選擇console.trace去列印棧，也可以ctrl+F搜尋關鍵字眼，配合Deactivate breakpoints去除錯，無其他辦法，非常耗時

五、Js注入

從結果來看，我又找到了，但過程異常痛苦

js注入的方法有很多，但從input框進入且直接命中當前斷點檔案並修改資料，我壓根沒去想這種可能性

我選擇是修改全域性

全域性能命中嗎？現在哪兒還有暴露window讓你去改的？都2020年了，人手閉包一個，webpack、rollup，除非你直接window.xx=xx暴露出去，否則根本不可能

但事實上真的如此？

es6以來，指令式程式碼盛起，函式越來越規整，結構也愈發的規範，大家一邊嚷著find、map高階函式的好用，一邊唾棄for關鍵字的low，卻不知

罪犯也會訓著規範來找你

高階函式不就是window暴露的嗎？Array.prototype.map難道就不是全域性嗎？

我放一下芒果Tv的注入程式碼


if (typeof _r === "undefined") {
  window._r = Array.prototype.reduce;
  Array.prototype.reduce = function() {
    var _f = arguments[0];
    if (typeof _f === "function") {
      arguments[0] = function() {
        if (arguments[3] && arguments[3][0] && arguments[3][0].hasOwnProperty("hideADLogo")) {
          arguments = []
        }
        return _f.apply(this, Array.from(arguments))
      }
    }
    return _r.apply(this, Array.from(arguments))
  };
  alert("OK")
} else {
  alert("OK")
};

複製程式碼

很短是不是？但就是這麼短的程式碼，它其實命中的只有茫茫程式碼中的一小段，甚至是一行，就是這一行精準幹掉了廣告

1、首先是儲存方法，將reduce儲存，reduce怎麼來的？為什麼要儲存這個？

當我確定了斷點修改資料能成功的時候，就開始找函式注入點了，因為es6以來，大夥都紛紛使用高階函式，我就開始在上下文中搜尋高階函式點，當我ctrl+F搜尋map時，茫茫大片的使用率，險些讓我笑出了豬腳，人人唾棄for，若是用它，我還真不知道該怎麼辦才好，我最終找到了能干擾資料且離debugger最近的reduce函式

2、注入指令碼，return原始方法

我要改的資料很不巧，它是在函式裡的函式，於是我又儲存了方法，再重寫注入，干擾到入參，return返回再返回

成功