155.XSS攻击原理

XSS攻击：

XSS(Cross Site Script)攻击叫做跨站脚本攻击，他的原理是用户使用具有XSS漏洞的网站的时候，向这个网站提交一些恶意代码，当用户在访问这个网站的某个页面的时候，这个恶意的代码就会被执行，从而来破坏网页的结构，获取用户的隐私信息等。

XSS攻击场景：

比如现在有一个发布帖子的入口，如果用户在提交数据的时候，提交一段js代码，比如，,然后网页在渲染的时候直接将该代码渲染了，那么就会在浏览器的窗口中弹出一个对话框显示Hello world!如果攻击者能成功的运行这段js代码，那么他就可以运行更多的js代码，进而操控我们的网页，这就会让我们的网页用户的信息等非常不安全。

XSS攻击防御：

1. 如果不需要显示一些富文本，那么在渲染用户提交的数据的时候，直接进行转义就可以了。在Django的模板中默认就是转义的。也可以把数据在存储到数据库之前，先转义再存储进去，这样以后在渲染的时候，即使不转义也不会有安全问题，示例代码如下：

from django.template.defaultfilters import escape
from .models import Comment
from django.http import HttpResponse

def add_comments(request):
    content = request.POST.get('content')
    <!--使用escape()函数，可以在数据存储到数据库之前先进行转义，再存储到数据库中，这样即使之后网页不进行转义，也没有关系-->
    escaped_content = escape(content)
    Comment.objects.create(content=escaped_content)
    return HttpResponse('success!')

2.如果对于用户提交上来的数据包含了一些富文本（比如：给字体设置颜色，字体加粗等）， 那么这时候我们在渲染的时候也要以富文本的形式进行渲染，就需要使用safe过滤器将其标记为安全的，这样才能显示富文本样式，但是这样又会存在一个问题，如果用户提交上来的数据攻击的代码呢？这时候再将其标记为安全的，肯定就不行了，示例代码如下：

<ul>
    {% for comment in comments %}
    <!--使用safe过滤器，将数据标记为安全的-->
        <li>{{ comment.id }} . {{ comment.comment|safe }}</li>
    {% endfor %}
</ul>

那么这个时候要怎样处理呢？ 这时候就可以指定某些标签是我们需要的（比如，span标签），而某些标签我们是不需要的（比如：script）。那么，我们在服务器处理这些数据的时候，就可以将这些数据的标签保留下来，把不需要的标签进行转义，或者是直接进行删除，这样就可以解决我们的问题了，这个方法是可行的，很多线上的网站也是这样的，在python中有一个库我们可以用来处理这个事情，sanitizer。

富文本字符串处理

（1）bleach库是用来清理包含html格式字符串的库，他也可以指定哪些标签需要保留，哪些标签是需要过滤的，也可以指定标签上哪些属性是可以保留的，哪些属性是不需要的，想要使用这个库，可以执行pip install bleach 命令进行安装。

（2）这个库最重要的一个方法是bleach.clean()方法，bleach.clean()示例代码如下：

@require_POST
def add_comments(request):
    # 从客户端获取数据
    comment = request.POST.get('comment')
    # bleach默认定义的一些标签，在原来的基础上添加一个img标签
    tags = ALLOWED_TAGS + ['img']
    # bleach默认定义的一些属性，在原来的基础上，在img标签上添加一个src属性
    <!--这里使用**ALLOWED_ATTRIBUTES,主要是将ALLOWED_ATTRIBUTESdict中的键值对打散开，之后，可以和'img':['src'],进行拼接成一个字典-->
    如果不打散的话就会形成{{}，'key':'value'}
    attributes = {**ALLOWED_ATTRIBUTES, 'img': ['src']}
    <!--选择符合bleach.clean()方法中tags和标签都符合的comment-->
    clean_data = bleach.clean(comment, tags=tags, attributes=attributes)
    # 保存到数据库中
    Comment.objects.create(comment=clean_data)
    return redirect(reverse('index'))

（1）tags:表示允许哪些标签。

（2）attribute：表示标签中允许哪些属性。

（3）ALLOWED_TAGS：这个变量是bleach默认定义的一些标签，如果不符合要求，可以对其进行增减或者是删除。

（4）ALLOWED_ATTRIBUTES：这个变量是bleach默认定义的一些属性，如果不符合要求，可以对其进行增减或者是删除。

在以上这个views.py中，为默认的网页加载标签中添加了一个img标签，并且为img标签添加一个属性src，同时在项目中创建一个js文件，示例代码如下：

window.onload = function () {
    var imgTag = document.createElement('img');
    imgTag.setAttribute('src', 'http://img.haote.com/upload/news/image/20170605/20170605144101_12960.jpg');
    document.body.appendChild(imgTag);
};

此时就可以在index.html中进行加载该js文件了，并且可以完美的加载img图片。