Meteor Reactを翻訳してTodos-10-メソッドを作成するセキュリティ

3260 ワード
meteor javascript

メソッドのセキュリティ


この手順の前に、このアプリケーションの任意のユーザーはデータベースの任意の部分を変更することができます.非常に興味深い小さなプロジェクトやプレゼンテーションプロジェクトでは良いかもしれませんが、実際のアプリケーションではこれらのデータを権限制御する必要があります.Meteorでは、メソッドを宣言することが最善の方法です.これにより、クライアントのコードを直接置き換えます.これらの方法をinsert、update、removeと呼び、実行する方法を置き換えます.ユーザーがこのような一連の操作を完了する権限があるかどうかを確認します.その後、クライアントで行われたクライアントへの変更は、データベースに送信されます.

削除insecure


新しく作成された各Meteorプロジェクトには、insecureパッケージがデフォルトで追加されています.このパッケージでは、クライアントからデータベースを編集できます.製品の原型を作るときにこのバッグはとても役に立ちますが、今はこのスペアタイヤを消さなければなりません.このパッケージを削除するには、ディレクトリの下で実行する必要があります.
meteor remove insecure

このパッケージを削除してからこのアプリケーションを使用してみると、入力ボックスやボタンが使えなくなります.これは、すべてのクライアント・データベースの権限が取り消されたためです.今、私たちのアプリケーションでいくつかの方法を使用して一部を書き換える必要があります.

いくつかの方法を定義します


まず、各データベースがクライアントで実行したいすべての操作を定義する方法が必要です.これらの方法は、クライアントとサービス側で同時に実行できるコードで定義する必要があります.「楽観的なインタフェース」というタイトルの章では、後で議論します.
// simple-todos-react.jsx  

    React.render(, document.getElementById("render-target"));
  });
}

//     
Meteor.methods({
  addTask(text) {
    //              
    if (! Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }
 
    Tasks.insert({
      text: text,
      createdAt: new Date(),
      owner: Meteor.userId(),
      username: Meteor.user().username
    });
  },
 
  removeTask(taskId) {
    Tasks.remove(taskId);
  },
 
  setChecked(taskId, setChecked) {
    Tasks.update(taskId, { $set: { checked: setChecked} });
  }
});
//

今、私たちはいくつかの方法を定義しました.私たちはいくつかの場所を更新する必要があります.デフォルトではなく、定義したばかりの方法でデータベースを操作します.
// App.jsx   

//   React ref          
var text = React.findDOMNode(this.refs.textInput).value.trim();

//     
Meteor.call("addTask", text);
//     

// Clear form
React.findDOMNode(this.refs.textInput).value = "";
// Tasks.jsx   
 
toggleChecked() {
  //               
  //      
  Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
},

deleteThisTask() {

    //       
  Meteor.call("removeTask", this.props.task._id);
},

render() {

今、私たちの入力とボタンはまた使えます.私たちはこれらの仕事から何を得ましたか.
  • データベースにデータを挿入すると、ユーザーがログインしているかどうか、createdAtフィールドが正しいかどうか、ownerフィールドとusernameフィールドが正しいかどうかを安全に検証できます.一人のユーザーは誰の真似もできない.
  • ユーザがタスクをプライバシーの性質にしたい場合.setCheckedおよびdeleteTaskに、後続のステップで追加の検証ロジック
    • を追加することができる.
  • クライアントコードとデータベースロジックがさらに分離されました.イベントリスニングがトリガーされたときの多くの雑用に取って代わった.今、私たちはどこでも呼び出すことができるいくつかの方法があります.

    • 楽観的なUI


    では、なぜサービス側とクライアントで独自の方法を定義するのでしょうか.これは、「楽観的なUI」と呼ばれる特性を開くためです.
    クライアントがMeteor.callメソッドを甘やかすと、この時点で2つのことが起こります.
  • クライアントは、セキュリティ環境での要求をサーバ側に送信する.AJAXのような運行のリクエストです.
  • メソッドシミュレータは、クライアントで直接実行されます.既存の情報によってサービス側が返す結果を予測しようとする
    • これは、バックエンド(サーバ側)からの結果がクライアントに到達する前に、新しく作成されたタスクが実際に画面に表示されていることを意味します.
    サービス側から返された結果がクライアントシミュレーションの結果と一致する場合、すべては以前に示したようになります.サービス側から返された結果とクライアントシミュレーションの結果が一致しない場合、インタフェースはサービス側の実際の状態からの反応を補完します.
    Meteorのいくつかの「方法定義」と「楽観的なUI」をマスターすると、サービス・エンド・コードのセキュリティ保護と伝送遅延なし(no round-trip delay)という2つの世界の真髄が得られます.blog post about optimistic UIを読むと、この方面の知識をもっと知ることができます.
    [LeetCode] 20. Valid Parentheses
    Image_preprocessing