BBS--后台管理页面，编辑文章,xss攻击

1

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())

 

2、文本编辑器

点击新建文章就会出现编辑框

 比如你写  hello 选择标题一    -----编辑器后台的模式为<h1>hello</h1>

 编辑器的引入和使用

http://kindeditor.net/down.php

 

下载之后放在静态文件夹下面

编辑器的使用方法看官方文档：

http://kindeditor.net/docs/usage.html

文本编辑器 kindeditor  本质上就是（css+js）
官网：
    http://kindeditor.net/demo.php
    http://kindeditor.net/doc.php

 

  <div class="content form-group">
                 <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
                 <div>
                     <textarea name="content" id="article_content" cols="30" rows="10"></textarea>
                 </div>
             </div>

在add_article.html中添加

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

    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create('#article_content',{
                        {#设置参数#}
                        width:"800",
                        height:"600",
                        resizeType:0,
                        uploadJson:"/upload/",
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                        },
                        filePostName:"upload_img"


                    });
            });
    </script>

 2.1编辑器参数设置

http://kindeditor.net/docs/option.html

2.2上传功能

  KindEditor.ready(function(K) {
                    window.editor = K.create('#article_content',{
                        {#设置参数#}
                        width:"800",
                        height:"600",
                        resizeType:0,
                        // 指定上传文件的路径
                        uploadJson:"/upload/",
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                        },
                        filePostName:"upload_img"


                    });
            });

2.3 在视图函数中写文件存在服务器的路径

只要是用户上传的文件最好放在media文件夹里面

 

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

防止别人输入脚本语言--对系统进行破坏

XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，
它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

 

3.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))

 3.2、bs4模块预防xss攻击

if request.method == "POST":
        title = request.POST.get("title")
        content = request.POST.get("content")

        # 防止xss攻击,过滤script标签
　　　　　# 还可以自定义过滤 敏感政治信息，色情，暴力，等文字信息
        soup=BeautifulSoup(content,"html.parser")
        for tag in soup.find_all():

            print(tag.name)
            if tag.name=="script":
　　　　　　　　　　# 删除
                tag.decompose()

        # 构建摘要数据,获取标签字符串的文本前150个符号

        desc=soup.text[0:150]+"..."

        models.Article.objects.create(title=title,desc=desc,content=str(soup), user=request.user)
        return redirect("/cn_backend/")

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

BBS+ BLOG系统（仿博客园）-原始代码