每日 30 秒 ⏱ 你們一塊兒被捕吧

簡介

安全、注入攻擊、XSS

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

這條新聞是來自 2019年3月10日 不少同窗匆匆一瞥便滑動屏幕去看下一條消息了，並無去了解這段代碼是什麼，怎麼辦才能防止這個問題。事情發生後爲了抗議日本警察採起的行動和將此行爲定爲犯罪的荒謬作法，東京開發者 Kimikazu Kato 在 GitHub 上建立了一個名爲 Let's Get Arrested（來逮捕咱們） 的倉庫這也是本篇文章名的由來。

for ( ; ; ) {
window.alert(" ∧_∧ ババババ\n（ ・ω・)=つ≡つ\n（っ ≡つ=つ\n`/  )\n(ノΠＵ\n何回閉じても無駄ですよ～ww\nm9（＾Д＾）プギャー！！\n 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 => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    }[tag] || tag));
複製代碼

固然這裏也給出恢復 html 的小工具：

const unescapeHTML = str =>
    str.replace(/&|<|>|'|"/g,tag => ({
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&#39;': "'",
        '&quot;': '"'
    }[tag] || tag));
複製代碼

除了前端輸出時要進行處理，後端在存儲和輸出數據的時候也能夠進行 html 的轉換。忽然發現我如今也快成爲標題黨了 XDD ？

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop