簡(jiǎn)介
安全、注入攻擊、XSS
13歲女學(xué)生被捕:因發(fā)布 JavaScript 無限循環(huán)代碼。
這條新聞是來自 2019年3月10日 很多同學(xué)匆匆一瞥便滑動(dòng)屏幕去看下一條消息了,并沒有去了解這段代碼是什么,怎么辦才能防止這個(gè)問題。事情發(fā)生后為了抗議日本警察采取的行動(dòng)和將此行為定為犯罪的荒謬做法,東京開發(fā)者 Kimikazu Kato 在 GitHub 上創(chuàng)建了一個(gè)名為 Let"s Get Arrested(來逮捕我們) 的倉(cāng)庫(kù)這也是本篇文章名的由來。
for ( ; ; ) { window.alert(" ∧_∧ ババババ ( ?ω?)=つ≡つ (っ ≡つ=つ `/ ) (ノΠU 何回閉じても無駄ですよ~ww m9(^Д^)プギャー!! byソル (@0_Infinity_)") }是什么
女學(xué)生的這段代碼專業(yè)點(diǎn)的叫法是 JavaScript 注入攻擊。在日常開發(fā)中我們往往會(huì)從用戶那獲得各種輸入,例如搜索框、評(píng)論框、文章內(nèi)容等等。大家一般都默認(rèn)用戶會(huì)正常操作輸入文本,可是你有沒有想過用戶也可以輸入腳本,那么當(dāng)頁(yè)面渲染這些腳本時(shí)便會(huì)被執(zhí)行。
女學(xué)生的這段代碼只是簡(jiǎn)單的使用了 alert 和 for(;;) 來無限循環(huán)輸出提示并不是算特別大的危害,使用 JavaScript 注入攻擊 甚至可以竊取來自其他用戶瀏覽器的 Cookies 值,如果其中的數(shù)據(jù)包含賬號(hào)密碼等敏感信息是很可怕的。
怎么辦Vue.js 官方文檔在 模板>插值>原始 HTML 中有下面這段話:
你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn),因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值,絕不要對(duì)用戶提供的內(nèi)容使用插值。
其實(shí)現(xiàn)在很多開發(fā)框架都幫我們做到了這點(diǎn)只是很多人并沒有去思考為什么,Vue.js 在使用 {{}} 語(yǔ)法輸出文本的時(shí)候 html 相關(guān)的標(biāo)簽中的 <、>、"、"、& 會(huì)被對(duì)應(yīng)轉(zhuǎn)化為 <、>、'、"、& 來防止渲染內(nèi)容時(shí)被 JavaScript 注入攻擊。
那如果使用的框架并沒有幫助實(shí)現(xiàn)這個(gè)函數(shù)時(shí),可以利用正則和上述規(guī)則來實(shí)現(xiàn)一個(gè)轉(zhuǎn)化 html 的小工具:
const escapeHTML = str => str.replace(/[&<>""]/g, tag => ({ "&": "&", "<": "<", ">": ">", """: "'", """: """ }[tag] || tag));
當(dāng)然這里也給出恢復(fù) html 的小工具:
const unescapeHTML = str => str.replace(/&|<|>|'|"/g,tag => ({ "&": "&", "<": "<", ">": ">", "'": """, """: """ }[tag] || tag));
除了前端輸出時(shí)要進(jìn)行處理,后端在存儲(chǔ)和輸出數(shù)據(jù)的時(shí)候也可以進(jìn)行 html 的轉(zhuǎn)換。
一起成長(zhǎng)在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。
如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。
如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/102777.html
showImg(https://segmentfault.com/img/remote/1460000018795594?w=900&h=500); 簡(jiǎn)介 回到頁(yè)面頂部、兼容性、最佳寫法、滾動(dòng)到任意處 在 大家一起被捕吧 中剛寫了: 在日常開發(fā)中我們往往會(huì)從用戶那獲得各種輸入,例如搜索框、評(píng)論框、文章內(nèi)容等等。 結(jié)果在 segmentfault 閱讀評(píng)論時(shí)看到了一個(gè)鏈接一點(diǎn)直接把我給滾動(dòng)到頂部,頓...
簡(jiǎn)介 SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical 唐朝有個(gè)小伙叫韋固喜歡在河邊玩,一天遇到一個(gè)老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢?老伯伯說我在給當(dāng)婚人牽線,這對(duì)石頭是一對(duì)夫妻。小伙問道:那我的妻子是誰呢?老伯伯說:就是村頭看菜園子的女孩兒。 小伙就好氣,本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢?第二...
簡(jiǎn)介 SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical 唐朝有個(gè)小伙叫韋固喜歡在河邊玩,一天遇到一個(gè)老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢?老伯伯說我在給當(dāng)婚人牽線,這對(duì)石頭是一對(duì)夫妻。小伙問道:那我的妻子是誰呢?老伯伯說:就是村頭看菜園子的女孩兒。 小伙就好氣,本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢?第二...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡(jiǎn)介 heading 標(biāo)簽、SEO、無障礙閱讀 ps: 內(nèi)容有點(diǎn)多,本來只想講一個(gè)點(diǎn),但是關(guān)聯(lián)性太強(qiáng)了,所以辛苦大家了。 在學(xué)習(xí) HTML 標(biāo)簽的時(shí)候,很多教程只告訴你 怎么用 而沒有講清楚 是什么,讓我們一起從 h1 到 h6 開始重新認(rèn)識(shí) HTM...
showImg(https://segmentfault.com/img/remote/1460000018836440); 簡(jiǎn)介 無障礙、DOM 小細(xì)節(jié)、前端開發(fā)、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長(zhǎng)往往被縮寫為 a11y 其中 11 指的是中間有11個(gè)字母。 無障礙指的是在使用過程中,不管什么類型的用戶都可以正常使用。生活中最常見的...
閱讀 3686·2021-11-12 10:36
閱讀 3831·2021-09-22 15:48
閱讀 3542·2019-08-30 15:54
閱讀 2592·2019-08-29 16:44
閱讀 2363·2019-08-29 16:08
閱讀 2408·2019-08-29 16:06
閱讀 1280·2019-08-29 15:21
閱讀 3171·2019-08-29 12:39