B站(bilibili)专栏支持markdown最简单方案

背景

B站专栏目前只支持富文本编辑器,文本编辑器就分为两种,支持markdown的和不支持markdown,可惜的是B站的专栏并不支持markdown而且也没有计划支持,这也是可以理解,毕竟up主们并不都了解markdown,但对于一个重度md用户,用富文本编辑器是无论如何都无法忍受的,于是研究了下专栏的逻辑,找到了支持md的方案,见下文。

分析

用户在编辑专栏时,系统会实时将数据通过接口https://api.bilibili.com/x/article/creative/draft/addupdate保存到后台,接口参数如下(curl)

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

可以看出以下几个信息

  • 通过form形式提交到后台,从content-type: application/x-www-form-urlencoded可以看出

几个比较重要的参数:

  • title:文章标题
  • content:文章内容
  • aid:文章编号
  • csrf:csrf编号,防止csrf攻击
  • 接口返回值如下
{"code":0,"message":"0","ttl":1,"data":{"aid":74916}}

看到这里聪明的你就能发现可以自己伪造一个form表单进行提交,于是简单写了个表单html




提交后返回code:0说明提交成功,进入B站后台专栏管理,确实修改成功

如果没有csrf这个编号那么这个demo就是赤裸裸的csrf攻击

demo测试成功于是方案就很好做。

实现

大概的思路是通过js将markdown转换为html,再通过上述的表单进行提交,但用户需要提供一些必要的信息。markdown转js这里通过showdown库实现。代码也不多,这里贴出完整源码,另存为html即可












帮助文档!!!!!!!

aid:


csrfid:


markdown内容:



界面如下:

用户需要提供参数aidcsrfid,这两个参数可以通过以下方式获取

  • 打开网络调试工具,一般浏览器步骤就是 打开开发者工具(F12)-切换到网络,在专栏富文本随便输入一些内容,这时候在调试窗口就能看到调用保存接口addupdate

这里面就包含所需参数

在线版

这里已经将页面部署到阿里云上方便大家使用,地址:http://zhengjianfeng.cn/bilibili/

问题答疑

  • 提交失败,出现以下错误

原因:当前浏览器不支持no-referrer功能,可以使用chrome或者firefox进行访问

  • 出现以下错误
{"code":-111,"message":"csrf 校验失败","ttl":1}

原因:未登录B站或者已经退出,重新登录,根据以上方式获取最新的csrf,csrf每次登录都不一样

你可能感兴趣的:(markdown,富文本编辑器,javascript,html)