JavaScriptの力でユーザーのクリック無しでファイルをダウンロードできるか検証する 📦

f:id:kimizuka:20201030232135p:plain

developer.mozilla.org

aタグに付与することで、クリックした際にファイルをダウンロードできるdownload属性。
非常に便利に使えるので、これまでも、aタグのダウンロード属性をつかった検証は何度か行ってきました。

今回は、クリックなしでダウンロードが可能なのか調査します。

❶ キーイベント編

まずは、キーボードを押下した際にダウンロードができるかを調べます。

DEMO

こちらのDEMOでは「shift + D」で画像をダウンロードするように設定しています。
Chrome、Firefox、Safari、Edgeで確認したところ、無事にダウンロードできました。（FirefoxとSafariでは確認モーダルが表示されました）

※ mobile Safari、Android Chromeは未検証です。

❷ アクセス時に即ダウンロード編

次に、ページにアクセスした際に即ダウンロードをさせることができるかを調べます。
結論を先に書くと、Chrome、Firefox、Safari、mobile Safari、は確認モーダル表示後、ダウンロードできました。（2回目以降はモーダル無し）
Edge、Android Chromeは確認モーダルなしでダウンロードできました。なので、iframeではなくリンクを記載しておきます。

jsfiddle.net

さらには、Firefox、Safariにおいては、❶の検証の際にダウンロードを許可してしまっていたので、モーダル無しでダウンロードできてしまいました。
ドメインに対してパーミッションを与える仕組みだからですね。

割と悪用できてしまう仕様な気がしてなりません。

ソースコード（抜粋）

JavaScript

function downloadImage(url) {
  const name = 'download.png';
  const a = document.createElement('a');

  a.href = url;
  a.download = name;
  a.click();
}

動的にaタグを生成し、マウスクリックをシミュレートすることでダウンロードを実現しています。
引数には画像のURLが渡ってくる想定ですが、DEMOではbase64を渡しています。（jsfiddleにファイルをホスティングできないため）