1
5
テーマ・知りたいこと
ブラウザ上で動作するJavaScriptと、別の何かを組み合わせて、ローカルファイルの読み書きを可能にする方法をご提案いただきたいです。
背景
HTML、CSS、JavaScriptを用いて開発した、ブラウザ上で動作するアプリケーションから、HTMLと同じフォルダに配置したローカルファイル(テキスト、バイナリ問わず)を操作したいです。アプリケーションは自宅PCでのみ使用し、サーバーへのアップロードや、PCをWebサーバー化することなどは想定していません。
実際にローカルファイルに触るのはC#で開発したexeやdllになると思われますが、JavaScript上では、下記のような形で利用できることを理想とします。
js
1let str = await readTextFile("test.txt"); //読み込み 2await writeTextFile("test.txt", str); //書き込み
読み込みだけなら--allow-file-access-from-filesの起動オプションで起動したChromeでXMLHttpRequestやfetchが利用できることは知っています。
これまでに検討したことや、すでにやったことがあることを列挙します。
C#で作成したCOMをActiveXObjectで利用する
IE限定。Chrome等のブラウザでは当たり前のように利用できるオブジェクトやメソッド、CSSのプロパティが利用できない。ブラウザで読み込んだときに一度だけ警告ダイアログが表示される。
Chrome ExtensionとNative messagingの組み合わせ
C#で作成したexeとNative messagingを通じてやりとりする。
exeからChrome Extensionへの通信には1MBという制限がある(逆は4GB)。
chrome.fileSystem
Chrome App限定。
File System Access API
一度ファイル選択ダイアログで、操作するファイルを選択する必要がある。
WebSocket API
WebSocketサーバーとして動作するexeを作成し、JavaScriptのWebSocket APIでexeと通信する。JavaScriptから発行されたコマンドをWebSocket APIを通じてexeに送信し、exeがローカルファイルを作成する。
除外
「ブラウザ上で動作するJavaScript」であるため、
- Electronでexe化する
- C#で開発するアプリケーションにWebViewを配置し、その中のJavaScriptからC#のクラスやメソッドに触れる(いわゆるハイブリッドアプリケーション)
は方法として除外します。また、
- PCをApacheなどでWebサーバー化し、PHPなどを通じてローカルファイルの読み書きを行う
ことも除外します。
上記以外で方法があればご教授ください。
よろしくお願いします。
回答28件
#1
総合スコア943
投稿2023/10/04 13:53
アプリケーションは自宅PCでのみ使用し、サーバーへのアップロードや、PCをWebサーバー化することなどは想定していません。
これはなぜでしょう？サーバーにすればいいのでは？127.0.0.1でlistenすればいいだけな気がします。
またC#が使えるなら.NETのアプリを作ればいいのでは？
#2
#1
過去にApache前提で、POSTメソッドで相対パスを指定し、ファイルの中身をそのままレスポンスするPHPにXMLHttpRequestでアクセスして取得する手法はやったことがあります。
サーバーにすればいいのでは？127.0.0.1でlistenすればいいだけ
C#が使えるなら.NETのアプリを作ればいい
これに対しては、個人の趣向と捉えてください。技術的に、
- なるべく大がかりなものを避け
- 見かけとしては、あたかもJavaScriptだけでローカルファイルにアクセスしているように見える
という方法に、どのようなものがあるのか興味があるのです。
#4
ブラウザからローカルの環境が見えること自体がセキュリティ的に危険
それはそうでしょうね。だからこそ<input type="file">で取得できるパスがC:/fakepathになったのでしょうし、昔は<img src="A:/">でFDDを攻撃することもできるくらいでしたね。
自宅PCでのみ使用と言ってるのに、何の興味があるのでしょうか？
悪いことをするのではないかと疑われているようですが、単純に個人の技術的な興味としか言いようがないです。強いて言えば、昔ActiveXObject("Scripting.FileSystemObject")とかActiveXObject("Microsoft.XMLDOM")で、ブラウザ上で動作する、ローカルファイルの読み書きも可能なアプリケーションを作れたのが個人的に楽しかったので、代替技術がないものかと思って、皆さんのアイデアを募ることにしました。
#8
総合スコア145184
投稿2023/10/05 01:04
あくまでアイデアでしかありませんが、「ブラウザに拡張機能を仕掛ける」という手段についてはどのようにお考えでしょうか？
#9
#8
ご意見ありがとうございます。
「Chrome ExtensionとNative messagingの組み合わせ」という形で現在挑戦中です。Chromeの拡張機能にはNative messagingという、事前に登録しておいたexeと通信できる仕組みがあるため、file:///で始まるHTMLの場合にのみ実行されるようmanifest.jsonで設定し、色々テストしているところです。
ただし、exeから拡張機能への通信は1MBという上限があるため、それを乗り越える方法が課題です。1MBずつに区切って拡張機能へ転送し、拡張機能内のJavaScriptでマージして復元する方法を考えていますが、手間なので出来れば避けたいところです。
ローカルファイルの書き込みに留まらず、任意のURLを指定してHTMLをダウンロードできるような機能も実装できたら面白そうなので、1MBの制約は楽に乗り越えたいところです。
#10
総合スコア5
投稿2023/10/20 14:38
編集2023/10/20 14:39#11
総合スコア943
投稿2023/10/20 14:49
編集2023/10/21 12:00質問主の方が詳細に背景情報を説明しているにも関わらず
残念ながら動機が不明で、聞いても知りたいからという回答しかないんですよ。
例えば不正アクセスの手段を教えて欲しいという人に正当な動機の確認もせずに詳細の説明をしてしまうと、悪用するキッズが増えてしまうでしょう。出来るだけ限定した情報にしないといけないのに、動機すら説明できないとなると、性悪説に立たざるを得ません。
質問場所を変えたほうが良いかもしれませんね。
同意見です。
どこにも攻撃的な部分がないので修正のしようがありません。コメントにて具体的に引用して指摘してください。
#12
ご意見ありがとうございます。
このような質問をしようと思った経緯をもう少し詳しく書こうかと思います。
これまでの経緯
とあるゲームの対戦記録(結果の記録は手入力)を管理するツールをHTML、CSS、JavaScriptで作成してきました。
IE11を起動すると勝手にEdgeが起動するようになるまでは、自作のCOMオブジェクト(regasmで事前に登録済み。System.IO.File.WriteAllTextやnew WebClient().DownloadStringを呼び出すだけのDLL)をnew ActiveXObject("...")を利用することによって、ブラウザ上のJavaScriptでローカルファイルの読み書きをしたり、オリジンを気にせずにHTMLを文字列として取得してきました。
しかし、いつまでもIE11を使い続けるわけにもいきません。そこでブラウザ上のJavaScriptでローカルファイルの読み書きを可能にする方法を模索しようと考えました。
なぜHTML？ なぜローカルファイル？
別に、WebViewを埋め込んだハイブリッドアプリや、Electronでいいだろうとお感じになると思います。
そうしない理由としては、コンパイルが不要で、VSCodeなどでHTMLやJavaScriptを書き換えれば、簡単に機能の追加、削除などが出来るからです。
また、C#(WPF使用)のexeより、ブラウザで読み込むだけでいいHTMLの方が起動も圧倒的に速いです。
そして、ローカルファイルにこだわる理由は、ローカルファイルに書き込めば消える心配が無いからです。
COMオブジェクトを使わず、似た使用感のHTML製アプリケーションにすべく、過去にはIndexedDBやlocalStorageを使い、インポートに<input type="file">、エクスポートにBlobとa要素のdownload属性、clickメソッドを使用していたこともあります。
しかしこの方法は、キャッシュの消去の時に項目のチェックを誤ると消えてしまうデータである他、LRUによる削除もあります。つまり、
- ファイルを自らごみ箱に入れる
- ファイルを右クリック→削除or「deleteキー」を押し、確認ダイアログに対しても「はい」を選択する
という、うっかりミスをしてしまうリスクと比べ、はるかに消えるリスクが高い保存方法であると判断しました。
また、ストレージの永続化についても調べましたが、簡単にはできない印象を受けました。
まとめ
以上のことから、ブラウザ上でローカルファイルの読み書きを可能にする、ActiveXの代替となる手段を知りたいと思うに至りました。このような長い説明を避けたかったため、「個人的な趣味」で済ませてきましたが、悪用を疑われるのは嫌だったので、もう少し詳細に説明しようと考えました。
#14
総合スコア943
投稿2023/10/21 10:54
編集2023/10/21 12:01ブラウザ自体の起動コストに比べてWPFアプリの起動コストなんて微々たるモノだから.NETアプリでいいし、どうしてもローカルファイルに保存したいなら鯖で動かせばいいだけですよね。全く必要性を感じません。
他方悪用を仮定すると全てに辻褄が・・・
どこにも攻撃的な部分がないので修正のしようがありません。コメントにて具体的に引用して指摘してください。
#15
ブラウザ自体の起動コストに比べてWPFアプリの起動コストなんて微々たるモノ
正確に表現するなら、ブラウザは常に起動させているので、新しいタブが開くだけですね。
WPFアプリは、自分のPCがボロボロすぎるせいで、起動にかなり時間がかかります。
確かに仰るとおり、起動させていない状態からブラウザを起動させるのは、結構重いですね。
鯖で動かせばいいだけ
実はそれに近い方法で現在試しているところです。System.Net.HttpListenerを使い、GETメソッドでのリクエストには全て400を返し、RawUrlとPOSTメソッドのボディーによってのみ挙動を決定するという、通信手段にHTTPを使う以外、Webサーバーとは微塵も呼べない代物を作成中です。
ActiveXで出来たことなのに、出来なくなったがために、Apacheを起動するなんて大がかりなことはしたくなかった(別に自分のPCをサーバーにして公開するわけでもなし、PHPなどをテストしたいという意図もないのに…)ですが、幸い、上記の代物は軽い動作で動いてくれているので、他に方法が見つからなければ現時点での妥協案とする予定です。
他方悪用を仮定すると全てに辻褄が・・・
社内イントラなど、独自のocxを使ったシステムを未だに使っているところはあります。ここまで時代が進んでもなおActiveXに依存するところがあるのは、本来ならブラウザだけでは実現できないことをブラウザで容易に実現できるところにあるのではないでしょうか。なので、悪用とか関係なく、一定の需要は今でもあると思いますし、現に今需要があるのでこうして質問している次第です。
あと、可能でしたら、「ローカルファイルの読み書きをせずとも、ブラウザで利用できる、セキュリティ的により安全で永続的な保存手段」について、もしご存じでしたら方法をお聞かせ願えないでしょうか？
- そのような方法は無い
- 方法はあるが「悪用される恐れがあり下手に教えるのは危険」
ということでしたら、その旨お答えいただけますとありがたいです。
#16
総合スコア943
投稿2023/10/21 11:42
編集2023/10/21 12:02ブラウザは常に起動させているので、新しいタブが開くだけですね。
ブラウザと一緒にWPFアプリを起動しておけばいいのでは？
必要なら開始ボタンを押すまでMainWindow非表示とかでもいいです。
ActiveXで出来たことなのに、出来なくなったがために、Apacheを起動する
登録が必要でTCP使ってたモジュールを使うのと、Apacheを起動するのと大差ないですよ。もっと手軽にnode.jsでexpressとかでもいいんです。そもそもHTMLはきっとローカルファイルなのでしょう？それを鯖に載せてちょっとpostに対応するだけの簡単な仕事です。またHTTPを喋れる鯖ならWeb鯖で大丈夫です。汎用でないだけ。
妥協でも何でもなく今までだってそれで良かったんですよ。
社内イントラなど、独自のocxを使ったシステムを未だに使っているところはあります。
COMが残るシステムなんてどこにでもあるけど、Webに移行し、JavaAppletやActiveXやFlashからJavaScriptへの移行なんてどこでもやってます。セキュリティを破壊してまでWebアプリからクライアントのローカルファイルを壊すなんてことをしたいユースケースなんてありませんよ。
何もかも不自然です。食い下がる意味も分かりません。
どこにも攻撃的な部分がないので修正のしようがありません。コメントにて具体的に引用して指摘してください。
#17
総合スコア4335
投稿2023/10/21 12:06
編集2023/10/21 12:06何もかも不自然です。食い下がる意味も分かりません。
意地になっているのはDameoさんのほうに見えます。あなたの懸念はここで質問者さんを詰っても解消しないので、そういうことはやめてくださいませんか。
#19
総合スコア4335
投稿2023/10/21 12:32
編集2023/10/21 13:53例えば不正アクセスの手段を教えて欲しいという人に正当な動機の確認もせずに詳細の説明をしてしまうと、悪用するキッズが増えてしまうでしょう。
そういうお考えなら、黙って警察にでも駆け込めばいいのではないですか。ここで「キッズ」相手に自分は意識高いぞ自慢しててもあなたが懸念する問題は防げないです。まあ取りあってもらえるかどうかは知りませんけど。
セキュリティ的に問題がある手法がどうして問題なのか、またシステムをセキュリティ上の問題なく利用するにはどんな課題をクリアするべきか、について討議することは何ら問題ないとかんがえます。
以前も別件で書きましたけど、例えて言うと、どこかの質問サイトでアルコール発酵について質問した人を「酒税法に引っかかるぞ」と非難するような筋違いな真似はやめてほしい。
#20
総合スコア943
投稿2023/10/21 13:43
編集2023/10/21 13:54ここで「キッズ」相手に自分は意識高いぞ自慢しててもあなたが懸念する問題は防げないです。
性悪説に立っている理由の説明です。意識高くないし、何も防いではいません。
セキュリティ的に問題がある手法がどうして問題なのか～
誰もそんな話してませんけど。。。日本語も不自然です。
以前も書きましたけど～
全く記憶にありません。何かお話したことありましたっけ？
要領を得ない例えでは何をやめないといけないのかまるで分かりませんよ。
質問内容には無関係なのですが、何かをやめてほしいという意見があり、その内容確認に必要なやり取りなのですよ。
むしろ、意見された方の話が質問内容に無関係なだけなので、何か気に障るのならそちらに伝えてください。
#21
総合スコア4335
投稿2023/10/22 06:52
ウェブブラウザは汎用性のもとでの安全性を追求してきた結果、ブラウザ外のデータへのアクセスに制約を課す方向に進化してきました。ですので、一般的なウェブブラウザで使える技術で任意のローカルファイルの読み書きができるような方法は、現在はないと思います。またたとえ現在あったとしても、いずれ不可能になるでしょう。
しかし、「ローカルファイル」といっても当質問では、何か特定のアプリケーション用のデータフォーマットを読み書きしなければならないという条件はないのですよね。そうであればWeb Storage APIなどを使って「ローカル」のストレージに保存する方法でいいのではないでしょうか。このようなものは前述のようなブラウザの課す制約の下でも使える仕様として開発されているので、今後使えなくなるといった可能性も低いですし。
質問者さんが懸念されているLRU動作はpersistent-storageを指定することで一応回避できるようです。Safariなど一部で非対応ですが。また、ブラウザ操作でストレージを誤消去してしまうおそれは確かにあります。
しかし、汎用品であるウェブブラウザを使う以上は、対応できる製品が限定されたり、特定の望ましくない操作を制限できないのはしかたないでしょう。
また、現代のウェブブラウザの機能を正しく動作させるには適切なオリジンサーバが必要になることも多いのではないでしょうか。ですからスタンドアロンのアプリケーションを作成するのにウェブブラウザを使うというのはあまりいいアイディアではない気もします。
逆に、サーバが存在する前提の下で自作のアプリを作成するという選択もあり得ると思います。この場合、要はサーバとHTTP等で通信できてローカルファイルを読み書きできるだけのものを作れればいい (UIをはじめとしたアプリの主要部分は普通のjavascriptアプリとして別に作成する) ということもできると思います。
#22
#21
ご意見ありがとうございます。
LRUを回避できるpersistent-storageについては調べたことがあります。
window.navigator.storage.persist()でパーミッションを取得できれば永続化できると。
https://qiita.com/goccy/items/459d375d9c8a83c267d2
上記URLによると、単にメソッドを実行すればパーミッションが取得できるというわけではなく、いくつかの条件があって、そのうちの1つでも満たしていればパーミッションを取得できるという仕様のようでした。
もしパーミッションの取得を狙うなら、「PUSH通知を許可する」というのが、一番やりやすいかなと思っています。他の条件はこちらのブラウザの利用状況によって左右されてしまうエンゲージメントスコアを用いていたり、ブックマーク数が少なくないとならなかったりで扱いづらそうです。
現時点では、
- ストレージを永続化してその中に保存する
- ごく簡易的な、HTTPサーバーとして機能するexeを作成し(現在作成中です)、
fetchなどでコマンドを飛ばす
というのが現実的なところかと感じていますが、今後も他に手法がないかの模索は続けていきます。
スタンドアロンのアプリケーションを作成するのにウェブブラウザを使うというのはあまりいいアイディアではない
そうかも知れないですね。WebViewでアプリケーションと同じフォルダ内にあるHTMLやJavaScriptを読み込む方法なら、HTMLやJavaScriptの書き換えによる機能の追加、削除が簡単に行える状態は維持できますから、こういう時こそ、ブラウザを直接使うのではなく、ハイブリッドアプリケーションにすべきなのかも知れないですね。制約も一切ないでしょうし。
#24
総合スコア197
投稿2023/11/03 11:41
これに対しては、個人の趣向と捉えてください。技術的に、
- なるべく大がかりなものを避け
- 見かけとしては、あたかもJavaScriptだけでローカルファイルにアクセスしているように見える
という方法に、どのようなものがあるのか興味があるのです。
最初の前提なのですが、
Web開発の業界では、node上でnpm run start とかのコマンドを入力して、サーバーを動かしてブラウザで表示して開発を行うのでサーバーを起動してブラウザで見る、ということが「大がかりなもの」という概念からして、思い込みだと思います。
C#系の開発をしているとそれが大掛かりに見えるのですが、そんなものは慣れている立場からすると、全く手軽なものです。
ローカルファイルを読み書きするためのサーバープログラムを動かし、
その上で、npm run start とかでwebサーバー起動して、localhost で、Webページを開き、フロントから通信してサーバープログラムを叩き、ローカルファイルを読み書きする、
ということが、それなりに手間はかかりますが、webアプリケーションの基本になりますので、基本を学ぶためにもやっておいた方がいいと思います。
例であがっている「WebSocket API」を使う方法ですよね。それで作るのが正しいやり方です。
Electronも内部に閉じてそれをやっているので、ブラウザでGUIを作りたいというのならそのようにすべきと思います。そうでなければ、Electronが存在する意味もないのではないかなと思います。
昔の変なActiveなんとかみたいなのはもう廃れた技術なので、学ぶ意味もないので忘れた方がいいと思います。
新しい標準的なものに慣れていくのがよいと思います。
#25
#24
ご意見ありがとうございます。
Web開発の業界では、node上でnpm run start とかのコマンドを入力して、サーバーを動かしてブラウザで表示して開発を行うのでサーバーを起動してブラウザで見る、ということが「大がかりなもの」という概念からして、思い込みだと思います。
そうなのですね。自分のPCにはxamppがインストールされていますが、これまでは自分で開発したPHPプログラムの動作確認の時にしか使っていませんでした。頑固者なので簡単に思い込みをなくせないと思いますが、必要に応じて使う場面を増やしていこうと思いました。
例であがっている「WebSocket API」を使う方法ですよね。それで作るのが正しいやり方です。
下記サイトをヒントに、すでに開発済みです↓
https://qiita.com/tekka/items/1bf440ccd50bb4171886
少し大げさに実装していて、<script type="text/x-csharp">...</script>の中に書いたC#プログラムのコードを「WebSocketサーバーとして動作するexe」に送信すると、Roslyn for Scriptingで解析して実行するというものでした。ある意味では何でも出来るのですが、初回の実行にかなり時間がかかるという問題点がありました。
現在開発中のHTTPサーバー版は機能を最低限のものにして作っています。
Electronも内部に閉じてそれをやっている
初めて知りました。Election製のアプリケーションはchromiumを搭載する関係上、やりたいことに対してサイズが膨らみすぎるのが気になるところです。
昔の変なActiveなんとかみたいなのはもう廃れた技術
そうですね。ちょっと前、EdgeのIEモードでもnew ActiveXObject("...")の部分が処理されませんでした。セキュリティ的にも危ないですし、マイクロソフトとしても廃れさせたいのでしょうね。…職場ではIE11とOCXに依存したシステムが現役ですが。
#26
総合スコア98
投稿2023/11/09 05:04
編集2023/11/09 05:08exe起動までは許容できるけど本格的なWebサーバ建てるのは大袈裟だなって感じなら、Minimal APIなんてのもあります。
Minimal API クイック リファレンス
【C#/ASP.NET】Minimal APIでWeb APIを定義してみる
#29
総合スコア64
投稿2023/12/02 13:47
編集2023/12/02 13:49[ChatGPT3.5]により生成された文章です。興味があったので、ChatGPTに質問してみました。
ブラウザ上でのJavaScriptとローカルファイルの読み書き
背景
HTML、CSS、JavaScriptを使用して開発したブラウザ上で動作するアプリケーションから、同じフォルダに配置したローカルファイルを操作したい。ローカルファイルへのアクセスはC#で開発したexeやdllを使用するが、JavaScript上でもファイルの読み書きが可能であることが望ましい。
検討済みの方法
以下の方法はすでに検討されたが、問題点があるため不適切と判断されています。
-
ActiveXObjectを使用したCOMの利用
- 問題: IE限定であり、他のブラウザでは利用できない。一部のオブジェクトやメソッドが利用できない。
-
Chrome ExtensionとNative messagingの組み合わせ
- 問題: 通信制限があり、1MBの制限がある。
-
chrome.fileSystem
- 問題: Chrome App限定である。
-
File System Access API
- 問題: ファイル選択ダイアログが必要で、直接指定が難しい。
-
WebSocket API
- 問題: WebSocketサーバーが必要で、複雑な手順が必要。
新たな提案
Node.jsを使用したローカルサーバー
Node.jsを使用してローカルサーバーを構築し、そのサーバー経由でJavaScriptからローカルファイルにアクセスする方法です。
-
Node.jsサーバーの作成
- Node.jsでシンプルなサーバーを起動します。
javascript
1const http = require('http'); 2const fs = require('fs'); 3 4const server = http.createServer((req, res) => { 5 if (req.url === '/read') { 6 // ファイル読み込み処理 7 const data = fs.readFileSync('test.txt', 'utf8'); 8 res.end(data); 9 } else if (req.url === '/write') { 10 // ファイル書き込み処理 11 const content = '書き込む内容'; 12 fs.writeFileSync('test.txt', content); 13 res.end('書き込み完了'); 14 } 15}); 16 17const PORT = 3000; 18server.listen(PORT, () => { 19 console.log(`Server running at http://localhost:${PORT}`); 20}); -
JavaScriptからのアクセス
- ブラウザ上のJavaScriptからは、このサーバーに対してHTTPリクエストを送ります。
javascript
1// ファイル読み込み 2fetch('http://localhost:3000/read') 3 .then(response => response.text()) 4 .then(data => console.log(data)); 5 6// ファイル書き込み 7fetch('http://localhost:3000/write') 8 .then(response => response.text()) 9 .then(data => console.log(data)); -
注意点
- セキュリティ上の理由から、ブラウザから直接ローカルファイルにアクセスすることは難しいため、サーバーを介して通信することで回避します。
- ローカルサーバーをセットアップすることが前提となります。
#30
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。