8 功能6：后台管理页面，编辑文章,xss攻击

2021-08-18 05:09:29

1、后台管理页面之文本编辑

    # 后台管理url

    re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'),

    re_path(r'^cn_backend/add_article/$', views.add_article, name='add_articles'),

view视图

from django.shortcuts import render, HttpResponse, redirect

from blog import models

from django.contrib.auth.decorators import login_required  # 用户登录证装饰器

@login_required

def cn_backend(request):

    """后台管理页面"""

    article_list = models.Article.objects.filter(user=request.user)

    return render(request, "backend/backend.html", locals())

@login_required

def add_article(request):

    if request.method == "POST":

        title = request.POST.get('title')

        content = request.POST.get('content')

        models.Article.objects.create(title=title,content=content, user=request.user)

        return redirect("/cn_backend/")

    return render(request, "backend/add_article.html", locals())

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">

    <style type="text/css">

        .glyphicon-comment {

            vertical-align: -1px;

        }

    </style>

</head>

<body>

<div class="site-header">

    <nav class="navbar navbar-inverse">

        <div class="container-fluid">

            <div class="navbar-header">

                <a class="navbar-brand" href="#">

                    后台管理

                </a>

            </div>

        </div>

    </nav>

</div>

<div class="site-body">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-2 col-lg-offset-1">

                <div class="panel panel-default">

                    <div class="panel-heading">操作</div>

                    <div class="panel-body">

                        <a href="/cn_backend/add_article/">添加文章</a>

                    </div>

                </div>

            </div>

            <div class="col-md-8">

                <div>

                    <ul class="nav nav-tabs">

                        <li role="presentation" class="active"><a href="#">文章</a></li>

                        <li role="presentation"><a href="#">日记</a></li>

                        <li role="presentation"><a href="#">随笔</a></li>

                        <li role="presentation"><a href="#">相册</a></li>

                    </ul>

                </div>

                <div class="tab-content">

                        <div class="article_list small">

                            <table class="table table-hover table-striped">

                                <thead>

                                <th>标题</th>

                                <th>评论数</th>

                                <th>点赞数</th>

                                <th>操作</th>

                                <th>操作</th>

                                </thead>

                                <tbody>

                                {% for article in article_list %}

                                    <tr>

                                        <td>{{ article.title }}</td>

                                        <td>{{ article.comment_count }}</td>

                                        <td>{{ article.up_count }}</td>

                                        <td><a href="">编辑</a></td>

                                        <td><a href="">删除</a></td>

                                    </tr>

                                {% endfor %}

                                </tbody>

                            </table>

                        </div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

backend.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">

    <style type="text/css">

        .glyphicon-comment {

            vertical-align: -1px;

        }

    </style>

</head>

<body>

<div class="site-header">

    <nav class="navbar navbar-inverse">

        <div class="container-fluid">

            <div class="navbar-header">

                <a class="navbar-brand" href="/cn_backend/">

                    后台管理

                </a>

            </div>

        </div>

    </nav>

</div>

<div class="site-body">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-2 col-lg-offset-1">

                <div class="panel panel-default">

                    <div class="panel-heading">操作</div>

                    <div class="panel-body">

                        <a href="/cn_backend/add_article/">添加文章</a>

                    </div>

                </div>

            </div>

            <div class="col-md-8">

                <div>

                    <ul class="nav nav-tabs">

                        <li role="presentation" class="active"><a href="#">文章</a></li>

                        <li role="presentation"><a href="#">日记</a></li>

                        <li role="presentation"><a href="#">随笔</a></li>

                        <li role="presentation"><a href="#">相册</a></li>

                    </ul>

                </div>

                <div>

                    <form action="" method="post">

                        {% csrf_token %}

                        <div class="add_article">

                            <div class="alert-danger text-center">添加文章</div>

                            <div class="add_article_region">

                                <div class="title form-group">

                                    <label for="">标题</label>

                                    <div>

                                        <input type="text" name="title">

                                    </div>

                                </div>

                                <div class="content form-group">

                                    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>

                                    <div>

                                        <textarea name="content" id="article_content" cols="30" rows="10"></textarea>

                                    </div>

                                </div>

                                <input type="submit" class="btn btn-default">

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

add article.html

2、富文本编辑框KindEditor

1、编辑器的引入

官网 http://kindeditor.net/demo.php

在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">

&lt;strong&gt;HTML内容&lt;/strong&gt;

</textarea>

在该HTML页面添加以下脚本。

2、参数设置

<script>

    KindEditor.ready(function (K) {

        window.editor = K.create('#editor_id', {

            width: "800",

            height: "600",

            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

                'formatblock', 'fontname', 'fontsize'

                ],

            resizeType:1

        });

    });

</script>

3、上传功能

1）如何上传

2）csrf

3）指定上传的文件名称

4) 文件存入服务端

5)图片预览功能

4、富文本框代码

url

   # 富文本编辑框 图片上传

    re_path(r'^upload/$', views.upload, name='upload'),

views视图

def upload(request):

    """上传文件"""

    print(request.FILES)

    # 获取文件name

    img = request.FILES.get("upload_img")

    print(img.name)

    # 文件存取路径

    import os

    from cnblog import settings

    img_path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img.name)

    # 图片读取，写入到服务端

    with open(img_path, "wb") as f:

        for line in img:

            f.write(line)

    # 文件预览功能

    response = {

        "error":0,

        "url":"/media/add_article_img/%s" % img.name

    }

    import json

    return HttpResponse(json.dumps(response))

模板层的富文本编辑框

                              <div class="content form-group">

                                    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>

                                    <div>

                                        <textarea id="editor_id" name="content"

                                                  style="width:700px;height:300px;"></textarea>

                                    </div>

                                </div>

JavaScript代码

<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>

<script src="/static/js/jquery-3.2.1.min.js"></script>

<script>

    KindEditor.ready(function (K) {

        window.editor = K.create('#editor_id', {

            width: "800",

            height: "600",

            //  自定制

            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',

                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

                'anchor', 'link', 'unlink', '|', 'about'

            ],

            // textarea可以拉伸

            resizeType: 1,

            //文件上传的处理视图

            uploadJson: "/upload/",

            //文件上传的参数

            extraFileUploadParams: {

                "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),

            },

            // 文件上传的name

            filePostName:"upload_img",      

        });

    });

</script>

3、文章摘要的保存

1、只去前150个字符，{{ article.desc|safe }}

2、未闭合的标签

4、bs的简单应用,xss攻击

1、BeautifulSoup

对于HTML/XML数据的筛选，BeautifulSoup也是比较常用且使用简单的技术，

BeautifulSoup是一种非常优雅的专门用于进行HTML/XML数据解析的一种描述语言，可以很好的分析和筛选HTML/XML这样的标记文档中的指定规则数据
在数据筛选过程中其基础技术是通过封装HTML DOM树实现的一种DOM操作，通过加载网页文档对象的形式，从文档对象树模型中获取目标数据

from bs4 import BeautifulSoup

s = "<h1>hello</h1> <span>world</sapn> <script>alert(1111)</script>"

soup = BeautifulSoup(s, "html.parser")      # 按照html格式过滤

print(soup.text)        # 过滤掉标签，只剩下text文本

print(soup.find_all())  # 按标签进行截断

for tag in soup.find_all():

    print(tag.name)     # 打印标签的name

    if tag.name == "script":

        tag.decompose()     # Recursively destroys the contents of this tree.

print(str(soup))

2、bs4模块预防xss攻击

@login_required

def add_article(request):

    if request.method == "POST":

        title = request.POST.get('title')

        content = request.POST.get('content')

        # 过滤

        from bs4 import BeautifulSoup

        soup = BeautifulSoup(content,  "html.parser")

        for tag in soup.find_all():

            if tag.name == "script":

                tag.decompose()

        # 获取文本，进行截取，赋值给desc

        desc = soup.text[0:150]

        models.Article.objects.create(title=title,content=str(soup),desc=desc, user=request.user)

        return redirect("/cn_backend/")

    return render(request, "backend/add_article.html", locals())

码农公寓