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

前言

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

示例

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

页面效果

关键代码

<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>，而后提交，效果以下：java

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

在输入框中输入 <script> alert(0); </script> ，而后提交。
咱们会发现没有弹窗，这里没有执行 JavaScript 程序的缘由是：HTML 5 中不执行由 innerHTML 插入的 <script> 标签，可是在代码结构中能够看到被插入的代码片断。 markdown

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

不经过 <script> 标签执行 JavaScript 的方式仍是会有被攻击的风险，好比 MDN 中举到的例子： <img src='x' onerror='alert(1)'> ，咱们输入后能够看到程序是能够执行的：oop

防范

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

Vue 的防范原理

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

未防范的状况下，插入页面的代码以下：code

原生 JavaScript 防范方法

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

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

总结

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

参考资料

每日 30 秒 ⏱ 你们一块儿被捕吧： juejin.cn/post/684490…
MDN element.innerHTML：developer.mozilla.org/zh-CN/docs/…

前言

示例