JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5でブラウザからローカルファイルを直接操作できる？セキュリティ制限と代替手段を解説

結論：HTML5だけではローカルファイルへ直接アクセスできない

HTML5のみを使用して、Webブラウザ内からユーザーのローカルファイルに自由にアクセスしたり操作したりすることはできません。これは、悪意のあるWebページがユーザーのPC内のデータを勝手に読み書きすることを防ぐための、セキュリティ上の重要な制限です。

ただし、ドラッグ＆ドロップAPIやFile API、FileSystem APIといった仕組みを組み合わせれば、ユーザーが明示的に選択・許可したファイルに限って、内容を読み取るなどの操作を行うことは可能です。

ドラッグ＆ドロップの実装例

以下は、HTML5のドラッグ＆ドロップ機能を使ったシンプルなデモです。紫のボックス（boxA）をドラッグし、ピンクのゴミ箱エリア（boxB）へ移動させるイメージになります。

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
         #boxA { background-color: #6633FF; width:75px; height:75px; }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script>
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB">Dustbin</div>
      </center>
   </body>
</html>

ポイント解説

  • draggable="true" を指定した要素がドラッグ可能になります。
  • ondragstart イベント内で dataTransfer.setData() を使い、ドラッグ中のデータ（ここでは要素のID）を保持します。
  • setDragImage() により、ドラッグ中に表示される画像をカスタマイズできます。

補足：File APIによるファイル読み込み

ユーザーが <input type="file"> やドラッグ＆ドロップで選択したファイルであれば、JavaScriptの FileReader オブジェクトを使ってテキストや画像などの内容を読み取ることができます。ただし対象となるのはあくまで「ユーザーが自ら許可したファイル」だけであり、任意のパスへのアクセスは引き続き禁止されています。この設計により、利便性とセキュリティの両立が図られています。

  1. HTML5のWeb Worker対応をブラウザで検出する方法【Modernizr活用】

    HTML5機能のブラウザ対応確認の基本HTML5では、Web Workerをはじめとする多くの新しい機能が追加されました。しかし、すべてのブラウザがこれらの機能に対応しているとは限りません。そのため、JavaScriptで機能の有無を事前に検出し、非対応のブラウザ向けに適切な代替処理を用意しておくことが重要です。Modernizrを使ったWeb Worker対応の検出機能検出には「Modernizr」というJavaScriptライブラリが便利です。Modernizrをページに読み込むと、Modernizr.webworkersのようなプロパティを参照するだけで、ブラウザがWeb Workerに

  2. JavaScriptのonclickでブラウザを前のページに戻す方法

    ボタンをクリックしたときに前のページへ戻るようにするには、JavaScriptの window.history.go(-1) を使用します。これはブラウザの履歴を1つ前に遡る動作で、いわゆる「戻る」ボタンと同じ挙動を実現できます。実装例以下は、input要素のonclick属性に window.history.go(-1) を指定したシンプルなサンプルコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=wid