2016-11-28 13 views
0

私は完全な初心者であり、実際に私が何を話しているのかわからないので、私は正しいですが、ナンセンスを話し始めると混乱することはありません。ButtonpressのJavaScriptにパスワードを送る方法は?

私はrfoutlet by timlelandという既存の作業プログラムを持っています。それは基本的に私のrpizero上のWebサイトをホストし、ページ上のボタンを押すことで遠隔制御されるアウトレットを起動させる。

私が理解する限り、htmlページは2つのパラメータ(data-outletIdとdata-outletStatus)をjavascriptに送信します。これにより、これらのパラメータを使用してコードを実行するphpファイルへのポストコールが行われます。あなたは、これは私はhtmlページの機能に追加したいものであるように私はすでに、データ・パスワードと呼ばれる三番目のパラメータを追加して見ることができるように

var toggleOutlet = function(buttonClicked) { 
 
    $.post('toggle.php', { 
 
      outletId: buttonClicked.attr('data-outletId'), 
 
      outletStatus: buttonClicked.attr('data-outletStatus'), 
 
      password: buttonClicked.attr('data-password') 
 
     }, 
 
     function(data, status) { 
 
      //alert('Outlet toggled!'); 
 
     }); 
 

 
}; 
 

 
$(function() { 
 
    $('.toggleOutlet').click(function() { 
 
     toggleOutlet($(this)); 
 
    }); 
 
});

:jsがこのようになります。これは私が今やりたいものを

<!DOCTYPE html> 
 
    <html> 
 

 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>RF Outlets</title> 
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <style> 
 
     body { 
 
      padding-top: 70px 
 
     } 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href=".">RF Outlets</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav> 
 

 
     <div class="container"> 
 
     <label>1</label> 
 
     <div class="btn-group btn-group-justified" role="group" aria-label="..."> 
 
      <div class="btn-group" role="group"> 
 
      <button type="button" data-outletId="1" data-outletStatus="on" class="btn btn-default toggleOutlet">On</button> 
 
      </div> 
 
      <div class="btn-group" role="group"> 
 
      <button type="button" data-outletId="1" data-outletStatus="off" class="btn btn-default toggleOutlet">Off</button> 
 
      </div> 
 
     </div> 
 

 
     <label>2</label> 
 
     <div class="btn-group btn-group-justified" role="group" aria-label="..."> 
 
      <div class="btn-group" role="group"> 
 
      <button type="button" data-outletId="2" data-outletStatus="on" class="btn btn-default toggleOutlet">On</button> 
 
      </div> 
 
      <div class="btn-group" role="group"> 
 
      <button type="button" data-outletId="2" data-outletStatus="off" class="btn btn-default toggleOutlet">Off</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script> 
 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="script.js"></script> 
 

 
    </html>

を(それらはすべて同じように見えるように私は、それを短くするボタン3-6を切り取る)、修正ページのコードです私はインターネット上でこのウェブサイトにアクセスしているので、このセキュリティ機能を持っていると思うので、ユーザーがパスワードフィールドに入力しなければならないパスワードをJSファイルに(パスワードはPHPファイルでチェックされています)誰かが私のURLを知り、無作為にクリックを始めたり、目的のために私を混乱させたい場合に備えて。残念ながら、これを実装する方法はわかりません。より多くの経験を得る前に、私はおそらくこのようなものをいじってはいけませんが、実際に私のdiyホームオートメーションシステムでこれを動作させる必要があります。

このようなことを試みたが、enter link description hereに失敗しましたが、完全に異なる方法がその実装に使用されていることに気付きました。

誰かが私を助けてくれることを願っています。

+0

まず、jQueryへのリンクをページに追加します。 – Jeff

+0

あなたのページにパスワードフィールドを追加してください( '')、 'buttonClicked.attr( 'data-password')' #pass ').val(); 'を使用してパスワードフィールドの値を取得します。 –

答えて

0

HTMLページにパスワードを入力できるINPUTを作成し、IDを入力します。

<INPUT id="txtMyPassword"> 

あなたは

$('#txtMyPassword').val() 

を持つ要素には何がアクセスできるパスワードを収集するために、あなたのHTMLの要素を持っていたら、あなたはjQueryのそのIDに基づいて要素を選択したし、その後つかみましたそのテキストボックスの値

あなたのページがHTTPSでない場合は、あなたのアプリに「クリアな」パスワードを送信しており、適度に有能な攻撃者が簡単に取得できることに注意してください。

関連する問題