zoukankan      html  css  js  c++  java
  • kindedit编辑器和xxs攻击防护(BeautifulSoup)的简单使用

    一、kindedit编辑器

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

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

    1、下载:百度kindedit

    2、引入:

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

    3、看官方提供的文档

    在addarticle.html中

        <script>
            {#        KindEditor编辑器的使用#}
            KindEditor.ready(function (K) {
                window.editor = K.create('#id_content', {
                    {#                    "1030px"#}
                     "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.py

     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字符串

    二、XSS攻击防护:

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

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

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

     四个对象:

      1、comment对象:注释对象

      2、Tag标签对象:相当于html中的一个标签对象

      3、BeautifulSoup对象:相当于整个文档对象(Dom对象)

      4、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()
  • 相关阅读:
    PHP设计模式——迭代模式
    采用navicat导出表结构及数据insert声明
    [Angular] Protect The Session Id with https and http only
    [D3] Creating a D3 Force Layout in React
    [D3] Animate Chart Axis Transitions in D3 v4
    [D3] Animate with the General Update Pattern in D3 v4
    [Web Security] JSON Hijacking
    [Angular] Progress HTTP Events with 'HttpRequest'
    [RxJS] How To get the results of two HTTP requests made in sequence
    [RxJS] Avoid mulit post requests by using shareReplay()
  • 原文地址:https://www.cnblogs.com/morgana/p/8496496.html
Copyright © 2011-2022 走看看