ブラウザでの画像保存時にファイル種類が正しく表示されない問題 – Accel-Mart Plus support

質問

⚠️ この事例は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

🕓 事例公開日 : 2024-10-08

【背景】

画面上の画像リンクをクリックして別タブで画像を表示し、右クリックから「名前を付けて画像を保存」で画像をダウンロードしたい。別タブでの画像表示は正常に動作しているが、保存時にファイルの種類が「すべてのファイル」と表示され、JPEG Image等の適切なファイル種類が選択できない状態になっている。

Q1.

レスポンスヘッダのCache-Controlに「no-store」が設定されているため画像保存ができないと考え、setHeaderメソッドでCache-Controlを上書きしようとしたが効果がない。Webサーバの設定がsetHeaderメソッドによるヘッダ上書きに影響を与える可能性があるか教えてください。

回答

A1.

Cache-Controlヘッダのno-storeは、あらゆる種類のキャッシュがレスポンスを保存しないよう指示する値であり、ブラウザでの「名前を付けて画像を保存」時にファイル種類が「すべてのファイル」になる事象の直接的な原因ではないと考えられます。

参考：https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

解決方法

ブラウザでの画像保存時の動作は、Content-Dispositionヘッダによって制御されることが多く、多くのブラウザはこのヘッダのfilename引数の値を使用します。

以下のサンプルコードのように、Content-Dispositionヘッダを設定することで問題を解決できます：

function setImageFile(request) {var response = Web.getHTTPResponse();response.setContentType("image/jpeg");
var fileName = "sample_image.jpg";
var fileNameUTF8 = encodeURIComponent(fileName);
response.addHeader(
"Content-Disposition",
'inline; filename="' + fileNameUTF8 + '"'
);
var storage = new PublicStorage("sample.jpg");

response.sendMessageBodyAsBinary(storage);
}

この設定により、右クリック→「名前を付けて画像を保存」時に以下のように正しく表示されます：

・ファイル名：指定したファイル名
・ファイルの種類：JPEG Image (*.jpg)

動作確認はChrome バージョン 128.0.6613.138で行っており、Cache-Control: private, no-store, no-cache, must-revalidateが設定された状態でも正常に画像保存が可能でした。