kindEditor使用并防止xss攻击(day88)

过滤关键字防范xss

参考博客

# pip3 install beautifulsoup4
from bs4 import BeautifulSoup
def xss(old):
    """
    防范xss攻击，过滤关键字符串。
    :param old: 用户提交的博文内容或字符串
    :return: new_str,返回合法的字符
    """
    valid_tags = {
        "font": ['color', 'size', 'face', 'style'],
        'b': [],
        'div': [],
        "span": [],
        "table": [
            'border', 'cellspacing', 'cellpadding'
        ],
        'th': [
            'colspan', 'rowspan'
        ],
        'td': [
            'colspan', 'rowspan'
        ],
        "a": ['href', 'target', 'name'],
        "img": ['src', 'alt', 'title'],
        'p': [
            'align'
        ],
        "pre": ['class'],
        "hr": ['class'],
        'strong': [],
        "h1":[],
        "h2":[],
        "h3":[],
        "h4":[],
        "h5":[],
    }

    soup = BeautifulSoup(old, "html.parser")
    # 找到所有标签
    tags = soup.find_all()
    for tag in tags:
        if tag.name not in valid_tags:
            # 删除该标签对象
            tag.decompose()
            # tag.clean() # 删除标签内容
        if tag.attrs:
            # 循环标签的属性
            for i in list(tag.attrs.keys()):
                if i not in valid_tags[tag.name]:
                    del tag.attrs["i"]
    content_str = soup.decode()
    return content_str

kindEditor使用

文件夹说明

├── asp                          asp示例
├── asp.net                    asp.net示例
├── attached                  空文件夹，放置关联文件attached
├── examples                 HTML示例
├── jsp                          java示例
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js        全部JS（未压缩）
├── kindeditor-min.js      仅KindEditor JS（压缩）
├── kindeditor.js            仅KindEditor JS（未压缩）
├── lang                        支持语言
├── license.txt               License
├── php                        PHP示例
├── plugins                    KindEditor内部使用的插件
└── themes                   KindEditor主题

基本使用

<textarea name="content" id="content"></textarea>
 
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    $(function () {
        initKindEditor();
    });
 
    function initKindEditor() {
        var kind = KindEditor.create('#content', {
             '100%',       // 文本框宽度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400      // 最小高度（数字）
        });
    }
</script>

kindEditor上传文件

<script>
    KindEditor.create("#i1",{
        "700px",
        height:"300px",
        resizeType:1,
        uploadJson:"/myadmin/upload_img.html",
        extraFileUploadParams:{
            "csrfmiddlewaretoken":"{{ csrf_token }}"
        }
    })
</script>

kindEditor只能返回指定格式的字符串，0代表上传成功。url前面加上"/"，就能在富文本编辑框中显示啦。

def upload_img(request):
    f = request.FILES.get("imgFile")
    path = os.path.join("static/avatar",f.name)
    print(path)
    with open(path, "wb+") as file:
        for chunk in f.chunks():
            file.write(chunk)

    # kindEditor只能返回特定格式的数据
    dic = {
        'error': 0,
        'url': '/' + path,
        'message': '错误了...'
    }

    return HttpResponse(json.dumps(dic))