JavaScriptでcsvを読み込む

Question

Chromeブラウザ環境で、JavaScriptで同じディレクトリ内のcsvファイルをXMLHttpRequest()を通じて読み込む場合、ブラウザのセキュリティ上の問題でCORSエラーが発生して、読み込むことができないところまで理解しております。確かに勝手にクライアントサイドのファイルを読み込む仕様なんて、一般的には危険なことではありますね、ということはなんとなく理解しています。

1. 一方で、input type="file"などでユーザーの意図でアップロードすることは当然できることはわかっているのですが、今回は静的にディレクトリ内のcsvファイルを読み込みに行きたいという条件で考えております。

2. 加えて、初めからJSONファイルに変換しておいて、読み込むような選択肢も出てくるとおもいますが、ここではcsv形式のままでという前提とさせてください。

3. また、ブラウザの設定やChromeの拡張でweb server chromeのようなものでローカルホスティング環境を構築してheaderを操作して読み込むということも除外となります。

*これらの前提を置いているのは、社内の一般ユーザーが利用するフロントサイドのみのブラウザアプリケーションを構築しており、これらの条件を加えるとユーザー側での理解や設定が求められてしまうため、ユーザーからしたら「定のディレクトリにcsvファイルさえ格納すれば読み込むんだ」という条件で実装したいと考えている次第です。

以上の条件を踏まえて、JavaScriptそのものやライブラリを利用して、なんとか同一ディレクトリ内のcsvを読み込む術はないものでしょうか？

アドバイスのほど、よろしくお願い申し上げます。

Comments

[退会済みユーザー]

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

[mako_0221]

お待たせをして、誠に申し訳ございません。
もちろん存じ上げております。こちらの都合で少しお待たせをしておりましたが。
これから、皆様にお詫びとともにご返信を差し上げるつもりです。
よろしくお願い申し上げます。

Answer 1

同一ディレクトリ内のcsvを読み込む術はないものでしょうか？

<input type=file> で指定してもらうか showOpenFilePicker() で指定してもらう以外の方法は現状ないと思います。

ディレクトリにcsvファイルさえ格納すれば読み込むんだ」という条件

社内の共有ストレージにCSVファイルを置いてもらって、そこをウェブサーバで公開するのはどうでしょうか。

Comments

[mako_0221]

コメントありがとうございます。ご返信遅くなり申し訳ございません。
上述も致しましたが、簡単なブラウザAPPで複数社にまたがっているため、共有ストレージがない状態です。しかしながら、やはり根本的にセキュリティ上許容されないアプローチ（開発者側でユーザー側のファイルを強制的に読み込むような行為と言えばいいのでしょうか）ということはよくわかりました。

Window.showOpenFilePicker()はdocsを読み始めたのですが、すぐに自身の条件で利用可能か判断できなかったのですが、可能性がありそうに感じたので、もっと調べて検討してみようと思います。
良い解決策になり得た場合には、こちらに追記させていただきます。

Answer 2

「特定のディレクトリにcsvファイルを格納すれば」
の解釈次第でしょうね。httpサーバー上にsmbやnfsでアクセスできる共有ディレクトリがあれば
自身のPCからはローカルにファイルを置く感覚でサーバーにアップすることも可能でしょう

Comments

[mako_0221]

ありがとうございます。ご返信遅くなり誠に申し訳ございません。
さて、会社グループ全体で利用してみようかなという類のブラウザアプリで、会社間を跨いでの共通にアクセスできるディレクトリはないのです。利用したい人は、フォルダごと差し上げますね方式故、難しそうでございます。

Answer 3

読み込む術はありません

Comments

[mako_0221]

遅くなり申し訳ございません。ありがとうございます。
単純にlinkタグのrefやscriptタグのsrcのように読み込むことはできないかと安易に考えておりました。

Answer 4

一方で、input type="file"などでユーザーの意図でアップロードすることは当然できることはわかっているのですが、今回は静的にディレクトリ内のcsvファイルを読み込みに行きたいという条件で考えております。

ブラウザを動かしている PC にあるファイルを FILE API を使わずに、ユーザーの操作は一切なしで JavaScript で読み込みたいという話と理解してますが、そういうことはできません。

（そんなことができたら、悪意のある攻撃者とかが他人の PC にあるファイルを勝手に開いて情報を取得するということができ、セキュリティ的に大問題ということは理解できますか？）

社内の一般ユーザーが利用するフロントサイドのみのブラウザアプリケーションを構築しており

そこから考え直して、普通のデスクトップアプリ を使ってはいかがですか？ 例えば 以下のような .NET Framework の Windows Forms アプリ。

CSV ファイルを DataGridView に表示
http://surferonwww.info/BlogEngine/post/2020/09/11/show-date-in-csv-file-on-datagridview.aspx

Comments

[mako_0221]

ありがとうございます。そして返信が遅くなり誠に申し訳ございません。
はい、セキュリティ上の問題は十分に承知をしております。
一方で、同じプロジェクト内のlinkタグのrefやscriptタグのsrcをHTMLは読み込みに行くがそのような形で安全なものとして取り扱う術はないのだろうかと考えておりました。（もちろん、いくら調べてもそのような記事が見つからないので、藁をもすがる思いでという投稿でございました）

Windows Forms アプリはなんとなく普段VScodeを使っているのでC系の言語を使えば書けたり作れたりする認識はあったのですが、まだ自分の実力ではハードルが高すぎると思っていました。一方で社内のちょっとした便利APPはブラウザAPPとしてHTML＋CSS＋Javascriptで提供していて限界が出てきたので、より汎用性が高いものができそうなので検討しても良いかなと感じました。

Answer 5

あくまで「Webサーバ内（アプリケーションが動いているのと同じサーバ内）」であればFILE APIが利用可能だと思います。
※構造や構成次第にはなってきますので、検討・検証は行ってください

Comments

[mako_0221]

コメントありがとうございます。返信が遅くなり誠に申し訳ございません。
現状Webサーバー内ではないため、利用ができなそうです。

[m.ts10806]

語弊があり申し訳なかったのですが、ブラウザからアクセスできる場所に置いてあるのであれば・と置き換えてください。

[mako_0221]

むむ、それは予想外のことでした。とすれば、重要な解決方法になり得そうです。できてしまうことが一般的なセキュリティ上の問題(今回は社内利用だけで、私に悪意がなければ問題となりませんが)としてなぜクリアされるのかについても併せて考えてみようと思います。また、アイコンが変わりましたねと思ったのですが、やはり対象の動物は一緒なのですね♪

[m.ts10806]

JavaScriptの機能なのでブラウザからアクセス可能な場所に置いてあることは大前提になります。
基本は「Webサーバ内の」としたのは「アプリケーションが動いているのと同じサーバ内」という意図でした。一応回答修正しておきます。
（FILE APIについては探せば参考記事は沢山出てきます）

[mako_0221]

承知をいたしました。コメントをいただきありがとうございます。