防js代码注入_前端输入框如何防止代码注入

1. 什么是 JavaScript 注入攻击？

每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网站。客户可以访问网站并输入对产品的反馈信息。当客户提交反馈时，反馈信息重新显示在反馈页面上。

首先，我在某个输入框中输入js代码

<script type="text/javascript"> alert("我是javascript代码！");</script>

然后发送都后台，传送的数据是这样的
这里写图片描述

存到数据库是这样的
这里写图片描述
最后一步，就是存到数据库后，前台页面再去取数据的时候，就··········

执行你的js代码了。
我现在只是做测试例子，不是恶意攻击。外面的世界太复杂，说不定哪天你的网站就中奖了，所以还是得处理下这块。

利用jq做还是蛮方便的

        /*对html标签进行转义*/
        function htmlEncode(value){   //value为输入的值
            return $('<span/>').text(value).html();     //.这里的span标签没啥含义，换着其他标签也可以，div，p a都行
         /*对html标签进行反转义*/
        function htmlDecode(value){  
            return $('<span/>').html(value).text();     
直接上例子，看的清楚些。 
将` <script type="text/javascript"> alert("我是javascript代码！");</script>` 转义后的结果
 
 然后把转义后的字符串发给后台就好了。 
等到前端要取这条数据的时候，你要是显示 
 <script type="text/javascript"> alert("我是javascript代码！");</script> 
 这样的话，直接把后台返回的数据， 
var str = "&lt;script type="text/javascript"&gt; alert("我是javascript代码！");&lt;/script&gt;"
$("#container").html(str);// 直接html，不需要再反转义哈 
测试代码附上: 
<!DOCTYPE html>
    <title></title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    #textarea {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        display: block;
    .div {
        width: 800px;
        margin: 0 auto;
</style>
    <textarea id="textarea">    
    </textarea>
    <!-- <script type="text/javascript"> alert("我是javascript代码！");</script> --> 
    <div class="div">
        <button id="re">转义</button> <button id="re2">反转义</button>
        <h4>转义</h4>
        <p id="show"></p>
        <h4>反转义</h4>
        <p id="show2"></p>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    (function(){
        function htmlEncode(value){  
            return $('<span/>').text(value).html();        
        function htmlDecode(value){  
            return $('<span/>').html(value).text();     
        $("#re").click(function() {
            var $textarea = $("#textarea");
            var $show = $("#show");             
            var str = $textarea.val();
            str = htmlEncode(str);
            $show.text(str);
        $("#re2").click(function() {
            var $textarea = $("#textarea");
            var $show = $("#show2");
            var str = $textarea.val();
            str = htmlDecode(str);
            $show.text(str); //要注意这里哈。text()和html方法的不同
    })();
</script>
</body>
</html> 
一定要注意text方法和html方法的不同哈 
这里是 html标签转义和反转义 http://blog.csdn.net/wx11408115/article/details/78202243 
说得不对或不好的地方，请指教哈，相互学习。
                    1. 什么是 JavaScript 注入攻击？每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网站。客户可以访问网站并输入对产品的反馈信息。当客户提交反馈时，反馈信息重新显示在反馈页面上。举个例子首先， 我在某个输入框中输入js代码<script type="
				在页面中增加 JS 校验，对特殊符号进行替换，防止用户输入恶意代码导致 JS 注入问题。
在 web 开发中，对用户输入的内容做校验是必不可少的环节，不管是通过正则表达式对用户的输入进行校验，还是通过对特殊符号进行转义，均可达到目的。通过正则表达式校验，可能会导致用户体验差一点（因为用户不能自由输入~~），本文通过对 特殊符号进行转义 的方法来演示。
自定义添加角色，包括角色名称、角色...
				javascript可以作为黑客攻击网站的一种工具，其中注入js恶意脚本就是其中一种手段，那么下面我们来学习一下如何预防js的攻击。在学习阻止js攻击之前，我们先来了解一下什么是js代码攻击
Javascript注入攻击指的是通过网页地址后加javascript代码，影响系统运作，javascript注入漏洞能发生作用主要依赖两个关键的动作：一个是用户要能从界面中注入JavaScript到系统的内...
				这种攻击一般叫做xss攻击
有的时候页面中会有一个输入框，用户输入内容后会显示在页面中，类似于网页聊天应用。如果用户输入了一段js脚本，比如：&lt;script&gt;alert('test');&lt;/script&gt;,页面会弹出一个对话框，或者输入的脚本中有改变页面js变量的代码则会时程序异常或者达到跳过某种验证的目的。
攻击的危害 
攻击者把代码注入进了访问的页面，所以恶意脚本...
1、#将传入的数据都当成一个字符串，会对自动传入的数据加一个双引号。
如：where username=#{username}，如果传入的值是111,那么解析成sql时的值为where username="111", 如果传入的值是id，则解析成的sql为where username="id".　
2、$将传入的数据直接显示生成在sql中。
如：where us...
				百度百科解释MD5Message Digest Algorithm MD5（中文名为消息摘要算法第五版）为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护。该算法的文件号为RFC 1321（R.Rivest,MIT Laboratory for Computer Science and RSA Data Security Inc. April 1992）。 
MD5即Message-D
    &lt;div class="div-one"&gt;
        &lt;span&gt;有上下padding&lt;/span&gt;
        &lt;select class='select-one'&gt;
            &lt;option&gt;下拉菜单1&lt;/..
const password = 'password123';
const sql = 'SELECT * FROM users WHERE username = ? AND password = ?';
const values = [username, password];
connection.query(sql, values, (error, results, fields) => {
  if (error) throw error;
  console.log(results);
connection.end();
在上面的代码中，我们使用了参数化查询来查询用户名和密码是否匹配。注意，我们在 SQL 查询中使用了占位符 `?` 来代替变量，然后将变量的值存储在一个数组中，传递给 `connection.query()` 方法。这样可以防止 SQL 注入攻击，因为任何恶意的 SQL 代码都会被当作字符串来处理，而不是被执行。