8 功能6：后台管理页面，编辑文章,xss攻击
1、后台管理页面之文本编辑
# 后台管理url
re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'),
re_path(r'^cn_backend/add_article/$', views.add_article, name='add_articles'),
view视图
from django.shortcuts import render, HttpResponse, redirect
from blog import models
from django.contrib.auth.decorators import login_required # 用户登录证装饰器 @login_required
def cn_backend(request):
"""后台管理页面"""
article_list = models.Article.objects.filter(user=request.user) return render(request, "backend/backend.html", locals()) @login_required
def add_article(request): if request.method == "POST":
title = request.POST.get('title')
content = request.POST.get('content') models.Article.objects.create(title=title,content=content, user=request.user)
return redirect("/cn_backend/")
return render(request, "backend/add_article.html", locals())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">
<style type="text/css">
.glyphicon-comment {
vertical-align: -1px;
}
</style>
</head>
<body>
<div class="site-header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
后台管理
</a>
</div>
</div>
</nav>
</div>
<div class="site-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-offset-1">
<div class="panel panel-default">
<div class="panel-heading">操作</div>
<div class="panel-body">
<a href="/cn_backend/add_article/">添加文章</a>
</div>
</div> </div>
<div class="col-md-8">
<div>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">文章</a></li>
<li role="presentation"><a href="#">日记</a></li>
<li role="presentation"><a href="#">随笔</a></li>
<li role="presentation"><a href="#">相册</a></li>
</ul>
</div> <div class="tab-content">
<div class="article_list small">
<table class="table table-hover table-striped">
<thead>
<th>标题</th>
<th>评论数</th>
<th>点赞数</th>
<th>操作</th>
<th>操作</th>
</thead> <tbody>
{% for article in article_list %}
<tr>
<td>{{ article.title }}</td>
<td>{{ article.comment_count }}</td>
<td>{{ article.up_count }}</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
{% endfor %}
</tbody> </table>
</div> </div> </div>
</div>
</div>
</div>
</body>
</html>
backend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css">
<style type="text/css">
.glyphicon-comment {
vertical-align: -1px;
}
</style>
</head>
<body>
<div class="site-header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/cn_backend/">
后台管理
</a>
</div>
</div>
</nav>
</div>
<div class="site-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-offset-1">
<div class="panel panel-default">
<div class="panel-heading">操作</div>
<div class="panel-body">
<a href="/cn_backend/add_article/">添加文章</a>
</div>
</div> </div>
<div class="col-md-8">
<div>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">文章</a></li>
<li role="presentation"><a href="#">日记</a></li>
<li role="presentation"><a href="#">随笔</a></li>
<li role="presentation"><a href="#">相册</a></li>
</ul>
</div> <div>
<form action="" method="post">
{% csrf_token %}
<div class="add_article">
<div class="alert-danger text-center">添加文章</div>
<div class="add_article_region">
<div class="title form-group">
<label for="">标题</label>
<div>
<input type="text" name="title">
</div>
</div> <div class="content form-group">
<label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
<div>
<textarea name="content" id="article_content" cols="30" rows="10"></textarea>
</div>
</div> <input type="submit" class="btn btn-default"> </div>
</div>
</form>
</div> </div>
</div>
</div>
</div>
</body>
</html>
add article.html
2、富文本编辑框KindEditor
1、编辑器的引入
官网 http://kindeditor.net/demo.php
在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
在该HTML页面添加以下脚本。
2、参数设置
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width: "800",
height: "600",
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize'
],
resizeType:1
});
});
</script>
3、上传功能
1）如何上传
2）csrf
3）指定上传的文件名称
4) 文件存入服务端
5)图片预览功能
4、富文本框代码
url
# 富文本编辑框 图片上传
re_path(r'^upload/$', views.upload, name='upload'),
views视图
def upload(request):
"""上传文件"""
print(request.FILES) # 获取文件name
img = request.FILES.get("upload_img")
print(img.name) # 文件存取路径
import os
from cnblog import settings
img_path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img.name) # 图片读取，写入到服务端
with open(img_path, "wb") as f:
for line in img:
f.write(line) # 文件预览功能
response = {
"error":0,
"url":"/media/add_article_img/%s" % img.name
}
import json
return HttpResponse(json.dumps(response))
模板层的富文本编辑框
<div class="content form-group">
<label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
<div>
<textarea id="editor_id" name="content"
style="width:700px;height:300px;"></textarea>
</div>
</div>
JavaScript代码
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width: "800",
height: "600", // 自定制
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
], // textarea可以拉伸
resizeType: 1, //文件上传的处理视图
uploadJson: "/upload/", //文件上传的参数
extraFileUploadParams: {
"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
}, // 文件上传的name
filePostName:"upload_img", });
});
</script>
3、文章摘要的保存
1、只去前150个字符，{{ article.desc|safe }}
2、未闭合的标签
4、bs的简单应用,xss攻击
1、BeautifulSoup
对于HTML/XML数据的筛选，BeautifulSoup也是比较常用且使用简单的技术，
BeautifulSoup是一种非常优雅的专门用于进行HTML/XML数据解析的一种描述语言，可以很好的分析和筛选HTML/XML这样的标记文档中的指定规则数据
在数据筛选过程中其基础技术是通过封装HTML DOM树实现的一种DOM操作，通过加载网页文档对象的形式，从文档对象树模型中获取目标数据
from bs4 import BeautifulSoup s = "<h1>hello</h1> <span>world</sapn> <script>alert(1111)</script>" soup = BeautifulSoup(s, "html.parser") # 按照html格式过滤 print(soup.text) # 过滤掉标签，只剩下text文本 print(soup.find_all()) # 按标签进行截断 for tag in soup.find_all():
print(tag.name) # 打印标签的name if tag.name == "script":
tag.decompose() # Recursively destroys the contents of this tree. print(str(soup))
2、bs4模块预防xss攻击
@login_required
def add_article(request): if request.method == "POST":
title = request.POST.get('title')
content = request.POST.get('content') # 过滤
from bs4 import BeautifulSoup
soup = BeautifulSoup(content, "html.parser")
for tag in soup.find_all():
if tag.name == "script":
tag.decompose() # 获取文本，进行截取，赋值给desc
desc = soup.text[0:150] models.Article.objects.create(title=title,content=str(soup),desc=desc, user=request.user)
return redirect("/cn_backend/")
return render(request, "backend/add_article.html", locals())
8 功能6：后台管理页面，编辑文章,xss攻击的更多相关文章
- BBS--后台管理页面，编辑文章,xss攻击
1 1.对文章进行增删改查 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- go语言实战教程之 后台管理页面统计功能开发（2）
上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...
- go语言实战教程之 后台管理页面统计功能开发（1）
本节内容我们将学习开发实现后台管理平台页面统计功能开发的功能接口,本章节内容将涉及到多种请求路由的方式. 功能介绍 后台管理平台不仅是功能管理平台,同时还是数据管理平台.从数据管理平台角度来说,在管理 ...
- HTML高级标签（2）————窗体分帧（2）————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- python：页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
- 前端武器库系列之html后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...
- Django用户登陆以及跳转后台管理页面3
Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...
随机推荐
- Jmeter入门--工具组成和线程组
1.Jmeter工具组成部分: 资源生成器:用于生成测试过程中服务器,负载机的资源代码.(LoadRunner中的VuGen) 用户运行器:通常是一个脚本运行引擎,根据脚本要求模拟指定的用户行为.(L ...
- html端输入数据，利用qrcode.js生成打印二维码
在前端页面中导入qrcode.js(下载)和jquery.js(下载) index.html <script> function print() { var textbox1 = $('i ...
- hibernate设置了not-null 为什么无效？
因为设错地方了! 错误--写在了property标签里 <property name="password" type="string" length=&q ...
- CSS 鼠标样式
设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置. cursor属性可能的值: default 默认光标(通常是一个箭头) auto 默认.浏览器设置的( ...
- RSA算法知识
摘自http://www.cfca.com.cn/zhishi/wz-012.htm RSA加密算法是最常用的非对称加密算法,CFCA在证书服务中离不了它.但是有不少新来的同事对它不太了解,恰好看到一 ...
- 【MySQL学习杂记】 2017年7月13日
1. 关于分组 当select使用groupby语法时,select返回字段集合里面除去 <使用了聚合函数的字段>.<不包含在 group by 子句的字段> 的其他字段,这些 ...
- 2、基于wsgiref模块DIY一个web框架
一 web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站.网络应用和网络服务的开发.这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方 ...
- OpenStack虚拟机快照和增量备份实现
1 快照的概念一般对快照的理解就是能够将系统还原到某个瞬间,这就是快照的作用.快照针对要保存的数据分为内存快照和磁盘快照,内存快照就是保存当前内存的数据,磁盘快照就是保存硬盘的数据.快照针对保存方式又 ...
- Ext 向Ext.form.ComboBox()中添加列表的分类
1.静态 [javascript] view plaincopy var staticComboBox = new Ext.form.ComboBox({ fieldLabel:'回访结果', ...
- 中间人攻击-MITM攻击
中间人攻击(Man-in-the-MiddleAttack,简称“MITM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机 ...