ChromeがA要素にdownload属性ありの場合にReferrerヘッダーを送らないことへの対処方法
直接リンク等を禁止するためにWebサーバーにてReferrerで制限していると、ChromeではA要素にdownload属性がある際にReferrerヘッダーを送らない不具合がありダウンロードできない。それを回避するJavaScriptは以下の通り。
document.addEventListener('DOMContentLoaded', ()=>
{
let q = 'a[download]';
if (/Google/i.test(navigator.vendor) && document.querySelector(q))
{
function OnClickDownload (e)
{
e.preventDefault();
fetch(e.target.href).then((r)=>
{
if (r.ok)
r.blob().then((b)=>
{
let a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'),
u = (a.href = URL.createObjectURL(b));
a.download = e.target.download;
a.click();
URL.revokeObjectURL(u);
});
});
}
let i, j = document.querySelectorAll(q);
for (i = 0; i < j.length; ++i)
j.item(i).addEventListener('click', OnClickDownload);
}
});この方法では時間のかかるファイルのダウンロードには不向きであるので注意のこと。
Chromeの不具合はバージョン40で発生し、このときはreferrerpolicy="origin"をA要素へ付加することで回避できたが、バージョン65で不具合が一旦解消された後にバージョン67で退行（リグレッション）し、referrerpolicy="origin"での回避もできなくなっている。