防御XSS攻击-encode用户输入内容的重要性

时间：2023-01-16 11:14:50

一、开场先科普下XSS

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

二、直接上代码实例

 在线演示：https://wall-wxk.github.io/blogDemo/2017/01/19/noEncode.html

 

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>encode防止xss攻击</title>

</head>

<body>

	<input type="text" id="myInput" />

	<button onclick="toSubmit();">提交</button>

   	<p id="myText" class="demo">hello world!</p>

   	<script type="text/javascript">

   		function toSubmit(){

   			var myText = document.getElementById("myText"),

   				myInput = document.getElementById("myInput"),

   				inputValue = myInput.value;

   			myText.innerHTML = inputValue;

   		}

   	</script>

</body>

</html>

防御XSS攻击-encode用户输入内容的重要性

实例解释：这是网站生产环境抽离出来的简化代码。在公司的产品中，有很多输入框提供给用户输入一些自定义字符串。方便用户的同时，也会招惹一些黑客过来捣乱。最简单的就是xss注入攻击。

比如上面的实例，我在输入框直接输入内容 <h1>wall</h1>，得到的结果如下：

防御XSS攻击-encode用户输入内容的重要性

这种结果，肯定不是产品所想要的。

进一步鼓捣，输入内容 <script>alert('wall');</script>

防御XSS攻击-encode用户输入内容的重要性

如果这段字符串是保存在数据库里。那么下次用户刷新这个页面，alert方法将会被执行，也就是会弹出 wall 这个信息。

因为能插入js代码，那这个想象空间就很大了，几乎很多事都能干。

最简单的就是用js获取访问当前网站的用户的document.cookie，然后ajax发送到信息收集网站，那么用户就等于在裸泳了。

三、解决方式-对字符串进行转义后再输出

  • 1.在存储进数据库的时候，对字符串进行encode

    这种方式可以解决一部分问题，但是不够灵活。因为字符串有可能输出在html，也有可能输出在JavaScript代码中。
  • 2.在使用字符串的时候进行encode

    这种方式是根据使用场景，在前端输出时，按需求进行encode，灵活应对。

四、直接上encode方法

function encodeHtml(html){

  return html && html.replace ?

    (

      html.replace(/&/g, "&amp;") //转换&符号

      .replace(/ /g, "&nbsp;") // 转换空格

      .replace(/\b&nbsp;+/g, " ") // 转换多个空格为单个空格

      .replace(/</g, "&lt;") // 转换小于符号

      .replace(/>/g, "&gt;") // 转换大于符号

      .replace(/\\/g, "\") // 转换斜杠符号

      .replace(/\'/g, "'") // 转换单引号

      .replace(/\"/g, "&quot;") // 转换双引号

      .replace(/\n/g, "<br/>") // 转换换行符号

      .replace(/\r/g, "") //转换回车符号

    )

    : html;

}

代码的作用是把对应的特殊符号，转换为转义字符，而不是直接插入html中。

这样，不管用户输入什么内容，都可以直接转换成字符串输出在html中。

比如再次输入内容 <script>alert('wall');</script>，得到的结果如下：

防御XSS攻击-encode用户输入内容的重要性

perfect！直接把xss漏洞给堵上了！

五、科普下转义字符

防御XSS攻击-encode用户输入内容的重要性

更多内容，可以查看HTML转义字符表

 在线演示：https://wall-wxk.github.io/blogDemo/2017/01/19/xss.html

 

最后，附上完整的测试代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<title>encode防止xss攻击</title>

</head>

<body>

    <input type="text" id="myInput" />

    <button onclick="toSubmit();">提交</button>

       <p id="myText" class="demo">hello world!</p>

       <script type="text/javascript">

           function toSubmit(){

               var myText = document.getElementById("myText"),

                   myInput = document.getElementById("myInput"),

                   inputValue = myInput.value;

               myText.innerHTML = encodeHtml(inputValue);

           }

           function encodeHtml(html){

            return html && html.replace ?

              (

                html.replace(/&/g, "&amp;") //转换&符号

                .replace(/ /g, "&nbsp;") // 转换空格

                .replace(/\b&nbsp;+/g, " ") // 转换多个空格为单个空格

                .replace(/</g, "&lt;") // 转换小于符号

                .replace(/>/g, "&gt;") // 转换大于符号

                .replace(/\\/g, "\") // 转换斜杠符号

                .replace(/\'/g, "'") // 转换单引号

                .replace(/\"/g, "&quot;") // 转换双引号

                .replace(/\n/g, "<br/>") // 转换换行符号

                .replace(/\r/g, "") //转换回车符号

              )

              : html;

           }

       </script>

</body>

</html>

原文入口：http://www.jianshu.com/p/6fa7622767c5

防御XSS攻击-encode用户输入内容的重要性的更多相关文章

  1. 认识与防御XSS攻击

    什么是xss攻击? XSS,即(Cross Site Scripting)中文名称为“跨站脚本攻击”.XSS的重点不在于跨站攻击而在于脚本攻击.攻击者可以利用 web应用的漏洞或缺陷之处,向页面注入恶 ...

  2. WEB安全 - 认识与防御XSS攻击

    目录 什么是xss攻击? XSS的危害 XSS攻击分类 xss攻击示例 反射型攻击 - 前端URL参数解析 反射型攻击 - 后端URL参数解析 注入型攻击 - 留言评论 如何规避xss攻击? 总结 什 ...

  3. 防御XSS攻击的七条原则

    本文将会着重介绍防御XSS攻击的一些原则,需要读者对于XSS有所了解,至少知道XSS漏洞的基本原理,如果您对此不是特别清楚,请参考这两篇文章:<Stored and Reflected XSS ...

  4. Jsoup代码解读之六-防御XSS攻击

    Jsoup代码解读之八-防御XSS攻击 防御XSS攻击的一般原理 cleaner是Jsoup的重要功能之一,我们常用它来进行富文本输入中的XSS防御. 我们知道,XSS攻击的一般方式是,通过在页面输入 ...

  5. 8&period; 博客系统&vert; 富文本编辑框和基于bs4模块防御xss攻击

    views.py @login_required def cn_backend(request): article_list = models.Article.objects.filter(user= ...

  6. 拦截过滤防御XSS攻击 -- Struts2&period;3 以及 2&period;5 的解决方式

    使用Struts2框架开发的后台在防御XSS攻击的时候很多方式都不能用,因为Struts2对请求进行的二次封装有区别.以下针对Struts2的XSS攻击进行拦截过滤防御解决: Struts2.3 本方 ...

  7. 微信小程序 获得用户输入内容

    在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content&quo ...

  8. Asp&period;net防御XSS攻击组件库

    一.AntiXss 翻看mvc4高级编程,偶看到作者强烈推荐使用AntiXss防御XSS攻击,收集资料看下. 目前类库已融入到.netframework中,类库主页不再更新. 使用方法:使用Nuget ...

  9. c&plus;&plus;之 scanf 接收用户输入内容

    该代码全部在Visual Studio 2015中编写,有关VS2015的安装后期在写相关的博客 scanf 介绍 在程序开发中,有时候需要通过获取用户输入的数据,进行对应的操作,scanf就是用来接 ...

随机推荐

  1. 重写Oracle的wm&lowbar;concat函数，自定义分隔符、排序

    oracle中,wm_concat函数是一个聚合函数,和mysql中的group_concat函数类似,不过group_concat函数比较强大,可以定义分隔符和排序,当然所谓强大是相对的,这里假使我 ...

  2. jquery Ajax获取本地json 以及xml文件

    $(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.get(&quot ...

  3. android SQLite使用SQLiteOpenHelper类对数据库进行操作

    android SQLite使用SQLiteOpenHelper类对数据库进行操作 原文: http://byandby.iteye.com/blog/835580

  4. UnrealEngine4 PBR Shading Model 概述

      虽然是概述,但内容并还是有些多,写上一篇PBR概念概述后,也在考虑怎么继续下去,最后还是觉得先多写一些东西再慢慢总结,所以还是尽量把这些年PBR相关的Paper精粹沉淀下来吧.     因为UE4 ...

  5. CreateProcessW记录

    STARTUPINFO si = { sizeof(si) };  PROCESS_INFORMATION pi; si.dwFlags = STARTF_USESHOWWINDOW;  si.wSh ...

  6. 在Centos7上安装漏洞扫描软件Nessus

    本文摘要:简单叙述了在Centos7上安装Nessus扫描器的过程   Nessus 是目前全世界最多人使用的系统漏洞扫描与分析软件,Nessus的用户界面是基于Web界面来访问Nessus漏洞扫描器 ...

  7. css格式化排版

    1,文字排版--字体 语法: body{font-family:"Microsoft Yahei";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体 ...

  8. C&num;获取时间戳的方法

    获取时间戳的方法 /// <summary>        /// 获取时间戳        /// </summary>        /// <param name= ...

  9. quick-cocos2d-x android返回键监听并实现原生退出对话框

    这两天最终闲了一下,就顺手又把quick捡起来又学了学,一直都认为quick比cocos2dx那套lua绑定要方便很多,今天试了下android返回键的监听,还是挺好弄的,所以就有了这篇. 首先说明一 ...

  10. ADALINE模型

    ADALINE模型即自适应线性单元(Adaptive Linear Neuron),主要用于信号处理中的自适应滤波.预测和模式识别.其结构图如下 输入向量X=(x0,x1,x2,...,xn)T每个输 ...

相关文章