kindedit编辑器和xxs攻击防御（BeautifulSoup）的简单使用

时间 2019-11-10

标签 kindedit 编辑器 xxs 攻击防御 beautifulsoup 简单使用栏目系统网络繁體版

原文原文链接

1、kindedit编辑器html

就是上面这样的编辑输入文本的一个编辑器前端

这也是一个插件。那么怎么用呢？python

一、下载：百度kindeditjson

二、引入：安全

    <script src="/static/kindeditor/kindeditor-all.js"></script>

三、看官方提供的文档app

在addarticle.html中xss

    <script>
        {#        KindEditor编辑器的使用#}
        KindEditor.ready(function (K) {
            window.editor = K.create('#id_content', {
                {#                    width:"1030px"#}
                width: "90%",
                height: "500px",
                resizeType: 0,//编辑器不拉伸
                uploadJson: "/uploadFile/",  //上传图片路径
                {#                    items:['preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',]#}
                //items:你能够筛选你本身想要的
                extraFileUploadParams: {     #解决forbidden
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                }
            });
        });
    </script>

当你把编辑器插入好的时候，你看似均可以设置大小，字体变粗等。。可是当你上传图片的时候就会想下面同样编辑器

这时候就须要 uploadJson: "/uploadFile/", 这个参数了。字体

url.pyurl

 url(r'^uploadFile/$', views.uploadFile),

views.py

def uploadFile(request):
    '''上传图片路径'''
    print(request.path)  #返回的是当前请求的路径
    print(request.FILES)  #<MultiValueDict: {'imgFile': [<InMemoryUploadedFile: 44643.gif (image/gif)>]}>
    file_obj = request.FILES.get("imgFile")  #获得用户上传的文件对象
    filename = file_obj.name  #那到文件的文件名
    path = os.path.join(settings.MEDIA_ROOT,"upload_article_img",filename) #拼接一个路径吧文件保存进去，通常上传文件的路径保存在media中
    print("======",path)
    with open(path,"wb") as f:#吧文件保存在本地      
        for line in file_obj:     #也能够for i in chunks()   不是一行一行的读，而是有具体的大小64*2**10
            f.write(line)
　　   
    response = {
        "error":0,
        "url":"/media/upload_article_img/"+filename+"/"   #前端图片文件预览
    }

    return HttpResponse(json.dumps(response))   #须要注意的是上传文件返回的是一个json字符串

2、XSS攻击防御：

BeautifulSoup：是python的一个库，查你想要的数据的，可是只是针对标签字符串。主要用于从网页爬取数据

一、首先须要知道的一些基础知识

<html>
 <head>
  <title>
   The Dormouse's story
  </title>
 </head>
 <body>
  <p class="title">
   <b>
    The Dormouse's story
   </b>
  </p>
  <div id="d1" class="d1">
    <b>
    The Dormouse's story2
    </b></div>
  <p class="story">
   Once upon a time there were three little sisters; and their names were
   <a class="sister0" href="http://example.com/elsie" id="link1">
    Elsie
   </a>
   ,
   <a class="sister1" href="http://example.com/lacie" id="link2">
    Lacie
   </a>
   and
   <a class="sister2" href="http://example.com/tillie" id="link3">
    Tillie
   </a>
   ;
and they lived at the bottom of a well.
  </p>
   <script>alert(1234)</script>
  <p class="story sister2">
   ...
  </p>
 </body>
</html>
"""
# 第一步:实例化对象
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc,"html.parser")
# 第二步：美化
print(soup.prettify())
# 第三步:查找标签
print(soup.a)  #只能找到符合条件的第一个标签
print(soup.find("a")) #只能找到符合条件的第一个标签
print(soup.find_all("a"))  #找到全部的a标签
print(soup.a["class"])  #找到a标签的class属性
print(soup.find_all(name="a"))#找全部标签名是a标签的
print(soup.find_all(attrs={"class":"sister1"}))#找属性是class=sister1的
print(soup.find_all(name="a",attrs={"class":"sister1"}))#找a标签而且属性是class=sister1的

# ===========================
for ele_a in soup.find_all("a"):
    print(ele_a.attrs)  #找出a标签的全部的属性
    print(ele_a["href"])  #找出全部的a标签的href属性
    print(ele_a["class"])  #找出全部的a标签的class属性

for ele_a in soup.find_all("a"):
    print(ele_a.attrs)  #找出a标签的全部属性
    del ele_a["class"]  #删除a标签的class属性
#
for ele_a in soup.find_all("a"):
    print(ele_a)  #找出a标签


for ele in soup.find_all():
    if ele.attrs:
        '''若是有属性'''
        if ele.attrs.get("class"):
            '''若是获得class属性'''
            print(ele.attrs)
            del ele["class"]
print(soup)


for ele_a in soup.find_all("script"):    #soup是整个文档对象，循环整个文档的全部的script标签
    print(ele_a.string)  #全部a标签的文本
    print(ele_a.text)    #全部a标签的文本
    ele_a.string.replace_with("//别瞎玩")  #替换a标签的文本
print(soup)

四个对象：

　　一、comment对象：注释对象

　　二、Tag标签对象：至关于html中的一个标签对象

　　三、BeautifulSoup对象：至关于整个文档对象（Dom对象）

　　四、Navigablefetry文本对象

下面咱们来具体应用一下：xss攻击防御。吧一些不安全的给删除或者替换了

def filter_xss(html_str):
    valid_tag_list = ["p", "div", "a", "img", "html", "body", "br", "strong", "b"]    #有效标签列表

    valid_dict = {"img":["src","alt"],"p": ["id", "class"], "div": ["id", "class"]}    #有效属性列表

    from bs4 import BeautifulSoup

    soup = BeautifulSoup(html_str, "html.parser")  # soup  ----->  document

    ######### 改为dict
    for ele in soup.find_all():
        # 过滤非法标签
        if ele.name not in valid_dict:
            ele.decompose()
        # 过滤非法属性

        else:
            attrs = ele.attrs  # p {"id":12,"class":"d1","egon":"dog"}
            l = []
            for k in attrs:
                if k not in valid_dict[ele.name]:
                    l.append(k)

            for i in l:
                del attrs[i]

    print(soup)

    return soup.decode()