株式会社クイックのWebサービス開発blog

HAPPYなサービスプランナー・エンジニア・デザイナーのブログです。

Chromeのバージョン65でS3からdownload属性を使った画像のダウンロードができなくなった

Webサービスプランナー兼ディレクターのyumeです。

運営しているサイトの1つに、看護師向けのフリー素材サイトがあるのですが、
Chromeがバージョンアップしたらダウンロードボタンでダウンロードできなくなった」と問い合わせがありました。

f:id:aimstogeek:20180318164418p:plain 看護師🎨イラスト集の素材ダウンロードページ。関係ないけど、この画像花粉症にも使えますね。 今年の花粉やばいです。

現象

HTML5のaタグのdownload属性を使って実装しています。

<a href="https://img.kango-roo.com/upload/images/ki/cold-influenza-cough-mask-female.png" download="cold-influenza-cough-mask-female.png" class="dlBtn ieDlBtn" data-file-name="cold-influenza-cough-mask-female.png">
<img src="/pc/img/ki/common/btn/download.png" alt="無料 ダウンロード">
</a>

ダウンロードさせる画像は、S3に置いてあります。

これまでは、「無料ダウンロード」ボタンを押すと、画像ファイルのダウンロードが始まっていたのですが、
Chromeが65になると、ダウンロードできずにブラウザ内で画像を表示してしまうようになりました。

対処法

結論、S3上の画像ファイルのContent-typeをbinary/octet-streamに変更することで解決しました。

Content-typeはこれまでimage/pngになっていて、それで問題なくダウンロードをさせることができていたのですが、Chrome65では扱いが変わったようです。

AWSGUIコンソールから変更する場合

メタデータの変更」からポチポチやっていきます。 f:id:aimstogeek:20180319091650p:plainf:id:aimstogeek:20180319091654p:plain

CUIで一括変更する場合

Content-typeのみの変更はできないようです。

下記記事では、一度ファイル名を変更して戻す、というやり方が紹介されていましたが、データ量の問題か時間がかかったりしてうまく適用できませんでした。。

AWS S3にアップロードしたファイルのContent-Typeを一括で書き換えるワンライナー - Qiita

そこで、一度S3上でバックアップ用のバケットを作成し、コピーする形で書き換えました。

aws s3 cp --profile <account-name> s3://<bucket_name_for_backup>/<directory> \
--profile <account-name> s3://<bucket_name_for_production>/<directory> \
--metadata-directive REPLACE --Content-Type=binary/octet-stream --delete

--metadata-directive REPLACEをつけるのがポイントです。

問題

今後新規でアップする画像について、サムネイル画像はimage/pngで、ダウンロード画像はbinary/octet-streamにする方法を模索中です。

都度手動でやるのは…うーん。

参考

S3のContent-Dispositionのブラウザ対応について調査してみた - Innovator Japan Engineers’ Blog 「注意点」の項に助けられました

おわりに

意味が分からなすぎてあたふたしていたら、いろんなメンバーが助けてくれました…

1つの問題を協力して解決できるってほんとありがたいです( ;∀;)

ということで、

\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp