吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 5441|回复: 94
收起左侧

[Web逆向] B站素材库平台下载按钮【tampermonkey脚本】

    [复制链接]
天空宫阙 发表于 2022-4-18 10:41
本帖最后由 天空宫阙 于 2022-4-28 15:40 编辑

B站素材库平台 视频下载

介绍

目标网站,B站素材库平台

https://cool.bilibili.com/square/video

B站素材库平台,有比较多质量还不错的素材,比如nice,黑人流泪,土拨鼠尖叫,还有很多不错的绿幕素材,但是网页端竟然不允许下载,这就不方便在PR中使用。可是给我预览,不给我下载,好像不太可能吧,写了一个tampermonkey脚本,使用后就可以出现下载按钮了。

image-20220418100843176.png

脚本主页地址,安装地址

tampermonkey脚本已经发布

再安装tampermonkey脚本管理器后,就可以去以下地址安装

https://greasyfork.org/zh-CN/scripts/443506-b%E7%AB%99%E7%B4%A0%E6%9D%90%E5%BA%93%E5%B9%B3%E5%8F%B0%E4%B8%8B%E8%BD%BD%E6%8C%89%E9%92%AE

如果对实现原理不感兴趣可以不用往下看了

这个脚本非常简单,去掉样式的代码,核心代码就十几行,但感觉还是有地方可以讲的,比如

  1. chrome阻止下载不安全的内容 https://blog.chromium.org/2020/02/protecting-users-from-insecure.html ,以及绕过的方法
  2. 在tampermonkey的执行时间设置成@run-at document-idle仍然过早,使用@run-at context-menu时发现该网页屏蔽了鼠标右键,这个时候使用setTimeout 延迟执行基本可以满足要求
  3. 最后即使设置了a标签的download属性,仍然无法改变下载文件的名字,这很奇怪
  4. 总之脚本不难,因为一些规则或保护遇到了不少困难。

2022.4.28更新

总体来说我写tampermonkey脚本很少,还是个新手,如果发现我有讲的不当的地方,欢迎在评论区指正。

首先我的目的就是可以下载视频,可以想到的方法有

方法 特点
1.直接按F12打开浏览器开发者工具审查元素得到视频的链接 无需额外安装插件或脚本,但使用不是很方便
2. 添加一个下载的按钮(button)或链接(a标签) 使用方便,依赖tampermonkey脚本
3. 解除网页的右键限制 使用方便,依赖tampermonkey脚本

以上的方便不仅适用于目标网站,对于获取其他受限制的网站(没有下载按钮,限制右键)的视频或图片也有参考价值

方法1 浏览器开发者工具

直接按F12打开浏览器开发者工具审查元素得到视频的链接,粘贴到地址栏即可

image-20220428145437202.png

会使用该方法的一般也是开发者,网站一般也不会禁用开发者工具,万一按F12无法打开开发者工具,可以先打开

开发者工具再打开网页。另外即使使用obfuscator等类似的js混淆库进行反调试,审查元素一般还是可以,所以该方法还是比较通用。

方法2  添加一个下载的按钮(button)或链接(a标签)

添加一个button的代码是,就是更新前我贴的代码,我删了样式部分

function downloadURI(uri, name) {
        var link = document.createElement("a");
        // 改download参数也不能改下载下来的名字,很奇怪
        link.download = name;
        console.log(link.download)
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    function addBut() {
        var but = document.createElement("button");
        but.innerHTML = "下载";
        // 更新符合B站风格的样式
        // 样式删除
        var parent = document.getElementsByClassName("rules")[0];
        var node = document.createElement("div");
        // 样式删除
        var childLength = parent.childNodes.length;
        for (var i = 0; i < childLength; i++) {
            parent.removeChild(parent.childNodes[0]);
        }
        node.appendChild(but)
        parent.appendChild(node);
        // 核心代码
        but.onclick = function () {
            downloadURI(document.getElementsByTagName('video')[0].src, document.getElementsByClassName('info-card-title')[0].innerHTML)
        }
    }
    // 延迟1.5秒执行,如果网速慢可以增加延迟时间
    setTimeout(() => {
        addBut()
    }, 1500)

核心代码是

downloadURI(document.getElementsByTagName('video')[0].src, document.getElementsByClassName('info-card-title')[0].innerHTML)

其中document.getElementsByTagName('video')[0].src可以取到视频的链接

添加一个a标签的代码是

 // ==UserScript==
 // @name         B站素材库平台下载按钮a 标签
 // @namespace    http://tampermonkey.net/
 // @version      0.1
 // @description  B站素材库平台 a 标签
 // @author       You
 // @match        https://cool.bilibili.com/detail/video?*
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
 // @grant        none
 // @run-at       document-idle
 // @license      MIT
 // ==/UserScript==

 (function () {
     'use strict';
     function addBut() {
         debugger;
         var a = document.createElement("a");
         a.innerHTML = "下载视频";
         // 更新符合B站风格的样式
         a.style = "margin-top: 22px;width: 76px;height: 40px;font-size: 14px;line-height: 40px;text-align: center;background: #20aae2;border: 1px solid #20aae2;color: #fff;border-radius: 20px;box-sizing: border-box;";
         a.href = document.getElementsByTagName('video')[0].src;
         a.download = 'name';
         var parent = document.getElementsByClassName("rules")[0];
         var node = document.createElement("div");
         node.style = "display: flex;height: inherit;width: inherit;justify-content: space-evenly;justify-content: space-evenly;align-items: center;";
         var childLength = parent.childNodes.length;
         for (var i = 0; i < childLength; i++) {
             parent.removeChild(parent.childNodes[0]);
         }
         node.appendChild(a)
         parent.appendChild(node);
     }
     // 延迟1秒执行,如果网速慢可以增加延迟时间
     setTimeout(() => {
         addBut()
     }, 1500)
     // Your code here...
 })();

我发现以上的代码也是可以成功的。。。。

之前我使用button的原因是chrome阻止下载不安全的内容 https://blog.chromium.org/2020/02/protecting-users-from-insecure.html ,但现在莫名其妙又不出现了

image-20220428150501207.png

方法3 解除网页的右键限制

后来我发现如果右键保存视频可以用的话也是很方便的,但是再目标网站点击右键没有反应

禁用右键的方式如下

image-20220428130335858.png

因为我们知道是动了document.oncontextmenu,所以解除限制的方法就一行代码

document.oncontextmenu = null

Snipaste_2022-04-28_15-39-56.png

更加完善的解除右键限制脚本如下

// ==UserScript==
// @name         B站素材库平台下载(解除右键限制)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  B站素材库平台 下载按钮
// @author       You
// @match        https://cool.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';
    // https://stackoverflow.com/questions/21335136/how-to-re-enable-right-click-so-that-i-can-inspect-html-elements-in-chrome
    function enableContextMenu(aggressive = false) {
    void(document.ondragstart=null);
    void(document.onselectstart=null);
    void(document.onclick=null);
    void(document.onmousedown=null);
    void(document.onmouseup=null);
    void(document.body.oncontextmenu=null);
    enableRightClickLight(document);
    if (aggressive) {
      enableRightClick(document);
      removeContextMenuOnAll("body");
      removeContextMenuOnAll("img");
      removeContextMenuOnAll("td");
      } }

    function removeContextMenuOnAll(tagName) {
    var elements = document.getElementsByTagName(tagName);
      for (var i = 0; i < elements.length; i++) {
        enableRightClick(elements[i]);
      }
    }

    function enableRightClickLight(el) {
      el || (el = document);
      el.addEventListener("contextmenu", bringBackDefault, true);
    }

    function enableRightClick(el) {
      el || (el = document);
      el.addEventListener("contextmenu", bringBackDefault, true);
      el.addEventListener("dragstart", bringBackDefault, true);
      el.addEventListener("selectstart", bringBackDefault, true);
      el.addEventListener("click", bringBackDefault, true);
      el.addEventListener("mousedown", bringBackDefault, true);
      el.addEventListener("mouseup", bringBackDefault, true);
    }

    function restoreRightClick(el) {
      el || (el = document);
      el.removeEventListener("contextmenu", bringBackDefault, true);
      el.removeEventListener("dragstart", bringBackDefault, true);
      el.removeEventListener("selectstart", bringBackDefault, true);
      el.removeEventListener("click", bringBackDefault, true);
      el.removeEventListener("mousedown", bringBackDefault, true);
      el.removeEventListener("mouseup", bringBackDefault, true);
    }
    function bringBackDefault(event) {
      event.returnValue = true;
      (typeof event.stopPropagation === 'function') &&
      event.stopPropagation();
      (typeof event.cancelBubble === 'function') &&
      event.cancelBubble();
    }

    enableContextMenu();
    // Your code here...
})();

解除限制的方法参考https://stackoverflow.com/questions/21335136/how-to-re-enable-right-click-so-that-i-can-inspect-html-elements-in-chrome

免费评分

参与人数 27吾爱币 +30 热心值 +23 收起 理由
fsunmoon + 1 我很赞同!
seaman12138 + 1 + 1 谢谢@Thanks!
涛之雨 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
echo1021 + 1 + 1 我很赞同!
shen849566357 + 1 + 1 鼓励转贴优秀软件安全工具和文档!
clovera + 1 谢谢@Thanks!
timeni + 1 + 1 用心讨论,共获提升!
车博士汽信系 + 2 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
80679 + 1 + 1 我很赞同!
花园子 + 1 谢谢@Thanks!
w360 + 1 + 1 我很赞同!
li302573596 + 1 热心回复!
笙若 + 1 + 1 谢谢@Thanks!
48627913 + 1 + 1 热心回复!
nanfanghaizi + 1 我很赞同!
elevo + 1 + 1 热心回复!
xifanu + 1 + 1 谢谢@Thanks!
YSJohnson + 1 + 1 谢谢@Thanks!
a12333 + 1 我很赞同!
haoe + 1 谢谢@Thanks!
xlln + 1 + 1 热心回复!
AnneYaos + 1 我很赞同!
mingan2001 + 1 + 1 谢谢@Thanks!
Wolts + 1 + 1 厉害啊,加油继续
威风的黑龙 + 2 + 1 用心讨论,共获提升!
hello6word + 1 谢谢@Thanks!
sohuso + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!

查看全部评分

本帖被以下淘专辑推荐:

  • · 好帖|主题: 372, 订阅: 53

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

 楼主| 天空宫阙 发表于 2022-4-18 11:03
之前用爬虫爬的几百个素材百度网盘地址 链接:https://pan.baidu.com/s/1W2g6tF4BtzySfrPlt0bTJw  提取码:6666

免费评分

参与人数 2吾爱币 +2 热心值 +2 收起 理由
ivyolanda + 1 + 1 谢谢@Thanks!
蓝风徐来 + 1 + 1 鼓励转贴优秀软件安全工具和文档!

查看全部评分

 楼主| 天空宫阙 发表于 2022-4-18 15:07
Hmily 发表于 2022-4-18 14:35
@天空宫阙 本贴无技术分析内容,如果只是单纯脚本我就要删除了,你可以发到经历福利区,或者你追加编辑分析 ...

那您帮我移动到福利区或删除吧,改论文间隙水了一个脚本,技术含量确实不高,24号前没时间增加分析

点评

准备什么时候补充?  详情 回复 发表于 2022-4-27 16:51
时间可以等,但必须要处理。  详情 回复 发表于 2022-4-18 17:23
sohuso 发表于 2022-4-18 10:47
ciker_li 发表于 2022-4-18 10:49
感谢分享,学习学习
xiaoshan2016 发表于 2022-4-18 10:56
虽然用不上,安装了,给你攒一下人气,支持你
shiys8 发表于 2022-4-18 10:58
感谢分享,学习中
Wolts 发表于 2022-4-18 10:59
谢谢分享教程
蓝风徐来 发表于 2022-4-18 11:01
感谢分享
叫我小王叔叔 发表于 2022-4-18 11:03
谢谢分享教程
dork 发表于 2022-4-18 11:06

虽然用不上,支持一下
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2022-6-27 11:10

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表