uWeb 中文文档 下载 App

bookmarklet 小书签——临时脚本与 CSP 绕过

什么是小书签

小书签(Bookmarklet)是把一段 JavaScript 代码保存为书签的 URL,在书签 URL 里用 javascript: 开头。点击这个书签时,浏览器会执行这段代码。

普通浏览器里的限制

小书签在现代浏览器里遇到一个越来越严重的问题:CSP(内容安全策略)。很多网站设置了严格的 CSP 规则,禁止内联脚本执行,导致小书签点击后什么都不发生。

uWeb 原生支持小书签,而且可以自动绕过 CSP 限制——这是它相比普通浏览器的一个重要优势。

uWeb 的 bookmarklet/ 目录

把小书签的 JS 文件放在配置目录的 bookmarklet/ 下,就可以从长按 JS 按钮的菜单里执行。

bookmarklet/
├── remove-ad.js        # 移除广告元素
├── auto-scroll.js      # 自动滚动到页面底部
├── download-all.js     # 下载页面所有图片
└── translate-page.js   # 翻译当前页面

执行方式

  1. 长按底部工具栏的 JS 按钮
  2. 弹出菜单列出 bookmarklet/ 目录下的所有脚本
  3. 选中一个脚本,uWeb 会尝试在不违反 CSP 的环境中执行它

不违反 CSP 的原理

普通浏览器执行小书签时,本质上是把代码注入当前页面的全局作用域,受页面 CSP 约束。uWeb 会把 bookmarklet 脚本放在一个独立的执行环境里,与页面隔离,从而不受页面 CSP 规则限制。

小书签网站自动导入

uWeb 还有一个便利功能:直接把小书签网站加入书签,不用手动复制 JS 代码。

具体做法:

  1. 找到一个提供小书签按钮的网站(如 supermark.html 之类的小书签聚合站)
  2. 在普通浏览器里访问该网站,按它的提示"把按钮拖到书签栏"
  3. 在 uWeb 里打开这些小书签网站,长按链接执行
  4. uWeb 会自动把小书签代码导入 bookmarklet/ 目录

CSP 网站的小书签执行

对于设置了严格 CSP(如 GitHub、维基百科)的网站,小书签在普通浏览器里几乎无法工作。在 uWeb 里:

  1. 把小书签对应的 JS 文件放入 bookmarklet/
  2. 在 CSP 网站页面上长按 JS 按钮
  3. 选中脚本执行
  4. 即使页面设置了 script-src 'self' 甚至 script-src 'none',脚本也能正常执行

自动应用于同类网址

bookmarklet 执行后,如果你勾选了相应选项,uWeb 可以让它自动作用于同类网址——这就是脚本激活模式的一种入口。

详见 脚本激活。

示例 bookmarklet 脚本

移除所有图片(省流量浏览)

// bookmarklet/no-images.js
(function() {
    document.querySelectorAll('img').forEach(img => {
        img.style.display = 'none';
    });
})();

展开折叠的评论

// bookmarklet/expand-comments.js
(function() {
    var buttons = document.querySelectorAll('[class*="expand"], [class*="more"], [aria-expanded="false"]');
    buttons.forEach(function(btn) { btn.click(); });
})();

查看页面所有外链 JS

// bookmarklet/list-external-js.js
(function() {
    var scripts = document.querySelectorAll('script[src]');
    var urls = Array.from(scripts).map(s => s.src).filter(src => {
        return !src.includes(location.hostname);
    });
    alert('外链 JS 列表:\n' + urls.join('\n'));
})();

下一章