每日 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