Django-blog项目(验证码,富文本编辑器,摘要保存,防xss攻击)

一、生成验证码

二、富文本编辑器

三、文章摘要的保存

四、防止xss攻击

---------------------------------------

一、生成验证码

# 方式四：图片存内存，图片里加文字，噪点躁线，验证码存在session里

def get_validCode_img(request):
def get_random_color():
return (random.randint(0,255),
random.randint(0,255),
random.randint(0,255))
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
# RGB表示彩色图片，color表示背景色，只是创建文件对象还没生成图片
img=image.new("RGB",(270,40), color=get_random_color())
# 在img上画文字 text方法：text(坐标,文本,文本颜色,字体样式)
draw=ImageDraw.Draw(img)
# 字体对象，方法(字体路径，字体大小)
kumo_font = ImageFont.truetype("static/font/kumo.ttf",size=20)
# 生成随机验证码(字母+数字)
valid_code_str=""
for i in range(5):
random_num = str(random.randint(0,9))
random_low_alpha=chr(random.randomint(95,122))
random_upper_alpha=chr(random.randint(65,90))
random_char=random.choice([random_num,random_low_alpha,random_upper_alpha])
draw.text((i*30+20,5), char, get_random_color(), font=kumo_font)
request.session["valid_code_str"]=valid_code_str

# 生成噪点躁线,width为图片宽，height为图片高
width = 250
height = 40
for i in range(100):
x1=random.randint(0,width)
x2=random.randint(0,width)
y1=random.randint(0,height)
y2=random.randint(0,height)
draw.line((x1,y1,x2,y2), fill=get_random_color())
for i in range(400):
draw.point([random.randint(0, width), random.randint(0, height)], fill=random.get_random_color())
x=random.randint(0,width)
y=random.randint(0,height)
draw.arc((x,y,x+4,y+4), 0, 90, fill=get_random_color())

# 生成图片保存在内存
f=BytesIO()
img.save(f, "png")
# 读取图片
data=f.getvalue()
# 返回二进制图片
return HttpResponse(data)

二、富文本编辑器

编辑器：kindEditor(不支持图片复制拖动上传)，tinyMCE(支撑图片复制拖动上传)
官网： kindeditor.net/demo.php
文档：kindeditor.net/doc.php

使用方法===
前端：
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
Editor.ready(function(K){
　　window.editor = K.create('#textarea_id',{
　　　　width:"800px", //编辑器宽度
　　　　height:"600px", //编辑器高度
　　　　resizeType:0, //编辑器可拉伸
　　　　uploadJson:"/upload/" //上传图片服务器请求路径
　　　　extraFileUploadParams:{
　　　　　　csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
　　　　},
　　　　filePostName:"upload_img", //上传文件在服务器dict里的key名称
　　});
})
<script>

后台：

def upload(request):
img = request.FILES.get("upload_img")      # 获取上传的文件对象
path = os.path.join(settings.MEDIA_ROOT,"add_article_img",img.name)   # 拼接图片的完整路径
with open(path,"wb") as f:
　　for line in img:
　　　　f.write(line)
response={
　　# 没有出错就是0
　　"error":0,
　　# 浏览器能直接访问到该图片的路径
　　"url":"/media/add_article_img/%s"%img.name,
}

return JsonResponse(response)

三、文章摘要的保存

文章的摘要(Article里的desc字段)怎么存？
不能用文章内容进行截断，因为这样会把标签也截到desc里了
怎样只截取文本部分呢？？
安装：pip install BeautifulSoup

Demo:

from bs4 import BeautifulSoup
s = "<h1>hello</h1><span>123</span>"
soup = BeautifulSoup(s, "html.parser")
print(soup.text) # hello123

四、防止xss攻击

用户的博客内容-如果输入标签<script></script>是不安全的。
之前的做法是渲染的时候: {{ content | safe }}这样做不安全,不会对标签转义
应该是用户输入标签内容就提示用户输入非法，让其重新输入内容

from bs4 import BeautifulSoup
s = "<h1>hello</h1><span>123</span><script>alert(123)</script>"   # 过滤前的内容
soup = BeautifulSoup(s, "html.parser")
tag_list = soup.find_all()         # [<h1>hello</h1>, <span>123</span>, <script>alert(123)</script>]
for tag in tag_list:
　　if tag.name == "script":
　　　　# 删除非法标签
　　　　tag.decompose()
# 过滤后的内容
content=str(soup) # <h1>hello</h1><span>123</span>