新加坡联合早报 www.zaobao.com/

新闻详情页面采用了一种没见过的技术应对复制与爬虫

例如 www.zaobao.com/news/china/story20230110-1351792
在 P 标签内加入了 data-s="yGMGEZQ===="这种标签,导致页面看起来段落顺序是正确的,但复制,或者爬取,就是错的
请大神指点一下

html 里的结构和视觉效果的结构不一致,这种你要打断点研究排序的那个方法,反向还原

参考: github.com/DIYgod/RSSHub/issues/10309

根据 data-s 标签算出来的排序, 感兴趣且有时间的可以跟进去看看, 混淆了有点费时间, o 值就是正常的顺序

这玩意儿是不是一个无头浏览器就解决了?

+1, 就是需要在获取到数据之后浏览器执行一遍 js 重新排序

所以是数组定义了一层映射来打乱段落的顺序吗,确实直接复制段落就会隔三差五的,第一次见 hhh

爬虫一般都不用浏览器的,效率极低

我尝试过了,Firefox 无法获得 html 内容,chrome 获得的同样是乱序

浏览器截图 + OCR

那这样是否意味着搜索引擎也无法收录了?

这样效率是不是太慢了 况且 ocr 还有识别不精准的问题,但确实是一种解决方法(狗头

(右键可以复制全文

没研究过但是
不妨看看 rsshub 对联合早报的 rss 爬取策略?
如果只是想获取新闻内容

不用浏览器用什么?好奇...

我只知道无头浏览器, 如果他说的不是无头浏览器的话我也很好奇这种需要执行 js 去计算 DOM 的内容要怎么抓取...

把这个老哥的函数给扣下里就好了,i.default.d 扣下来本地跑 js 代码解析 data-s

const axios = require("axios");
const cheerio = require("cheerio");

axios.get(" www.zaobao.com/news/china/story20230110-1351792").then(res => {
const $ = cheerio.load(res.data)
const context = []
$("#article-body").children().each((i, el) => {
if (i > 0 && $(el).text() !== "") {
context.push($(el).text())
}
})
console.log(context.join("\n"))
})

cmd.im/pmhr

关键代码 传入参数 data-s.substring(3)

d = function (e) {
 var t, n, o, i = e["length"], s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567=", l = 0, u = 0, c = "";
 e = e["toUpperCase"]();
 for (var d = 0; d < i; d += 1)
 (t = s["indexOf"](e["charAt"](d))) >= 0 && t < 32 && (n = n << 5 | t, u += 5, u >= 8 && (o = 255 & n >> (u - 8), c = (c + String["fromCharCode"](o)), u -= 8));
 if ((u > 0) && (o = (n << (8 - u) & 255) >> (8 - u), (o !== 0))) {
 c = c + String.fromCharCode(o)
 }
 return c
}

大佬牛逼,能分享一下定位用的工具和思路吗

简单看了下就是 data-s 字符串截取 3 位,然后 base32 加码就行了。
比如,data-s="6qsGE3A====" 然后 base32 解码 GE3A==== 直接返回 16
随便找了个在线解码: www.usetoolbar.com/developer/base32.html

试试吧,没仔细确认

大佬你就是生产力!!!