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

lbool 发布于2019-08-23 16:11 / 2052人阅读

简介

安全、注入攻击、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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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