Manifest V3扩展如何为网络请求添加Referer请求头?
问题解答
一、是否可以添加Referer请求头?
可以,Chrome扩展的declarativeNetRequest API支持修改包括Referer在内的请求头,只要规则配置正确即可生效。
二、正确的配置方法
你的代码存在几个关键错误,导致规则未生效:
- 头名称错误:你设置的是自定义的
New-Referer,但需要修改的是标准HTTP请求头Referer - Referer值格式非法:
https://example.com/*不是合法的Referer值,Referer必须是具体的完整URL(如https://example.com/),不能包含通配符 - 资源类型匹配不全:仅匹配
sub_frame类型会漏掉iframe内发起的其他请求(如脚本、图片、接口请求),需要根据实际请求类型补充 - 缺少主机权限:
declarativeNetRequestWithHostAccess权限需要配合host_permissions声明目标域名,否则规则无法作用于对应请求
修正后的manifest.json配置
{ "permissions": ["scripting", "activeTab", "contextMenus", "storage", "tabs", "declarativeNetRequestWithHostAccess", "declarativeNetRequestFeedback"], "host_permissions": ["https://example.com/*"] }
修正后的Service Worker代码
async function addRefererToRequestHeader() { const ruleId = Math.floor(Math.random() * 1000000); const rules = [{ id: ruleId, action: { type: 'modifyHeaders', requestHeaders: [ { header: 'Referer', operation: 'set', value: 'https://example.com/', // 替换为实际需要的合法Referer地址 }, ], }, condition: { // 根据实际请求类型调整,覆盖iframe内可能发起的所有请求类型 resourceTypes: ['sub_frame', 'script', 'image', 'xmlhttprequest', 'other'], urlFilter: 'https://example.com/*', }, }]; try { await browser.declarativeNetRequest.updateDynamicRules({ removeRuleIds: [], addRules: rules, }); console.log('规则添加成功'); } catch (error) { console.error('添加规则失败:', error); } }
如果需要动态使用当前页面URL作为Referer,可以通过标签页API获取后再设置:
async function addDynamicReferer() { const [activeTab] = await browser.tabs.query({active: true, currentWindow: true}); const targetReferer = activeTab.url; // 复用上述规则结构,将value替换为targetReferer即可 }
三、安全隐患
- 防盗链策略规避:伪造Referer可能绕过目标网站的防盗链机制,导致你的扩展被网站封禁,甚至触发合规风险
- 隐私泄露风险:如果设置的Referer包含用户敏感页面信息(如带个人参数的URL),会将用户隐私数据传递给第三方网站
- 破坏浏览器安全机制:浏览器原生对跨域Referer有严格的截断策略(仅发送源部分),强制设置完整Referer会破坏该安全机制,增加用户被追踪的概率
- 扩展审核风险:Chrome Web Store对修改请求头的扩展审核严格,不当的Referer伪造规则可能被判定为恶意行为,导致扩展无法上架或被下架
内容的提问来源于stack exchange,提问作者Sam
相关产品推荐
相关产品推荐

