52 KiB
52 KiB
专栏内容
获取专栏正文内容
请求方法: GET
URL 参数:
| 参数 | 类型 | 内容 | 必要性 | 备注 |
|---|---|---|---|---|
| id | number | 专栏文章 ID | 必要 | |
| gaia_source | string | main_web |
不必要 | |
| w_rid | string | WBI 签名 | 不必要 | 参见 WBI 签名 |
| wts | number | UNIX 秒级时间戳 | 不必要 | 参见 WBI 签名 |
JSON 回复:
根对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| code | number | 返回值 | 0: 成功 -352: 请求被风控 -400: 请求错误 -404: 啥都木有 |
| data | object | 数据本体 | 见下 |
| message | string | 错误信息 | 成功时为 0 |
| ttl | number | 1 |
data 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| act_id | number | 操作 ID? | |
| apply_time | string | 应用时间? | |
| attributes | number | 属性位? | 可能不存在 |
| authenMark | null | 授权码? | |
| author | object | 作者信息 | 参考 用户基本信息 |
| banner_url | string | 文章头图 URL | 空则为无 |
| categories | object[] | 专栏分类信息 | 首项为主分区, 第二项为子分区 |
| category | object | 专栏分类信息 | 子分区 |
| check_state | number | 检查状态? | |
| check_time | string | 检查时间? | |
| content | string | 文章内容 | type 字段为 0 为 HTML, 3 为 JSON |
| content_pic_list | unknown | 内容图片列表? | |
| cover_avid | number | 封面视频 AV 号 | 0 为无视频 |
| ctime | number | 创建时间 | UNIX 秒级时间戳 |
| dispute | unknown | 争议信息? | |
| dyn_id_str | string | 动态 opus id | |
| dynamic | string | 动态信息? | 可能不存在 |
| id | number | 专栏文章 ID | |
| image_urls | string[] | 图片 URL | |
| is_like | boolean | 是否喜欢? | |
| keywords | string | 关键词 | 以 , 分隔 |
| list | object | 文集信息 | 见下 |
| media | object | 媒体信息? | |
| mtime | number | 修改时间 | UNIX 秒级时间戳 |
| opus | object | opus 信息 | 当 type 字段为 3 时存在, 包含了更加详细的富文本信息 |
| origin_image_urls | string[] | 原始图片 URL | |
| origin_template_id | number | 原始模板 ID? | |
| original | number | 是否原创 | 0: 非原创 1: 原创 |
| private_pub | number | 仅自己可见 | |
| publish_time | number | 发布时间 | UNIX 秒级时间戳 |
| reprint | number | 是否允许转载 | 0: 不允许 1: 允许规范转载 |
| state | number | 专栏状态 | |
| stats | object | 统计数据 | |
| summary | string | 专栏开头部分内容 | 纯文本 |
| tags | object[] | 专栏标签 | |
| template_id | number | 模板 ID? | |
| title | string | 专栏标题 | |
| top_video_info | unknown | 封面食品信息? | |
| total_art_num | number | 作者总文章数 | |
| type | number | 类型? | |
| version_id | number | 版本 ID? | |
| words | number | 文章总词数 |
data.categories[] 对象:
另见 专栏分类
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| id | number | 分类 ID | |
| name | string | 分类名称 | |
| parent_id | number | 父分类 ID |
data.category 对象:
同 data.categories[] 中的对象
data.content 为字符串形式的 JSON 时代表的对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| ops | object[] | 以 JSON 呈现的文本内容 | 套了个娃 |
data.content 代表的对象中的 ops 数组中的对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| attribute | object? | 属性 | 见下 |
| insert | string | object | 插入内容 |
data.content 代表的对象中的 ops[].attribute 对象:
注: 此处属性备注为页面实际渲染的情况
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| align | string? | 文字对齐 | 参见 text-align |
| blockquote | boolean? | 块级引用 | 参见 <blockquote>：块级引用元素 |
| bold | boolean? | 加粗 | 参见 <strong> |
| class | string? | 类名 | 参见 class |
| color | string? | 颜色 | 十六进制颜色值, 参见 color |
| header | number? | 标题级别 | 参见 <h1>–<h6>：HTML 区域标题元素 |
| strike | boolean? | 删除线 | 参见 <s> |
| link | string? | 站内链接 | 参见 <a>：锚元素 |
| italic | boolean? | 斜体 | 参见 <em>：强调元素 |
data.content 代表的对象中的 ops[].insert 为对象时的对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| native-image | object? | 原生图片 | 见下, 另见 <img>：图像嵌入元素 |
| cut-off | object? | 分割线 | 见下 |
| video-card | object? | 视频卡片 | 见下 |
| article-card | object? | 专栏卡片 | 见下 |
| vote-card | object? | 投票卡片 | 见下 |
| live-card | object? | 投票卡片 | 见下 |
data.content 代表的对象中的 ops[].insert.native-image 对象:
注: 此处属性备注为页面实际渲染的情况
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| alt | string | 图像的备用文本描述 | 即 <img> 的 alt 属性 |
| url | string | 图像的 URL | 即 <img> 的 src 属性 |
| width | number | 图像的宽度 | 即 <img> 的 data-w 属性 |
| height | number | 图像的高度 | 即 <img> 的 data-h 属性 |
| size | number | 图像的文件大小 | 即 <img> 的 data-size 属性 |
| status | number | "loaded" |
即 <img> 的 data-status 属性 |
data.content 代表的对象中的 ops[].insert.cut-off 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| type | string | 类型 | 没错, 就是字符串 |
| url | string | 分割线图片 URL |
data.content 代表的对象中的 ops[].insert.video-card 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| alt | string | ||
| height | number | 卡片高度 | 似乎恒定为 352 |
| id | string | 视频 id | 如 av99999999 |
| size | null | ||
| status | string | loaded |
|
| tid | number | 1.1 |
|
| url | string | 卡片图片 URL | |
| width | number | 卡片宽度 | 似乎恒定为 2632 |
data.content 代表的对象中的 ops[].insert.article-card 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| alt | string | ||
| height | number | 卡片高度 | 似乎恒定为 320 |
| id | string | 文章 id | 如 cv1 |
| size | null | ||
| status | string | loaded |
|
| tid | number | 2 |
|
| url | string | 卡片图片 URL | |
| width | number | 卡片宽度 | 似乎恒定为 2632 |
data.content 代表的对象中的 ops[].insert.vote-card 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| alt | string | ||
| height | number | 卡片高度 | 似乎恒定为 320 |
| id | string | 投票 id | 确实是字符串, 如 15111509 |
| size | null | ||
| status | string | loaded |
|
| tid | number | 7 |
|
| url | string | 卡片图片 URL | |
| width | number | 卡片宽度 | 似乎恒定为 2632 |
data.content 代表的对象中的 ops[].insert.live-card 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| alt | string | ||
| height | number | 卡片高度 | 似乎恒定为 352 |
| id | string | 直播间 id | 可能为长也可能为短, 如 lv1 lv5440 |
| size | null | ||
| status | string | loaded |
|
| tid | number | 8 |
|
| url | string | 卡片图片 URL | |
| width | number | 卡片宽度 | 似乎恒定为 2632 |
data.list 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| apply_time | string | 空 | |
| articles_count | number | 0 | |
| check_time | string | 空 | |
| ctime | number | 创建时间 | UNIX 秒级时间戳 |
| id | number | 文集 ID | |
| image_url | string | 文集封面 URL | |
| mid | number | 作者 mid | |
| name | string | 文集名称 | |
| publish_time | number | 最新发布时间 | UNIX 秒级时间戳 |
| read | number | 0 | |
| reason | string | 审核不通过理由? | |
| state | number | 文集状态 | |
| summary | string | 文集描述 | |
| update_time | number | 文集更新时间 | UNIX 秒级时间戳 |
| words | number | 文集总词数 |
data.media 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| area | string | ||
| cover | string | ||
| media_id | number | ||
| score | number | ||
| season_id | number | ||
| spoiler | number | ||
| title | string | ||
| type_id | number | ||
| type_name | string |
data.stats 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| coin | number | 硬币数 | |
| dislike | number | 点踩数 | 0 |
| dynamic | number | 动态数? | |
| favorite | number | 收藏数 | |
| like | number | 点赞数 | |
| reply | number | 回复数 | |
| share | number | 分享数 | |
| view | number | 查看数 |
data.tags[] 对象:
| 字段 | 类型 | 内容 | 备注 |
|---|---|---|---|
| name | string | 标签名 | |
| tid | number | 标签 ID |
示例:
type=0: cv1 未知的光
curl -G 'https://api.bilibili.com/x/article/view' \
--url-query 'id=1' \
-A 'Mozilla/5.0'
查看响应示例:
{
"code": 0,
"data": {
"act_id": 0,
"apply_time": "",
"attributes": 24,
"authenMark": null,
"author": {
"face": "https://i1.hdslb.com/bfs/face/89fe260a17891fdadc3365a9698fee52796c7765.jpg",
"fans": 3051,
"level": 6,
"mid": 91221505,
"name": "健行见远渐忘",
"nameplate": {
"condition": "2018.6.26-7.8某一天是年度大会员",
"image": "https://i0.hdslb.com/bfs/face/421179426c929dfeaed4117461c83f5d07ffb148.png",
"image_small": "https://i0.hdslb.com/bfs/face/682001c2e1c2ae887bdf2a0e18eef61180c48f84.png",
"level": "稀有勋章",
"name": "大会员2018年度勋章",
"nid": 74
},
"official_verify": {
"desc": "",
"type": -1
},
"pendant": {
"expire": 0,
"image": "https://i1.hdslb.com/bfs/face/7ae15f06f8c912435206a2578509d6bc77c12353.png",
"name": "作文鬼才",
"pid": 255
},
"vip": {
"avatar_subscript": 1,
"due_date": 0,
"label": {
"label_theme": "annual_vip",
"path": "http://i0.hdslb.com/bfs/vip/label_annual.png",
"text": "年度大会员"
},
"nickname_color": "#FB7299",
"status": 1,
"theme_type": 0,
"type": 2,
"vip_pay_type": 0
}
},
"banner_url": "https://i0.hdslb.com/bfs/article/b1e1029c08d8ad1bb06460d736839a7741dd7925.jpg",
"categories": [
{
"id": 3,
"name": "生活",
"parent_id": 0
},
{
"id": 15,
"name": "日常",
"parent_id": 3
}
],
"category": {
"id": 15,
"name": "日常",
"parent_id": 3
},
"check_state": 0,
"check_time": "",
"content": "<p>天空像是倾倒出的墨水，黑得静谧而深邃。黎明还远，光亮全无。</p><p>夜不能寐。披衣，起床。茶香的弥漫，一盏灯的相伴。夜，你是我久别重逢的朋友，那一刹那的相见，带给了我久违的安思。如果不是梦魇的皮闹，我本不该投入你的怀抱，此时此刻，万念侵扰，思绪咆哮。</p><p>台灯在角落里静静注视着我，不稳定的电流偶尔会吱吱作响。一切都像打在海绵上的水，渐渐消失，慢慢隐身于黑夜，独独留下我自己。一盏灯就可以把夜撕出个伤口，我似乎听到夜逃离光亮的脚步声，窸窸窣窣。它在蔓延，吞噬的野心已越过了窗沿。</p><p>我捧着茶杯，仿佛是在捧着一整个空间，凝重而诡异。茶香绕过茶杯脱落的瓷层向四周扩散，空气闻到了茶香，于是身边的气息似乎活跃了起来。转念一想，人生如茶。器皿的束缚不是茶香的归宿，所以人生的低谷也不是生命的全部。黑暗是光明的束缚，但光明却是黑暗的归宿。</p><p>灯光下，书架上一本金色题字的书的书名熠熠发光，我起身取下书，发现是海伦写的《假如给我三天光明》，我内心一热，忽然间有些感动。一个身体残疾的孩子，孱弱的身躯却支撑起了刚劲的灵魂。她的眼前一片漆黑，但内心世界却是光彩艳丽的。她的心中永远都有一抹无形的光，指引着她踏遍人生的路途。</p><p>时钟告诉我现在是凌晨四点。我舒展下筋骨，刚要起身，一只飞虫不偏不斜恰好闯入我的视线。灯光是它唯一的追寻。我不敢有任何的动作，只好也只能静静看着这只可爱的生灵。它好像不知道我是它的伙伴，也许它真的以为光亮是它唯一的追寻。但是我却欣慰于这突如其来的伙伴。光明可以带来很多东西，有时候也包括一份黑暗中的灵魂的一份安慰。我不忍打扰它与光明的约会，于是悄悄起身慢慢摸索着到了阳台。</p><p>阳台和我沉入了外面黑暗的梦乡。隐约可以听到一些不知名的昆虫在开着它们的舞会，我猜它们都端着无形的酒杯。它们在黑暗中买醉，因为明天的天明将是它们的散会。我有些感怀，也有些悲哀。</p><p>夜风股股咆哮着，我昂首顶住风头，仰望着漆黑的四周。很远很远处，灯塔若隐若现。它向来就是一头巨大的野兽，而此时它却空荡的像杯将尽的酒。它散发出柔弱的灯光在风中摇曳，忽明忽暗，像是一场与黑暗的决斗，随时都可能葬身在这黎明的前奏。</p><p>不忍心这惨烈的一幕，我踱步来到窗前。窗子很旧了，旧到已经无法再承受住时间的践踏了。可无论它多么陈旧，此时的它是神奇的——窗外黑暗窗内光。人心不也是一扇窗户吗？一半明媚一半伤。窗户把光亮的一面给了光明，人心是不是也应该把明媚的一半朝向世界呢？</p><p>屋内的灯倏忽闪了闪，我晃过神来，发现天边已经有抹淡红色了。黎明的脚步已经迈出了一半。那只与台灯约会的虫子似乎很满意，兴高采烈的向着呼之欲出的朝阳的方向窜去了。我望着它的背影，轻轻挥了挥手，心中暗念：“亲爱的朋友，恭喜你找到了属于自己的方向和追求，希望你能在光和热中接受生命的升华。”</p><p>天空见亮了，有点空灵，光晕中泛着感动。第一缕曙光穿透了云层，是的，我看到了，那一抹光，越来越近，越来越亮……</p>",
"content_pic_list": null,
"cover_avid": 0,
"ctime": 1497973729,
"dispute": null,
"dyn_id_str": "38554821905721204",
"dynamic": "It's now or never !",
"id": 1,
"image_urls": [
"https://i0.hdslb.com/bfs/article/d2eedf1fd338bceca10099e2f7b33fa9017c859b.jpg"
],
"is_like": false,
"keywords": "天空像是倾倒出的墨水，黑得静谧而深邃。黎明还远，光亮全无。夜不能寐。披衣，起床。茶香的弥漫，一盏灯的相伴。夜，你是我久别重逢的朋友，那一刹那的相见，带给了我久违的安思。如果不是梦魇的皮闹，我本不该投入",
"list": {
"apply_time": "",
"articles_count": 0,
"check_time": "",
"ctime": 1588601669,
"id": 253534,
"image_url": "",
"mid": 91221505,
"name": "静夜思",
"publish_time": 1625900652,
"read": 0,
"reason": "",
"state": 1,
"summary": "",
"update_time": 1625900518,
"words": 3059
},
"media": {
"area": "",
"cover": "",
"media_id": 0,
"score": 0,
"season_id": 0,
"spoiler": 0,
"title": "",
"type_id": 0,
"type_name": ""
},
"mtime": 1589209079,
"origin_image_urls": [
"https://i0.hdslb.com/bfs/article/b1e1029c08d8ad1bb06460d736839a7741dd7925.jpg"
],
"origin_template_id": 4,
"original": 0,
"private_pub": 0,
"publish_time": 1519913233,
"reprint": 0,
"state": 0,
"stats": {
"coin": 2543,
"dislike": 1,
"dynamic": 0,
"favorite": 17520,
"like": 32484,
"reply": 14399,
"share": 616,
"view": 1631212
},
"summary": "天空像是倾倒出的墨水，黑得静谧而深邃。黎明还远，光亮全无。夜不能寐。披衣，起床。茶香的弥漫，一盏灯的相伴。夜，你是我久别重逢的朋友，那一刹那的相见，带给了我久违的安思。如果不是梦魇的皮闹，我本不该投入",
"tags": [
{
"name": "静夜思",
"tid": 239416
}
],
"template_id": 4,
"title": "未知的光",
"top_video_info": null,
"total_art_num": 5,
"type": 0,
"version_id": 0,
"words": 1190
},
"message": "0",
"ttl": 1
}
type=3: cv41358718 通过 DevTools 绕过 SSR 抓包某站专栏正文接口
curl 'https://api.bilibili.com/x/article/view?id=41358718' \
-A 'Mozilla/10.0'
查看响应示例:
{
"code": 0,
"message": "0",
"ttl": 1,
"data": {
"id": 41358718,
"category": {
"id": 26,
"parent_id": 17,
"name": "数码"
},
"categories": [
{
"id": 17,
"parent_id": 0,
"name": "科技"
},
{
"id": 26,
"parent_id": 17,
"name": "数码"
}
],
"title": "通过 DevTools 绕过 SSR 抓包某站专栏正文接口",
"summary": "背景\n最近没什么事做, 又回 BAC 看看有什么接口可以抓, 于是看到了陈年的专栏正文内容的 Issue #859\n由于泽生自己是写前端的, 对于浏览器 DevTools 的各项调试工具还算是比较了解, 打算想办法把专栏正文的接口抓下来 :)\n思路\n由于专栏正文完整的内容在页面加载的时候就已经通过 SSR (Server-Side Rendering, 服务端渲染) 的方式通过 <script> 标签注入到 HTML 网页中, 直接通过看 DevTools 的网络面板肯定是没用的\n[图片]\n最直接的方法是",
"banner_url": "",
"template_id": 4,
"state": 0,
"author": {
"mid": 645769214,
"name": "Session小胡",
"face": "https://i2.hdslb.com/bfs/face/77906db03b1eefac02613de184afad03f7bc58d7.jpg",
"pendant": {
"pid": 0,
"name": "",
"image": "",
"expire": 0
},
"official_verify": {
"type": -1,
"desc": ""
},
"nameplate": {
"nid": 4,
"name": "青铜殿堂",
"image": "https://i2.hdslb.com/bfs/face/2879cd5fb8518f7c6da75887994c1b2a7fe670bd.png",
"image_small": "https://i0.hdslb.com/bfs/face/6707c120e00a3445933308fd9b7bd9fad99e9ec4.png",
"level": "普通勋章",
"condition": "单个自制视频总播放数>=1万"
},
"vip": {
"type": 1,
"status": 0,
"due_date": 0,
"vip_pay_type": 0,
"theme_type": 0,
"label": {
"path": "",
"text": "",
"label_theme": ""
},
"avatar_subscript": 0,
"nickname_color": ""
},
"fans": 347,
"level": 4
},
"reprint": 1,
"image_urls": [
"https://i0.hdslb.com/bfs/article/9071997152b6fec0ae465fe2a86b580e645769214.jpg"
],
"publish_time": 1744789930,
"ctime": 1744789930,
"mtime": 1744789930,
"stats": {
"view": 51,
"favorite": 2,
"like": 3,
"dislike": 0,
"reply": 0,
"share": 0,
"coin": 2,
"dynamic": 0
},
"tags": [
{
"tid": 12005,
"name": "HTML"
},
{
"tid": 336733,
"name": "API"
},
{
"tid": 854101,
"name": "BAC"
},
{
"tid": 2573142,
"name": "JavaScript"
},
{
"tid": 2709088,
"name": "Bilibili"
},
{
"tid": 2719113,
"name": "GitHub"
},
{
"tid": 2822654,
"name": "Web"
},
{
"tid": 3161936,
"name": "Chromium"
},
{
"tid": 3416147,
"name": "DevTools"
}
],
"words": 2039,
"origin_image_urls": [
"https://i0.hdslb.com/bfs/article/9071997152b6fec0ae465fe2a86b580e645769214.jpg"
],
"list": {
"id": 326286,
"mid": 645769214,
"name": "电脑",
"image_url": "",
"update_time": 1744789924,
"ctime": 1601636259,
"publish_time": 1744789930,
"summary": "",
"words": 9501,
"read": 0,
"articles_count": 0,
"state": 1,
"reason": "",
"apply_time": "",
"check_time": ""
},
"is_like": false,
"media": {
"score": 0,
"media_id": 0,
"title": "",
"cover": "",
"area": "",
"type_id": 0,
"type_name": "",
"spoiler": 0,
"season_id": 0
},
"apply_time": "",
"check_time": "",
"original": 1,
"act_id": 0,
"dispute": null,
"authenMark": null,
"cover_avid": 0,
"top_video_info": null,
"type": 3,
"check_state": 0,
"origin_template_id": 4,
"private_pub": 0,
"content_pic_list": null,
"content": "{\"ops\":[{\"insert\":\"背景\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"最近没什么事做, 又回 BAC 看看有什么接口可以抓, 于是看到了陈年的专栏正文内容的 Issue #859\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"由于泽生自己是写前端的, 对于浏览器 DevTools 的各项调试工具还算是比较了解, 打算想办法把专栏正文的接口抓下来 :)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"思路\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"由于专栏正文完整的内容在页面加载的时候就已经通过 SSR (Server-Side Rendering, 服务端渲染) 的方式通过 <script> 标签注入到 HTML 网页中, 直接通过看 DevTools 的网络面板肯定是没用的\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"class\":\"normal-img\"},\"insert\":{\"native-image\":{\"alt\":\"read-normal-img\",\"url\":\"https://i0.hdslb.com/bfs/new_dyn/7bb121008990850bbd333fe504eebc90645769214.png\",\"width\":748,\"height\":494,\"size\":185239,\"status\":\"loaded\"}}},{\"insert\":\"最直接的方法是找到专栏相关的 JavaScript 代码, 通过大脑在没有 SourceMap 的情况下沿着 bundle 逆向出接口, 这种方法对于泽生明显不可行, 其中一个原因是屏幕太小而源码太大 (-.-;)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"另一个方法是通过伪造 SSR 不工作, 从而诱导页面脚本手动通过 API 去获取内容, 不过伪造的方法也比较麻烦, 但可行度相对较高 😆\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"关于如何伪造 SSR 不工作的现象, 就需要分析 SSR 是如何被使用的, 某站的 SSR 是通过向页面注入 JavaScript 代码实现的, 具体是在 window 全局对象上加了个属性 __INITIAL_STATE__, 具体结构需要具体页面分析\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"目标就是要在读取之前移除这个属性, 移除方法简单, 无非是直接 window.__INITIAL_STATE__ = undefined (或者任意无效值), 或者 delete window.__INITIAL_STATE__, 别的 ES6 的反射之类的方法就不说了, 这不是重点\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"但这个脚本注入的位置就很恶心, 不在 <head> 里面, 也不在 <body> 底部, 就刚好在读取 __INITIAL_STATE__ 的脚本前面, 这使得无法使用篡改猴一类的用户脚本插件进行修改, 因为提供的用户脚本执行方式会出现还没写属性和已经读过属性的问题 (゜-゜)\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"接着就是传统的 DevTools 调试面板, 但正常手动暂停脚本执行往往已经脚本执行完成了, 解决方法就是网络节流或者 <head> 处用户脚本 debugger 语句\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"正好篡改猴高级设置允许用户脚本执行前暂停开始调试, 原理就是 debugger 语句, 只要把脚本执行位置放在 <body> 之前就有机会打断点把 __INITIAL_STATE__ 删掉 💥\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"class\":\"normal-img\"},\"insert\":{\"native-image\":{\"alt\":\"read-normal-img\",\"url\":\"https://i0.hdslb.com/bfs/new_dyn/1a20d186e8c8cddc043b5295d481c719645769214.png\",\"width\":625,\"height\":563,\"size\":320286,\"status\":\"loaded\"}}},{\"insert\":\"实践\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"使用 Chromium (理论上 Firefox 也可以, 但其 DevTools 泽生用起来不是很舒服) 安装篡改猴扩展 🐒, 新建一个用户脚本, 里面是否写内容无所谓, 执行位置为 document-head, 然后在篡改猴的设置里面把调试脚本打开\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"接着打开一个使用 SSR 的网页, 不过注意要保持 DevTools 打开, 否则调试就不会生效, 页面脚本自动暂停后, 你将看到你的脚本和该页面已经加载的内容, 包含 HTML 网页, JavaScript 代码, 和 CSS 文本\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"你所需要做的就是检查 SSR 的情况是否如你所想的那样, 放在 window.__INITIAL_STATE__ 那里, 如果是直接渲染成页面元素的话, 抱歉上帝来了也救不了你, 某站 JavaScript 前端可不会管 HTML 的事情 🫠\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"如果在 __INITIAL_STATE__ 里面, 恭喜, 你可以直接继续了. 如果不是, 那就检查一下当前页面路径之类的, 看看有没有不同版本的相同内容, 毕竟专栏分新旧版, 专栏网页也分新旧版, 往往旧版能带来惊喜 ✨\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"找到了合适的 __INITIAL_STATE__, 你只需要在原地打个断点, 然后继续执行脚本, 页面就会在那里暂停, 接着执行下一步, 此时赋值完成, 可以开始改属性了\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"切到控制台, 执行那句期待已久的语句: window.__INITIAL_STATE__ = undefined, 大功告成! 🎉\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"恢复页面脚本执行, 你会看到页面好像卡了一下, 然后文章还是加载了出来, 这个时候就可以看看网络面板的情况了\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"attributes\":{\"class\":\"normal-img\"},\"insert\":{\"native-image\":{\"alt\":\"read-normal-img\",\"url\":\"https://i0.hdslb.com/bfs/new_dyn/87c88df1e15195996e34835456493d55645769214.png\",\"width\":892,\"height\":831,\"size\":473706,\"status\":\"loaded\"}}},{\"insert\":\"可以观察到, 多了一个你从来没见到过的叫 view 的野生请求, 点开详细, 复制地址, 记下参数, 保存响应, 发 Issue 去也~\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"如果这时回过头看控制台, 你会发现有这么一段错误十分显眼, 无法读取 undefined 的属性, 正是由于这个错误, 加之某站程序员的细心, 你才得以看到文章和抓到接口\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"后话\"},{\"attributes\":{\"header\":2},\"insert\":\"\\n\"},{\"insert\":\"Issue 已经发了, 估计写到文档里也是泽生的事情 🥴\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"这样的因 SSR 而省下的相关接口应该也有很多, 一个个慢慢打断点抓也不是个长久之计, 毕竟一旦直接渲染成 HTML, 就没的办法了 😮💨\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"学习正经的前端知识还是有利于不正经的逆向的 📚\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"希望大家都能来一起帮忙, Make BAC Great Again! 🥂\"},{\"attributes\":{\"list\":\"bullet\"},\"insert\":\"\\n\"},{\"insert\":\"有改动, 原文地址: https://sess.xhustudio.eu.org/posts/2025/devtools-vs-ssr-bac/\"},{\"attributes\":{\"blockquote\":true},\"insert\":\"\\n\"}]}",
"keywords": "BULLET,HEADER,WINDOW,LIST,SSR,WIDTH,html,undefined,VIEW,FIREFOX,BAC,JAVASCRIPT,CLASS,脚本插件,SIZE,TRUE,es6,ALT,长久之计,HTTPS,CSS,控制台,一起帮,A_PI,解决方法,期待已久,大功告成,没什么,有什么,浏览器,很舒服,无所谓,有没有,程序员,有利于,不正经",
"version_id": 0,
"opus": {
"opus_id": 1056353752004427792,
"opus_source": 2,
"title": "通过 DevTools 绕过 SSR 抓包某站专栏正文接口",
"content": {
"paragraphs": [
{
"para_type": 1,
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "背景",
"font_size": 22,
"style": {
"bold": true
},
"font_level": "xLarge"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "最近没什么事做, 又回 BAC 看看有什么接口可以抓, 于是看到了陈年的专栏正文内容的 Issue #859",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 2
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "由于泽生自己是写前端的, 对于浏览器 DevTools 的各项调试工具还算是比较了解, 打算想办法把专栏正文的接口抓下来 :)",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 1,
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "思路",
"font_size": 22,
"style": {
"bold": true
},
"font_level": "xLarge"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "由于专栏正文完整的内容在页面加载的时候就已经通过 SSR (Server-Side Rendering, 服务端渲染) 的方式通过 <script> 标签注入到 HTML 网页中, 直接通过看 DevTools 的网络面板肯定是没用的",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 2,
"pic": {
"pics": [
{
"url": "https://i0.hdslb.com/bfs/new_dyn/7bb121008990850bbd333fe504eebc90645769214.png",
"width": 748,
"height": 494,
"size": 180.8974609375
}
],
"style": 1
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "最直接的方法是找到专栏相关的 JavaScript 代码, 通过大脑在没有 SourceMap 的情况下沿着 bundle 逆向出接口, 这种方法对于泽生明显不可行, 其中一个原因是屏幕太小而源码太大 (-.-;)",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 2
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "另一个方法是通过伪造 SSR 不工作, 从而诱导页面脚本手动通过 API 去获取内容, 不过伪造的方法也比较麻烦, 但可行度相对较高 😆",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 3
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "关于如何伪造 SSR 不工作的现象, 就需要分析 SSR 是如何被使用的, 某站的 SSR 是通过向页面注入 JavaScript 代码实现的, 具体是在 window 全局对象上加了个属性 __INITIAL_STATE__, 具体结构需要具体页面分析",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 4
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "目标就是要在读取之前移除这个属性, 移除方法简单, 无非是直接 window.__INITIAL_STATE__ = undefined (或者任意无效值), 或者 delete window.__INITIAL_STATE__, 别的 ES6 的反射之类的方法就不说了, 这不是重点",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 5
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "但这个脚本注入的位置就很恶心, 不在 <head> 里面, 也不在 <body> 底部, 就刚好在读取 __INITIAL_STATE__ 的脚本前面, 这使得无法使用篡改猴一类的用户脚本插件进行修改, 因为提供的用户脚本执行方式会出现还没写属性和已经读过属性的问题 (゜-゜)",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 6
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "接着就是传统的 DevTools 调试面板, 但正常手动暂停脚本执行往往已经脚本执行完成了, 解决方法就是网络节流或者 <head> 处用户脚本 debugger 语句",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 7
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "正好篡改猴高级设置允许用户脚本执行前暂停开始调试, 原理就是 debugger 语句, 只要把脚本执行位置放在 <body> 之前就有机会打断点把 __INITIAL_STATE__ 删掉 💥",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 2,
"pic": {
"pics": [
{
"url": "https://i0.hdslb.com/bfs/new_dyn/1a20d186e8c8cddc043b5295d481c719645769214.png",
"width": 625,
"height": 563,
"size": 312.779296875
}
],
"style": 1
}
},
{
"para_type": 1,
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "实践",
"font_size": 22,
"style": {
"bold": true
},
"font_level": "xLarge"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "使用 Chromium (理论上 Firefox 也可以, 但其 DevTools 泽生用起来不是很舒服) 安装篡改猴扩展 🐒, 新建一个用户脚本, 里面是否写内容无所谓, 执行位置为 document-head, 然后在篡改猴的设置里面把调试脚本打开",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 2
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "接着打开一个使用 SSR 的网页, 不过注意要保持 DevTools 打开, 否则调试就不会生效, 页面脚本自动暂停后, 你将看到你的脚本和该页面已经加载的内容, 包含 HTML 网页, JavaScript 代码, 和 CSS 文本",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 3
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "你所需要做的就是检查 SSR 的情况是否如你所想的那样, 放在 window.__INITIAL_STATE__ 那里, 如果是直接渲染成页面元素的话, 抱歉上帝来了也救不了你, 某站 JavaScript 前端可不会管 HTML 的事情 🫠",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 4
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "如果在 __INITIAL_STATE__ 里面, 恭喜, 你可以直接继续了. 如果不是, 那就检查一下当前页面路径之类的, 看看有没有不同版本的相同内容, 毕竟专栏分新旧版, 专栏网页也分新旧版, 往往旧版能带来惊喜 ✨",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 5
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "找到了合适的 __INITIAL_STATE__, 你只需要在原地打个断点, 然后继续执行脚本, 页面就会在那里暂停, 接着执行下一步, 此时赋值完成, 可以开始改属性了",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 6
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "切到控制台, 执行那句期待已久的语句: window.__INITIAL_STATE__ = undefined, 大功告成! 🎉",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 7
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "恢复页面脚本执行, 你会看到页面好像卡了一下, 然后文章还是加载了出来, 这个时候就可以看看网络面板的情况了",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 2,
"pic": {
"pics": [
{
"url": "https://i0.hdslb.com/bfs/new_dyn/87c88df1e15195996e34835456493d55645769214.png",
"width": 892,
"height": 831,
"size": 462.603515625
}
],
"style": 1
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "可以观察到, 多了一个你从来没见到过的叫 view 的野生请求, 点开详细, 复制地址, 记下参数, 保存响应, 发 Issue 去也~",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 2
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "如果这时回过头看控制台, 你会发现有这么一段错误十分显眼, 无法读取 undefined 的属性, 正是由于这个错误, 加之某站程序员的细心, 你才得以看到文章和抓到接口",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 1,
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "后话",
"font_size": 22,
"style": {
"bold": true
},
"font_level": "xLarge"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 1
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "Issue 已经发了, 估计写到文档里也是泽生的事情 🥴",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 2
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "这样的因 SSR 而省下的相关接口应该也有很多, 一个个慢慢打断点抓也不是个长久之计, 毕竟一旦直接渲染成 HTML, 就没的办法了 😮💨",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 3
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "学习正经的前端知识还是有利于不正经的逆向的 📚",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 6,
"format": {
"list_format": {
"level": 1,
"order": 4
}
},
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "希望大家都能来一起帮忙, Make BAC Great Again! 🥂",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
},
{
"para_type": 4,
"text": {
"nodes": [
{
"node_type": 1,
"word": {
"words": "有改动, 原文地址: https://sess.xhustudio.eu.org/posts/2025/devtools-vs-ssr-bac/",
"font_size": 17,
"style": {},
"font_level": "regular"
}
}
]
}
}
]
},
"tags": [
{
"tag": {
"show_text": "HTML",
"link_type": 36
}
},
{
"tag": {
"show_text": "API",
"link_type": 36
}
},
{
"tag": {
"show_text": "BAC",
"link_type": 36
}
},
{
"tag": {
"show_text": "JavaScript",
"link_type": 36
}
},
{
"tag": {
"show_text": "Bilibili",
"link_type": 36
}
},
{
"tag": {
"show_text": "GitHub",
"link_type": 36
}
},
{
"tag": {
"show_text": "Web",
"link_type": 36
}
},
{
"tag": {
"show_text": "Chromium",
"link_type": 36
}
},
{
"tag": {
"show_text": "DevTools",
"link_type": 36
}
}
],
"pub_info": {
"uid": 645769214,
"pub_time": 1744789930
},
"article": {
"category_id": 26,
"list_id": 326286,
"originality": 1,
"reproduced": 1,
"cover": [
{
"url": "http://i0.hdslb.com/bfs/article/9071997152b6fec0ae465fe2a86b580e645769214.jpg",
"width": 768,
"height": 430,
"size": 58.13671875
}
],
"biz_tags": [
"JavaScript",
"HTML",
"Chromium",
"DevTools",
"BAC",
"GitHub",
"API",
"Bilibili",
"Web"
]
},
"version": {
"cvid": 41358718,
"version_id": 140614555890906624
}
},
"dyn_id_str": "1056353752004427792",
"total_art_num": 4
}
}