前端 input 输入框可能被攻击的几种方式及防范

程序员小肖

已于 2024-01-16 21:25:30 修改

阅读量1.4k

点赞数 22

文章标签：前端

于 2023-12-31 11:19:02 首次发布

本文链接：https://blog.csdn.net/qq_53058639/article/details/135314286

版权

前言

最近看到一篇文章，文章讲到输入框有被 注入代码攻击 的危险，自己做了一个小示例，发现确实有这样的情况。

示例

先来看小示例吧，一个最简单的留言功能，输入框输入信息，然后把信息插入页面：

页面效果

关键代码

<body>
	<div id="content"></div>
	<input id='input'>
	<input type="button" id='button' value="提交">
</body>
<script>
	const btn = document.getElementById('button');
	const myInput = document.getElementById('input');
	const content = document.getElementById('content');
	btn.onclick = ()=> {content.innerHTML = myInput.value
	};
</script>

代码注入输入框可能引发攻击的几种方式

HTML 代码注入输入框

在输入框中输入 <h1>哈哈，你的页面结构被我破坏了</h1>，然后提交，效果如下：

`<script>` 标签注入输入框

在输入框中输入 <script> alert(0); </script> ，然后提交。我们会发现没有弹窗，这里没有执行 JavaScript 程序的原因是：HTML 5 中不执行由 innerHTML 插入的 <script> 标签，但是在代码结构中可以看到被插入的代码片段。

其他不通过 `<script>` 标签执行 `JavaScript` 程序的代码注入输入框

不通过 <script> 标签执行 JavaScript 的方式还是会有被攻击的风险，比如 MDN 中举到的例子： <img src='x' onerror='alert(1)'> ，我们输入后可以看到程序是可以执行的：

防范

既然输入框有被攻击的风险，那我们就应该做好防范，好在 Vue 已经替我们最好了防范。如果没有使用 Vue ，也有合适的解决办法。

Vue 的防范原理

Vue 在动态插入元素的时候，会将标签的 < 、 > 等转换为转义字符 &lt 、 &gt 等来避免 JavaScript 程序的执行，使用 Vue 通过输入框插入代码后，插入的页面的代码会被转义如下：

未防范的情况下，插入页面的代码如下：

原生 JavaScript 防范方法

我们可以使用和 Vue 同样的防范方法，将 < 、 > 、& 、 ' 、 " 等符号替换成转义字符来规避风险，这里使用 zhangxiangliang 同学在《每日 30 秒 ⏱ 大家一起被捕吧》文章中写的方法来做处理：

// 将输入框的字符串通过正则，将符号替换成转义字符
const escapeHTML = str =>str.replace(/[&<>'"]/g, tag => ({'&': '&amp;','<': '&lt;','>': '&gt;',"'": '&#39;','"': '&quot;'}[tag] || tag));

总结

虽然有些攻击的方式，在控制台编辑后也能让页面错乱，但如果我们有规避风险方法，还是不要给工作和公司带来麻烦比较好。

参考资料

每日 30 秒 ⏱ 大家一起被捕吧： juejin.cn/post/684490…MDN element.innerHTML：developer.mozilla.org/zh-CN/docs/…## 最后
从时代发展的角度看，网络安全的知识是学不完的，而且以后要学的会更多，同学们要摆正心态，既然选择入门网络安全，就不能仅仅只是入门程度而已，能力越强机会才越多。

因为入门学习阶段知识点比较杂，所以我讲得比较笼统，大家如果有不懂的地方可以找我咨询，我保证知无不言言无不尽，需要相关资料也可以找我要，我的网盘里一大堆资料都在吃灰呢。

干货主要有：

①1000+CTF历届题库（主流和经典的应该都有了）

②CTF技术文档（最全中文版）

③项目源码（四五十个有趣且经典的练手项目及源码）

④ CTF大赛、web安全、渗透测试方面的视频（适合小白学习）

⑤ 网络安全学习路线图（告别不入流的学习）

⑥ CTF/渗透测试工具镜像文件大全

⑦ 2023密码学/隐身术/PWN技术手册大全

如果你对网络安全入门感兴趣，那么你需要的话可以点击这里👉网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

扫码领取

程序员小肖

关注

22
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
前端 input 输入框可能被攻击的几种方式及防范

最近看到一篇文章，文章讲到输入框有被注入代码攻击的危险，自己做了一个小示例，发现确实有这样的情况。虽然有些攻击的方式，在控制台编辑后也能让页面错乱，但如果我们有规避风险方法，还是不要给工作和公司带来麻烦比较好。
复制链接

扫一扫