B站（bilibili）專欄支持markdown最簡單方案

時間 2020-07-05

標籤 bilibili 專欄支持 markdown 最簡單方案欄目快樂工作简体版

原文原文鏈接

背景

B站專欄目前只支持富文本編輯器，文本編輯器就分爲兩種，支持markdown的和不支持markdown，惋惜的是B站的專欄並不支持markdown並且也沒有計劃支持，這也是能夠理解，畢竟up主們並不都瞭解markdown，但對於一個重度md用戶，用富文本編輯器是不管如何都沒法忍受的，因而研究了下專欄的邏輯，找到了支持md的方案，見下文。javascript

分析

用戶在編輯專欄時，系統會實時將數據經過接口https://api.bilibili.com/x/article/creative/draft/addupdate保存到後臺，接口參數以下（curl）html

curl 'https://api.bilibili.com/x/article/creative/draft/addupdate' \
  -H 'authority: api.bilibili.com' \
  -H 'accept: application/json, text/javascript, */*; q=0.01' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36' \
  -H 'content-type: application/x-www-form-urlencoded; charset=UTF-8' \
  -H 'origin: https://member.bilibili.com' \
  -H 'sec-fetch-site: same-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://member.bilibili.com/article-text/home?aid=74916' \
  -H 'accept-language: zh,en;q=0.9,en-US;q=0.8,zh-CN;q=0.7,nb;q=0.6,mt;q=0.5' \
  -H $'cookie: xxxxxxxxx（cookie打碼）' \
  --data-raw 'title=%E8%BF%99%E6%98%AF%E6%A0%87%E9%A2%98&banner_url=&content=%3Cp%3E%E8%BF%99%E6%98%AF%E6%AD%A3%E6%96%87%3C%2Fp%3E&summary=%E8%BF%99%E6%98%AF%E6%AD%A3%E6%96%87&words=4&category=4&list_id=0&tid=4&reprint=0&tags=&image_urls=&origin_image_urls=&dynamic_intro=&media_id=0&spoiler=0&original=0&aid=74916&csrf=027817004f35eb34f312464c4828ca62' \
  --compressed

能夠看出如下幾個信息java

經過form形式提交到後臺，從content-type: application/x-www-form-urlencoded能夠看出

幾個比較重要的參數：git

title：文章標題
content：文章內容
aid：文章編號
csrf：csrf編號，防止csrf攻擊
接口返回值以下

{"code":0,"message":"0","ttl":1,"data":{"aid":74916}}

看到這裏聰明的你就能發現能夠本身僞造一個form表單進行提交，因而簡單寫了個表單htmlgithub

<html>

<body>
<form  action="https://api.bilibili.com/x/article/creative/draft/addupdate" method="POST">

<input type="text" name="content" id="bcontent" value="測試是否能夠經過僞造表單進行提交"/>
<input type="text" name="aid" id="baid" value="74916"/>
<input type="text" name="csrf" id="bcsrfid" value="027817004f35eb34f312xxxxxxxx"/>
<input type="submit" value="提交" />
</form>


</body>
</html>

提交後返回code：0說明提交成功，進入B站後臺專欄管理，確實修改爲功chrome

若是沒有csrf這個編號那麼這個demo就是赤裸裸的csrf攻擊

demo測試成功因而方案就很好作。json

實現

大概的思路是經過js將markdown轉換爲html，再經過上述的表單進行提交，但用戶須要提供一些必要的信息。markdown轉js這裏經過showdown庫實現。代碼也很少，這裏貼出完整源碼，另存爲html便可api

<html>
<head>
<meta name="referrer" content="unsafe-url" />
<meta name="referrer" content="origin" />
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="referrer" content="no-referrer" />
<meta charset="utf-8" />
</head>
<body style="margin-top:20px;margin-left:20px;">

<h2><a target="_blank" href="http://zhengjianfeng.cn" style="color:blue">幫助文檔！！！！！！！</a></h2>

<p>aid:</p><input type="text" name="aid" id="aid" value="74916"/></br>

<p>csrfid:</p><input type="text" name="csrfid" id="csrfid" style="width:250px" value="027817004f35eb34f312464c4828ca62"/></br>

<p>markdown內容:</p>
<textarea rows="20" cols="100" id="md"></textarea></br></br>

<button onclick="submitForm();">提交</button>

<form id="bform" action="https://api.bilibili.com/x/article/creative/draft/addupdate" method="POST">

<input type="hidden" name="content" id="bcontent" value="xxxx"/>
<input type="hidden" name="aid" id="baid" value="74916"/>
<input type="hidden" name="csrf" id="bcsrfid" value="027817004f35eb34f312xxxxxxxx"/>
</form>


<script src="showdown.js"></script>
    <script type="text/javascript">
function submitForm(){

     var aid = document.getElementById("aid").value;
     var csrfid=document.getElementById("csrfid").value;
     document.getElementById("baid").value=aid;
     document.getElementById("bcsrfid").value=csrfid;
     var content=document.getElementById("md").value;
     var converter = new showdown.Converter(); 
     var htmlcontent = converter.makeHtml(content);
     document.getElementById("bcontent").value=htmlcontent;
     document.getElementById("bform").submit();
}
    </script>

</body>
</html>

界面以下：瀏覽器

用戶須要提供參數aid和csrfid，這兩個參數能夠經過如下方式獲取bash

打開網絡調試工具，通常瀏覽器步驟就是打開開發者工具（F12）-切換到網絡，在專欄富文本隨便輸入一些內容，這時候在調試窗口就能看到調用保存接口addupdate

這裏面就包含所需參數

在線版

這裏已經將頁面部署到阿里雲上方便你們使用，地址：http://zhengjianfeng.cn/bilibili/

問題答疑

提交失敗，出現如下錯誤

緣由：當前瀏覽器不支持no-referrer功能，可使用chrome或者firefox進行訪問

出現如下錯誤

{"code":-111,"message":"csrf 校驗失敗","ttl":1}

緣由：未登陸B站或者已經退出，從新登陸，根據以上方式獲取最新的csrf，csrf每次登陸都不同

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。