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 # 翻译当前页面
执行方式
- 长按底部工具栏的 JS 按钮
- 弹出菜单列出 bookmarklet/ 目录下的所有脚本
- 选中一个脚本,uWeb 会尝试在不违反 CSP 的环境中执行它
不违反 CSP 的原理
普通浏览器执行小书签时,本质上是把代码注入当前页面的全局作用域,受页面 CSP 约束。uWeb 会把 bookmarklet 脚本放在一个独立的执行环境里,与页面隔离,从而不受页面 CSP 规则限制。
小书签网站自动导入
uWeb 还有一个便利功能:直接把小书签网站加入书签,不用手动复制 JS 代码。
具体做法:
- 找到一个提供小书签按钮的网站(如 supermark.html 之类的小书签聚合站)
- 在普通浏览器里访问该网站,按它的提示"把按钮拖到书签栏"
- 在 uWeb 里打开这些小书签网站,长按链接执行
- uWeb 会自动把小书签代码导入 bookmarklet/ 目录
CSP 网站的小书签执行
对于设置了严格 CSP(如 GitHub、维基百科)的网站,小书签在普通浏览器里几乎无法工作。在 uWeb 里:
- 把小书签对应的 JS 文件放入 bookmarklet/
- 在 CSP 网站页面上长按 JS 按钮
- 选中脚本执行
- 即使页面设置了
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'));
})();