iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
11
Security

資安這條路─以自建漏洞環境學習資訊安全系列 第 2

資安這條路 02 - [基礎知識] HTML、JavaScript、HTTP

前端 vs 後端

今天講一些基礎知識,以下是前後端小小的差異 (X

HTML

LAB:使用 githubpage 建立一個個人網頁

  • 註冊 Github :https://github.com/

  • 開一個新專案

  • 如果你還不會 Git 可以左轉參考:連猴子都能懂的 Git 入門指南

  • 為追求快速與方便,此次將直接使用 Github 介面進行操作

  • 進入剛建立好的專案,創立新檔案

  • 建立我們的首頁檔名 index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello</title>
    </head>
    <body>
    <!--註解在這裡-->
    <h1>安安各位好</h1>
    <p>這裡是飛飛鐵人賽的練習 Github 專案</p>
    
    </body>
    </html>
    
  • 新增 commit 紀錄並按下綠色按鈕

  • 確認之後可以看到剛剛 commit 紀錄跟檔案,點選 Setting 進行設定

  • 進入設定頁面之後往下拉

  • 看到 Github Pages 中的 Source 中,選 master 再點選 Save

  • 送出之後就會看到網址

  • 進入網址預設會是 index.html , 如果你的檔案名稱不是 index.html 請在網址後面加上你自己設定的檔案名稱。

  • 右鍵點「檢查」或是按 F12 可以開啟開發者工具,就可看到我們剛剛寫的 HTML 。

  • 好,我們成功透過 github page 建立了一個靜態頁面。

    • 各位可以在留言板繳交作業 XD
  • HTML ( HyperText Markup Language )

    • 超文本標記語言
    • 建立網頁的標準標記語言
    • 透過很多 Tag 去描述
  • 常見的 HTML Tag

    • <meta>
      • 描述該網頁的屬性
    • <title>
      • 網頁的標題,在你的標籤頁上的那個名字
    • <script>
      • 放 JavaScript 的 Tag
    • <link>
      • 導入 CSS
    • <br>
      • 換行
  • 想學習更多 HTML 請右轉:W3school HTML

JavaScript

  • 為追求快速,我們透過瀏覽器中的 Console 進行 Javascript 學習

  • 透過剛剛提到的 F12 或右鍵點「檢查」,開啟開發者工具,之後點 Console ,就可以開始練習 JavaScript。

  • 透過 var 來宣告變數,也可以直接進行運算。

  • 註解的方式

  • 動態型別

var test = 1;
console.log(test);
test = "Hello World!";
console.log(test);

  • JavaScript 是執行在使用者端的腳本語言
    • 日後介紹 的 XSS 也跟 JavaScript 息息相關
  • for 迴圈
    • % 取餘數

      for( var tmp = 0 ; tmp < 10 ; tmp ++){
          if (tmp % 2 == 0){
              console.log(tmp+'是偶數');
          }else{
              console.log(tmp+'是奇數');
          }
      }
      
    • switch case

      for( var tmp = 0 ; tmp < 10 ; tmp ++){
          var modnum  = tmp % 2;
          switch (modnum){
              case 0 :
                   console.log(tmp+'是偶數');
                   break;
              default:
                   console.log(tmp+'是奇數');  
          } 
      }
      
    • 常用 method

      • 編碼
        • base64

          btoa('HelloFeiFei');
          "SGVsbG9GZWlGZWk="
          atob('SGVsbG9GZWlGZWk=');
          "HelloFeiFei"
          
          • 安全性:許多人可能會在資料庫密碼中使用編碼 Base64 ,但其實沒有什麼安全性可言,取得被編碼後的字串,可快速透過線上工具或函式就能轉回明文。
        • URL 編碼

          encodeURIComponent('嘿,我是飛飛');
          "%E5%98%BF%EF%BC%8C%E6%88%91%E6%98%AF%E9%A3%9B%E9%A3%9B"
          decodeURIComponent('%E5%98%BF%EF%BC%8C%E6%88%91%E6%98%AF%E9%A3%9B%E9%A3%9B');
          "嘿,我是飛飛"
          
  • 想學習更多的 JavaScript 請右轉:W3school JavaScript

HTTP

  • 講 HTTP 之前,先提起一下網頁的三大技術, HTML , HTTP , URL 。

  • HTTP 的歷史悠久

  • TCP/IP

  • UDP 就是我不在乎有沒有收到

  • DNS

  • URL & URI

  • 剛剛 JS 有提供函式可以 URL 編碼

  • HTTP 方法

  • https://http.cat/

    • 貓圖!
    • 200 OK
    • 404 你找不到我
    • 500 伺服器錯誤
    • cookie

上一篇
資安這條路 01 - 前言
下一篇
資安這條路 03 - [基礎知識] Docker & Docker-compose & PHP 基本資訊
系列文
資安這條路─以自建漏洞環境學習資訊安全31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
SunAllen
iT邦研究生 1 級 ‧ 2020-09-17 23:27:22

/images/emoticon/emoticon07.gif

飛飛 iT邦新手 1 級 ‧ 2020-09-18 23:52:25 檢舉

您好~

2

圖好用心!

飛飛 iT邦新手 1 級 ‧ 2020-09-19 20:04:46 檢舉

謝謝~

0
BigBing
iT邦新手 5 級 ‧ 2020-09-23 09:03:26

讚讚

飛飛 iT邦新手 1 級 ‧ 2020-09-23 10:31:45 檢舉

謝謝你~

0
CyberSerge
iT邦好手 1 級 ‧ 2020-09-26 09:31:23

很棒的圖示

飛飛 iT邦新手 1 級 ‧ 2020-09-27 16:10:00 檢舉

謝謝~

0
zivtor
iT邦新手 4 級 ‧ 2020-10-15 12:45:53

有貓就推(?
圖文並茂,很用心的文章~

飛飛 iT邦新手 1 級 ‧ 2020-10-15 12:50:18 檢舉

貓咪最棒了,謝謝你~

飛飛 iT邦新手 1 級 ‧ 2020-10-15 12:50:18 檢舉

貓咪最棒了,謝謝你~

0
rarii
iT邦新手 5 級 ‧ 2020-10-28 01:02:25

好用心 感謝分享

飛飛 iT邦新手 1 級 ‧ 2020-10-28 12:23:03 檢舉

謝謝

0
jinsider
iT邦新手 5 級 ‧ 2020-11-06 13:27:21

推圖文並茂

飛飛 iT邦新手 1 級 ‧ 2020-12-02 13:59:54 檢舉

謝謝你~

0
luke327
iT邦新手 5 級 ‧ 2020-12-02 08:44:42

圖文輔助超詳細,推~

飛飛 iT邦新手 1 級 ‧ 2020-12-02 13:59:59 檢舉

謝謝你~

我要留言

立即登入留言