前端input输⼊框可能被攻击的⼏种⽅式及防范
前⾔
最近看到⼀篇⽂章，⽂章讲到输⼊框有被 注⼊代码攻击 的危险，⾃⼰做了⼀个⼩⽰例，发现确实有这样的情况。
⽰例
先来看⼩⽰例吧，⼀个最简单的留⾔功能，输⼊框输⼊信息，然后把信息插⼊页⾯：
页⾯效果
关键代码
<body>
<div id="content"></div>
<input id='input'>
<input type="button" id='button' value="提交">
</body>
<script>
const btn = ElementById('button');
const myInput = ElementById('input');
const content = ElementById('content');
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 在动态插⼊元素的时候，会将标签的 < 、 > 等转换为转义字符 < 、 > 等来避免 JavaScript 程序的执⾏，使⽤ Vue 通过输⼊框插⼊代码后，插⼊的页⾯的代码会被转义如下：
未防范的情况下，插⼊页⾯的代码如下：
原⽣ JavaScript 防范⽅法
我们可以使⽤和 Vue 同样的防范⽅法，将 < 、 > 、& 、 ' 、 " 等符号替换成转义字符来规避风险，这⾥使⽤ 同学在 ⽂章中写的⽅法来做处理：
// 将输⼊框的字符串通过正则，将符号替换成转义字符
const escapeHTML = str =>
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag));
复制代码
总结
虽然有些攻击的⽅式，在控制台编辑后也能让页⾯错乱，但如果我们有规避风险⽅法，还是不要给⼯作和公司带来⿇烦⽐较好。
参考资料
每⽇ 30 秒  ⼤家⼀起被捕吧：
input框禁止输入
MDN element.innerHTML：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。