Cryptreeのフロント実装
実際にファイルの保存可能にしてみる
簡易的なボタンでファイルをアップロードできるようにする
code:front.html
<!DOCTYPE html>
<html>
<body>
<input type="file" id="fileToUpload">
<button onclick="uploadFile()">Upload File</button>
<div id="progress"></div>
<div id="message"></div>
<script src="upload.js"></script>
</body>
</html>
code:upload.js
function uploadFile() {
let file = document.getElementById("fileToUpload").files0; let xhr = new XMLHttpRequest();
xhr.open("POST", "/upload_endpoint", true);
//アップロードの心境状況を追跡する
xhr.upload.addEventListener("progress", function(e) {
let perecentComplete = (e.loaded/e.total) * 100;
document.getElementById("progress").innerText = "Progress: " + perecentComplete + "%";
});
//エラーが発生したときに実行される関数
xhr.addEventListener("erro", function(){
document.getElementById("message").innerText = "Error occurred during the upload.";
});
//アップロードが完了したときに実行される関数
xhr.addEventListener("load", function(){
if (xhr.status == 200) {
document.getElementById.innerText = "Upload completed successjully.";
} else {
document.getElementById("message").innerText = "Upload failed with status" + xhr.status;
}
});
xhr.send(file);
}
XMLが出てきたYudai.icon
XMLに限らずファイルのアップロードの機能を果たすのがこのjsファイルらしい
PythonのフレームワークのFlaskを使用して実装していく
ターミナルでインストールする必要がある
pip install flask
code:server.py
from flask import Flask, request
from cryptography.fernet import Fernet
import os
app = Flask(__name__)
key = Fernet.generate_key()
cipher_suite = Fernet(key)
@app.route('/')
def home():
return 'Hello World'
@app.route('/upload_endpoint', methods='POST') def upload_file():
filename = file.filename
file_content = file.read()
encrypted_file_content = cipher_suite.encrypt(file_content)
with open(os.path.join('C:\\Users\\isiyu\\CryptreeFolder\\save', filename), 'wb') as f:
f.write(encrypted_file_content)
return 'File uploaded and encrypted successfully', 200
if __name__ == '__main__':
app.run(port=5000)
疑問だったのが以前cryptree.pyでもcryptographyを使って暗号化と復号化機能を付けたけど、同じことをする？Yudai.icon
以前のcryptree.pyが使用できないのか？
chatGPT.icon曰く使用は可能らしい(codeの追加により)
ただし、この方法でファイルを保存すると、ファイルの元の形式（例えば、JPEG画像やPDFドキュメントなど）が失われてしまいます。暗号化されたデータはバイナリデータとして保存され、その内容を人間が直接読むことはできません。
まさかの元の形式が失われるYudai.icon
これ困る
chatGPT.iconファイルレベルの暗号化: これはファイル自体（つまり、ファイルの内容）を暗号化するものです。具体的には、ユーザーがアップロードしたファイルを読み込み、その内容を暗号化して保存します。これは主にアプリケーションのフロントエンド（HTMLとJavaScript）およびバックエンド（Flaskのserver.py）で行われます。
ノードレベルの暗号化: これはファイルシステムのノード（つまり、ファイルやディレクトリのメタデータ）を暗号化するものです。具体的には、ファイルやディレクトリの名前、親子関係、アクセス権限などを暗号化します。これは主にcryptree.pyで行われます。
それぞれの役割が異なるってこと
つまりこの両方の組み合わせによってCryptreeが成り立つYudai.icon*2 これ実際にやってみたから深まった
この2つの組み合わせによりアクセス制御を実現可能
ここからがまじで解決できない....Yudai.icon
動作確認
エンドポイントをテストする
/upload_endpointエンドポイントにPOSTリクエストを送り、ファイルが正常にアップロードされ、暗号化されて保存されるかを確認します。このテストには、curlコマンドまたはPostmanのようなAPIテストツールを使用できます。たとえば、以下のようにcurlコマンドを使用することができます：
curl -X POST -F "file=@path_to_your_file" http://localhost:5000/upload_endpoint
できなかった
saveフォルダが必要だった
作成したけど出来なかった
Postmanを使用してみる
リクエストの種類を選択する： リクエストタブの左側にあるドロップダウンメニューから「POST」を選択します。
ファイルを選択する： ボディタブをクリックし、フォームデータを選択します。キーの部分に「file」を入力し、タイプを「File」に変更します。次に、右側に表示される「Select Files」ボタンをクリックしてアップロードするファイルを選択します。
リクエストを送信する： 画面右上の「Send」ボタンをクリックします
なぜか一生できない
エラー
コマンドプロンプト
127.0.0.1 - - [25/May/2023 18:52:47] "POST /upload_endpoint HTTP/1.1" 400 -
Postman
The browser (or proxy) sent a request that this server could not understand.
Chromeのconsole
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
なーんで出来んのだろYudai.icon
結局のところPostmanがしっかり送れていなかったっぽいYudai.icon
で、Gitbash使ってcurlの実行をした
% Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 82477 100 40 100 82437 46 96384 --:--:-- --:--:-- --:--:-- 96577File uploaded and encrypted successfully
やっとできたYudai.icon*2
https://scrapbox.io/files/646fe945660258001beff79f.png
ちゃんと暗号化されて保存されてる！！Yudai.icon*2
エラー要因は、
chatGPT.iconrequest.filesの中には'file'というキーではなく空のキー（''）が存在し、それがアップロードされたファイルに関連付けられているようです。
らしい
ちゃんとfileにも出来てたのに何で空になってたんだろYudai.icon
とりあえずできて良かった
続きも進めていく