資安這條路 02 - [基礎知識] HTML、JavaScript、HTTP - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 2

Security

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

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

12th鐵人賽

飛飛

團隊路上撿組員

2020-09-17 23:18:43

50225 瀏覽

分享至

前端 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');
"嘿，我是飛飛"