每日 30 秒 ? 大家一起被捕吧

lbool 發布于2019-08-23 16:11 / 2126人閱讀

簡介

安全、注入攻擊、XSS

13歲女學生被捕：因發布 JavaScript 無限循環代碼。

這條新聞是來自 2019年3月10日 很多同學匆匆一瞥便滑動屏幕去看下一條消息了，并沒有去了解這段代碼是什么，怎么辦才能防止這個問題。事情發生后為了抗議日本警察采取的行動和將此行為定為犯罪的荒謬做法，東京開發者 Kimikazu Kato 在 GitHub 上創建了一個名為 Let"s Get Arrested（來逮捕我們） 的倉庫這也是本篇文章名的由來。

for ( ; ; ) {
window.alert("　∧_∧　ババババ
（ ?ω?)=つ≡つ
（っ ≡つ=つ
`/　　)
(ノΠＵ
何回閉じても無駄ですよ～ww
m9（＾Д＾）プギャー！！
　byソル (@0_Infinity_)")
}

是什么

女學生的這段代碼專業點的叫法是 JavaScript 注入攻擊。在日常開發中我們往往會從用戶那獲得各種輸入，例如搜索框、評論框、文章內容等等。大家一般都默認用戶會正常操作輸入文本，可是你有沒有想過用戶也可以輸入腳本，那么當頁面渲染這些腳本時便會被執行。

女學生的這段代碼只是簡單的使用了 alert 和 for(;;) 來無限循環輸出提示并不是算特別大的危害，使用 JavaScript 注入攻擊 甚至可以竊取來自其他用戶瀏覽器的 Cookies 值，如果其中的數據包含賬號密碼等敏感信息是很可怕的。

怎么辦

Vue.js 官方文檔在模板>插值>原始 HTML 中有下面這段話：

你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

其實現在很多開發框架都幫我們做到了這點只是很多人并沒有去思考為什么，Vue.js 在使用 {{}} 語法輸出文本的時候 html 相關的標簽中的 <、>、"、"、& 會被對應轉化為 <、>、'、"、& 來防止渲染內容時被 JavaScript 注入攻擊。

那如果使用的框架并沒有幫助實現這個函數時，可以利用正則和上述規則來實現一個轉化 html 的小工具：

const escapeHTML = str =>
    str.replace(/[&<>""]/g, tag => ({
        "&": "&",
        "<": "<",
        ">": ">",
        """: "'",
        """: """
    }[tag] || tag));

當然這里也給出恢復 html 的小工具：

const unescapeHTML = str =>
    str.replace(/&|<|>|'|"/g,tag => ({
        "&": "&",
        "<": "<",
        ">": ">",
        "'": """,
        """: """
    }[tag] || tag));

除了前端輸出時要進行處理，后端在存儲和輸出數據的時候也可以進行 html 的轉換。

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

云服務器 GPU云服務器大家一起 webrtc 實現大家一起寫云服務器開機要開30秒每日vps

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102777.html

每日 30 秒 ? 迴囬囘回到頂部

showImg(https://segmentfault.com/img/remote/1460000018795594?w=900&h=500); 簡介回到頁面頂部、兼容性、最佳寫法、滾動到任意處在大家一起被捕吧中剛寫了：在日常開發中我們往往會從用戶那獲得各種輸入，例如搜索框、評論框、文章內容等等。結果在 segmentfault 閱讀評論時看到了一個鏈接一點直接把我給滾動到頂部，頓...

huhud 2019-08-23 16:15 評論0 收藏0
每日 30 秒 ? 千里姻緣一線牽

簡介 SEO、鏈接、a 標簽、HTTP 狀態碼、link 標簽、alternate、canonical 唐朝有個小伙叫韋固喜歡在河邊玩，一天遇到一個老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢？老伯伯說我在給當婚人牽線，這對石頭是一對夫妻。小伙問道：那我的妻子是誰呢？老伯伯說：就是村頭看菜園子的女孩兒。小伙就好氣，本小伙玉樹臨風、風流倜儻怎么可以和菜園窮丑丫頭一起呢？第二...

Arno 2019-08-02 16:11 評論0 收藏0
每日 30 秒 ? 千里姻緣一線牽

簡介 SEO、鏈接、a 標簽、HTTP 狀態碼、link 標簽、alternate、canonical 唐朝有個小伙叫韋固喜歡在河邊玩，一天遇到一個老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢？老伯伯說我在給當婚人牽線，這對石頭是一對夫妻。小伙問道：那我的妻子是誰呢？老伯伯說：就是村頭看菜園子的女孩兒。小伙就好氣，本小伙玉樹臨風、風流倜儻怎么可以和菜園窮丑丫頭一起呢？第二...

baihe 2019-08-23 16:48 評論0 收藏0
每日 30 秒 ? H1 の小秘密

showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標簽、SEO、無障礙閱讀 ps: 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。在學習 HTML 標簽的時候，很多教程只告訴你怎么用而沒有講清楚是什么，讓我們一起從 h1 到 h6 開始重新認識 HTM...

blastz 2019-08-23 16:42 評論0 收藏0
每日 30 秒 ? 無障礙世界

showImg(https://segmentfault.com/img/remote/1460000018836440); 簡介無障礙、DOM 小細節、前端開發、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...

duan199226 2019-08-23 16:52 評論0 收藏0