KindEditor

 前端插件：CKEditor,TinyEditor,UEEditor,KindEditor
 1.  安装： pip3 install beautifulsoup4
 2.  下载： http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip 
     参考：http://www.cnblogs.com/wupeiqi/articles/6307554.html
     官网：http://kindeditor.net/docs/option.html
   kindeditor.js   没有引用plugins中的外部插件
   kindeditor-all.js   引用了plugins中的外部插件


requests.post(
   url='http://127.0.0.1:8000/wangzhe.html',
   data={
    'username':'xxxxxxxx'
   }
  )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form method="POST" action="/wangzhe.html" novalidate>
        {% csrf_token %}
        <p>
            文章标题
            {{ obj.title }}
        </p>

        <div>
            <div>文章内容</div>
            <div>
                {{ obj.content }}
            </div>
        </div>
        <input type="submit" value="提交" />
    </form>
    <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
    <!--导入kindeditor插件-->
    <script>
        KindEditor.create("#i1",{   //将#i1的标签变成副文本编辑框
            width: "700px",//宽度可以百分比
            height: "300px",
            items：[xxxx] //显示工具
            designMode：false，
            noDisableItems:[xxxx]//禁止使用的工具，配合designMode使用
            htmlTags:{xx}  //前端过滤关键词
            resizeType:1,//2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。默认2，
            uploadJson: '/upload_img.html',  //上传文件的url
            extraFileUploadParams:{  //上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
                "csrfmiddlewaretoken":"{{ csrf_token }}"
            }
            filePostName：fafafa,//上传文件的句柄
        })
    </script>

</body>
</html>

CONTENT = ""
from app01.forms import ArticleForm
def wangzhe(request):
    if request.method == "GET":
        obj = ArticleForm()
        return render(request,'wangzhe.html',{'obj':obj})
    else:
        obj = ArticleForm(request.POST)
        if obj.is_valid():
            content = obj.cleaned_data['content']
            global CONTENT
            CONTENT = content
            print(content)
            return HttpResponse('...')


def see(request):

    return render(request,'see.html',{'con': CONTENT})

    
    
#KindEditor上传文件    
def upload_img(request):
    import os
    upload_type = request.GET.get('dir')   #获取上传文件的类型
    file_obj = request.FILES.get('imgFile')
    file_path = os.path.join('static/imgs',file_obj.name)
    with open(file_path,'wb') as f:
        for chunk in file_obj.chunks():
            f.write(chunk)
    
    #返回这个字典，能实现文件的预览
    dic = {
        'error': 0,
        'url': '/' + file_path,
        'message': '错误了...'
    }
    import json
    return HttpResponse(json.dumps(dic))

防止xss注入：

content = """
<p id='i1' a='123' b='999'>
    <script>alert(123)</script>
</p>

<p id='i2'>
    <div>
        <p>asdfasdf</p>
    </div>
    <img id='i3' src="/static/imgs\6.jpg" alt="" />
</p>
"""

# pip3 install beautifulsoup4
from bs4 import BeautifulSoup   #处理html标签的模块

valid_tag = {   #标签白名单
    'p': ['class','id'],
    'img':['src'],
    'div': ['class']
}

soup = BeautifulSoup(content,'html.parser')   #html.parser内置的解析器，将html标签解析为对象

tags = soup.find_all(name = "P")  #查找所有的p标签
tags = soup.find_all()  #遍历所有的标签
for tag in tags:
    if tag.name not in valid_tag:   #tag.name  标签名
        tag.clear()   #清空标签内容
         tag.decompose()   #删除标签
    if tag.attrs:          #tag.attrs是字典类型    
        for k in list(tag.attrs.keys()): # {id:'i1',a=123,b=999}
            if k not in valid_tag[tag.name]:
                del tag.attrs[k]   #删掉不符合白名单属性的属性
content_str = soup.decode()   #soup.decode()  将对象变成字符串
print(content_str)
# v = soup.find(name='p',attrs={'id':'i2'})   #以属性和标签类型找标签，可以分开用
# print(v)

知识点

from bs4 import BeautifulSoup

def xss(old):
    valid_tag = {
        'p': ['class','id'],
        'img':['src'],
        'div': ['class']
    }

    soup = BeautifulSoup(old,'html.parser')   #html.parser内置的解析器，将html标签解析为对象

    tags = soup.find_all()
    for tag in tags:
        if tag.name not in valid_tag:
            tag.decompose()
        if tag.attrs:
            for k in list(tag.attrs.keys()): # {id:'i1',a=123,b=999}
                if k not in valid_tag[tag.name]:
                    del tag.attrs[k]
    content_str = soup.decode()
    return content_str

封装的xss过滤插件

class ArticleForm(Form):

    title = fields.CharField(max_length=64)

    content = fields.CharField(
        widget=widgets.Textarea(attrs={'id':'i1'})
    )

    def clean_content(self):
        old = self.cleaned_data['content']
        from utils.xss import xss

        return xss(old)

后端引入应用

posted @ 2017-07-20 00:09 shy车队破风手阅读(171) 评论(0) 收藏举报

关灯吃面

KindEditor

KindEditor

防止xss注入：

公告