はじめに
業務システムで CSV ダウンロードはよくある機能ですが、先日 Windows 端末でブラウザから CSV をダウンロードする際、毎回ポップアップがブロックされる問題に遭遇しました。
「許可すれば動くけど、毎回操作するのは面倒…」
そんなちょっとした UX の課題を、コード修正だけでスマートに解決できたので、過去の対応と比較しながらまとめます。
事象と背景
- 使用言語：react
- CSV ダウンロード処理で
window.open()を使ってpre-signed URL を開いていた。 - Chrome / Edge ではポップアップブロッカーが作動し、以下のような通知が表示される。
許可すれば動きますが、毎回「ブロック解除」するのは正直ちょっと面倒ですよね。しかも、社内システムのように多くの人が使う環境だと、PCごとに一度はこの問題に引っかかるので、結果的にユーザー体験がかなり悪くなってしまいます
原因
window.open() は非同期処理後の呼び出しや、ユーザー操作から 間接的に実行される場合にポップアップとしてブロックされます。
解決方法：アンカー要素でダウンロード
window.open() をやめて、アンカー要素を動的生成してクリックする方式に変更しました。
修正前
window.open(data.presigned_url, "_blank", "noopener,noreferrer");
修正後
downloadUsingAnchor(data.presigned_url);
//downloadUsingAnchor関数の実装
export const downloadUsingAnchor = (downloadUrl) => {
const a = document.createElement("a");
a.href = downloadUrl;
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
};
この変更により、ポップアップ扱いにならず、ダウンロードが自動開始されます。
ユーザー操作なしで安定して取得できるようになりました。
過去の対応：レジストリ変更＋ポリシー配布
以前、似た事象では Windows のレジストリを変更してポップアップ許可リストを設定し、グループポリシーで全端末に配布するという方法を取りました。
当時のフロー
- レジストリキーを編集して対象ドメインを許可
- グループポリシーで設定を配布
- 適用確認とロールバック手順の準備
課題
- 運用負荷が大きい：IT 部門で端末管理が必須
- セキュリティリスク：許可リストの管理が煩雑
- スピード感がない：即時対応が難しく、ユーザー影響が長引く
比較表
| 項目 | 過去対応（レジストリ＋ポリシー） | 今回対応（コード修正） |
|---|---|---|
| 運用負荷 | 高い（IT 部門依存） | 低い（開発者のみ） |
| セキュリティ | 許可リスト管理が必要 | 影響なし |
| スピード | 数日〜数週間 | 即日対応 |
| ユーザー影響 | 長引く | ほぼゼロ |
Tips
- ポップアップブロック回避には
window.open()を避ける - アンカー要素を動的生成 → click() が安全で確実
- OS やブラウザ設定変更は最終手段
まとめ
今回の対応を通じて、技術的な問題は往々にしてコードレベルで解決できることを実感しました。
今回の学び
1. ポップアップブロックの本質を理解する
- ブラウザは「ユーザーの意図しない動作」を防ぐために厳格な判定をしている
window.open()は文字通り「新しいウィンドウを開く」ため、当然ブロック対象- アンカー要素のクリックは「通常のリンク遷移」扱いで安全
2. インフラ・設定変更は最終手段
- レジストリ変更やグループポリシーは運用負荷が高い
- セキュリティリスクも伴う（許可リストの範囲が広がる）
- まずはコードで解決できないか検討すべき
3. UX 改善はエンジニアリングの腕の見せどころ
- 「許可すれば動く」≠「良い UX」
- ユーザーに余計な操作を強いるのは設計の敗北
- 小さな改善の積み重ねが、システム全体の使いやすさに直結する
「ポップアップブロックが鬱陶しい…」という声が出る前に、アンカー方式での実装を検討するのがおすすめです。
ただし、本当に新規タブで別ページを開く必要がある場合（外部サービスへの遷移など）は、window.open()を使用するようにしましょう
もし同じような課題に直面している方がいれば、ぜひこの方法を試してみてください！
簡単30秒