单击图像时,如何发送 "origin" 作为 favicon.ico 文件的引荐来源网址?
How do I send "origin" as the referrer for the favicon.ico file when clicking on an image?
我有一个简单的图片预览,点击后会显示全尺寸图片:
<html>
<head>
<meta name="referrer" content="origin">
</head>
<body>
<a href="/myimage.jpg">
<img src="/myimage.jpg" title="my image" border="0" />
</a>
</body>
</html>
问题:浏览器除了请求图片外,还会请求favicon.ico。图像的请求 headers 是:Referer: https://example.com/
(如预期)。但是,对于 favicon.ico 文件的请求,此 header 是引用页面的完整 url:Referer: https://example.com/where-I-was
.
如何将 favicon.ico 请求的 Referer header 设置为简单的来源?我不希望它在我的 nginx 日志中显示完整的 url。谢谢!
选项 1
在 link 标签上使用 referrerpolicy
HTML 属性 - see docs on MDN.
<a href="/myimage.jpg" referrerpolicy="origin">
选项 2
使用webRequest
API重写Referer header - see the MDN page on it here. Simply set the header to whatever you want it to be - seems like you might be interested in the window.location object.
示例代码 - 修改自 MDN page:
var targetURL = "http://example.com/favicon.ico";
var protocol = window.location.protocol;
var hostname = window.location.hostname;
var port = window.location.port;
var origin = protocol + '//' + hostname + (port ? ':' + port : '');
function rewriteUserAgentHeader(e) {
e.requestHeaders.forEach(function(header){
if (header.name.toLowerCase() == "referer") {
header.value = origin;
}
});
return {requestHeaders: e.requestHeaders};
}
browser.webRequest.onBeforeSendHeaders.addListener(
rewriteUserAgentHeader,
{urls: [targetURL]},
["blocking", "requestHeaders"]
);
我有一个简单的图片预览,点击后会显示全尺寸图片:
<html>
<head>
<meta name="referrer" content="origin">
</head>
<body>
<a href="/myimage.jpg">
<img src="/myimage.jpg" title="my image" border="0" />
</a>
</body>
</html>
问题:浏览器除了请求图片外,还会请求favicon.ico。图像的请求 headers 是:Referer: https://example.com/
(如预期)。但是,对于 favicon.ico 文件的请求,此 header 是引用页面的完整 url:Referer: https://example.com/where-I-was
.
如何将 favicon.ico 请求的 Referer header 设置为简单的来源?我不希望它在我的 nginx 日志中显示完整的 url。谢谢!
选项 1
在 link 标签上使用 referrerpolicy
HTML 属性 - see docs on MDN.
<a href="/myimage.jpg" referrerpolicy="origin">
选项 2
使用webRequest
API重写Referer header - see the MDN page on it here. Simply set the header to whatever you want it to be - seems like you might be interested in the window.location object.
示例代码 - 修改自 MDN page:
var targetURL = "http://example.com/favicon.ico";
var protocol = window.location.protocol;
var hostname = window.location.hostname;
var port = window.location.port;
var origin = protocol + '//' + hostname + (port ? ':' + port : '');
function rewriteUserAgentHeader(e) {
e.requestHeaders.forEach(function(header){
if (header.name.toLowerCase() == "referer") {
header.value = origin;
}
});
return {requestHeaders: e.requestHeaders};
}
browser.webRequest.onBeforeSendHeaders.addListener(
rewriteUserAgentHeader,
{urls: [targetURL]},
["blocking", "requestHeaders"]
);