photo_2022-11-27_01-40-45.jpg

I. 前言

Google search csp.png

谷歌浏览器:如何查看网站是否开启CSP?

Why CSP

还记得吗?今年年初“毒奶去广告计划”增加了对屏蔽内容农场的支持,当时我们使用的方法仍是通过 Surge/QuantumultX 中间人攻击(MIMT),在网站返回内容到达浏览器前完成JavaScript/CSS文件的嵌入(修改响应头/响应体),最终达到去广告、屏蔽内容农场的效果。

2022年年中(或许是10月后),谷歌搜索开启内容安全策略(CSP),使得屏蔽内容农场失效,故作此文,以便说明Surge/QuantumultX(Loon等亦可)所可以做到的方方面面,不愧是真正的网络开发与调试工具

Surge 模块 Adblock4limbo.sgmodule 配置内容如下:

内容农场(google) = type=http-response,pattern="https?:\/\/(www\.google)(\.\w{2,4}){1,2}\/(search\?|\?sa=|\?FORM)(?!.*?(apps=))",requires-body=1,max-size=0,script-path=https://limbopro.com/Adguard/Adblock4limbo.js,script-update-interval=0

Adblock4limbo.sgmodule 包含如下几个部分:
模块名:内容农场(google);
类型:http-response;
匹配请求的正则表达式

https?:\/\/(www\.google)(\.\w{2,4}){1,2}\/(search\?|\?sa=|\?FORM)(?!.*?(apps=))

是否需要修改响应体:requires-body=1;
脚本位置https://limbopro.com/Adguard/Adblock4limbo.js

在示例中:Adblock4limbo.js 有什么用?对响应体/响应头进行一些列操作,如替换/删减/增加内容等等(遵循 JS ES6 语法);

Adblock4limbo.js 代码内容如下,较1月份的版本,我们新增了修改响应头(即response.headers)的操作:

let reg = '<head>';
let str = '<head>\
    <link rel="stylesheet" href="https://limbopro.com/CSS/Adblock4limbo.user.css" type="text/css" />\
    <script type="text/javascript" async="async" src="https://limbopro.com/Adguard/Adblock4limbo.user.js"></script>'
let body = $response.body.replace(reg, str);
let headers = $response.headers;
headers['Content-Security-Policy'] = '';
$done({ headers, body })

Adblock4limbo.js 遵循 Surge 使用手册 - 脚本 - HTTP 响应 部分书写;(注意样例使用了 JS ES6 语法。)

通过 Surge/QuanmultX 提供的方法,我们完成了 response.body(响应体)、response.headers(响应头)的修改、替换、删减、增加内容等操作;

$done({ headers, body })

浏览器工作流程.png

即在系列修改/删减/替换后,将最终得到的内容(在这里指的是HTML文件)释放给用户端:浏览器,此时浏览器没有看到“响应头”(Response header)上有CSP数值,则不会对子资源加载进行限制,这时候我们嵌入的脚本和CSS文件则可以得到执行(生效);

参阅:浏览器工作原理

II. 内容安全策略 ( CSP )

内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS (en-US)) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件,这些攻击都是主要的手段。 Via MDN

配置内容安全策略涉及到添加 Content-Security-Policy HTTP 头部到一个页面,并配置相应的值,以控制用户代理(浏览器等)可以为该页面获取哪些资源。比如一个可以上传文件和显示图片页面,应该允许图片来自任何地方,但限制表单的 action 属性只可以赋值为指定的端点。一个经过恰当设计的内容安全策略应该可以有效的保护页面免受跨站脚本攻击。本文阐述如何恰当的构造这样的头部,并提供了一些例子。

III. 利用Surge/QuantumultX 修改“响应头”

JavaScript 代码如下:

let headers = $response.headers;
headers['Content-Security-Policy'] = '';
$done({ headers })

参阅: Surge - 使用手册,QuantumultX 同 Surge;

IV. 参考使用手册(完整)

1.Surge - 使用手册
2.Quantumult X 官方Github

Quantumult X 作为后来者,大多数功能实现同 Surge(一定程度上 Surge 上能用的模块,重写,分流,稍微改一改就能在 Quantumult X 上使用);

响应体是什么?

HTTP Response 响应体.png

Surge 使用手册

应执行 $done 返回一个对象,可选包含三个字段:
body<String>:使用该 body 覆盖原来的响应 body,仅当 requires-body=true 时有效
headers<Object>:使用该 headers 词典完全覆盖原来的 headers,注意部分 HTTP 特殊字段不可被修改,如 Content-Length
status<Number>:覆盖原来的 HTTP 状态码
使用 $done(); 表示终止该请求;使用 $done({}); 表示不对该请求进行修改。

如下,执行对 response.headers 的覆盖;

let headers = $response.headers;
headers['X-Modified-By'] = 'Surge';

$done({headers});

使用 $done(); 表示终止该请求;使用 $done({}); 表示不对该请求进行修改。

Surge 使用手册

最后修改:2022 年 11 月 29 日 11 : 00 AM