百度富文本编辑器xss(百度富文本编辑器)
我用百度富文本插入 *** 视频,插入后不能播放,如何解决?
修改配置文件:ueditor.config.js,添加xss过滤白名单
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','loop', 'menu', 'allowscriptaccess', 'allowfullscreen'],
用了富文本,怎么避免xss攻击
后台过滤就可以了。例如script ,input 标签直接replace掉 ,onclick. onxxx 之类也replace掉。只允许图文的html标记和样式存在。
springmvc怎么使用百度富文本编辑器
上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。
一种方式是直接修改源码,步骤如下:
1、编写controller 如下(该接口是ueditor前后台交互的统一路径) :
package com.test.dcdp.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.baidu.ueditor.ActionEnter;
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/dispatch")
public void config(HttpServletRequest request, HttpServletResponse response) {// response.setContentType("application/json");String rootPath = request.getSession().getServletContext().getRealPath("/");response.setHeader("Content-Type" , "text/html");try {
String a = request.getRequestURI();
String exec = new ActionEnter(request, rootPath).exec();PrintWriter writer = response.getWriter();writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
2、修改ueditor的配置文件 ueditor.config.js(指定后台服务器地址),如下所示修改前:
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "php/controller.php"
修改后 :
var getRootPath = function (){
//获取当前网址
var curWwwPath=window.document.location.href;//获取主机地址之后的目录
var pathName=window.document.location.pathname;var pos=curWwwPath.indexOf(pathName);
//获取主机地址
var localhostPaht=curWwwPath.substring(0,pos);//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);return(localhostPaht+projectName);
}
//获取路径
var applicationPath = getRootPath();
var URL = window.UEDITOR_HOME_URL || getUEBasePath();var serverURL = applicationPath;
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: serverURL + "ueditor/dispatch"3、修改ueditor源码 ConfigManager.java(指定配置文件路径).
修改前 :
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {rootPath = rootPath.replace( "\\", "/" );this.rootPath = rootPath;
this.contextPath = contextPath;
if ( contextPath.length() 0 ) {
this.originalPath = this.rootPath + uri.substring( contextPath.length() );} else {
this.originalPath = this.rootPath + uri;
}
this.initEnv();
}
修改后 :
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {rootPath = rootPath.replace( "\\", "/" );this.rootPath = rootPath;
this.contextPath = contextPath;
this.originalPath = rootPath + "static" + File.separator + "lib" + File.separator +"ueditor" + File.separator + "1.4.3" + File.separator + "jsp" + File.separator + "controller.jsp";///EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jspthis.initEnv();
}
如上所述,主要修改 originalPath 的路径,否则ueditor的配置文件(ueditor_config.json)路径是错误的(与springMVC整合的情况),之所以向上面那样拼接路径,是因为我的ueditor相关文件拷贝在了(EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp)路径里。
4、(若未执行该步操作,在选择好图片后,点击上传,将提示 : “未找到上传文件”)由于上传的文件都会被springmvc的文件上传拦截器拦截,包装,这样百度编辑器接收到文件后不能识别文件格式,因此把spring默认的commonsMultiparResolver,替换成我们自己写的commonsMultiparResolver ,并修改配置文件。
重写CommonsMultipartResolver :
package com.tianwen.dcdp.common;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;public class CommonsMultiparResolver extends CommonsMultipartResolver {@Override
public boolean isMultipart(javax.servlet.http.HttpServletRequest request) {String uri = request.getRequestURI();
System.out.println(uri);
//过滤使用百度UEditor的URI
if (uri.indexOf("ueditor/dispatch") 0) { //此处拦截路径即为上面编写的controller路径System.out.println("commonsMultipartResolver 放行");return false;
}
System.out.println("commonsMultipartResolver 拦截");return super.isMultipart(request);
}
}
修改springMVC配置文件spring-mvc.xml :
!-- 修改为我们重写的CommonsMultiparResolver而不是spring提供的 --
bean id="multipartResolver"
class="com.tianwen.dcdp.common.CommonsMultiparResolver"
!-- 默认编码 --
property name="defaultEncoding" value="utf-8" /
!-- 文件大小更大值 --
property name="maxUploadSize" value="10485760000" /
!-- 内存中的更大值 --
property name="maxInMemorySize" value="40960" /
/bean
5、最后配置上传文件保存目录,修改ueditor配置文件(ueditor_config.json):
修改如下参数(即配置上传文件的URL路径,若配置不正确,富文本编辑器中将不能正确显示上传的图片):
"imageUrlPrefix": "", "imagePathFormat": "/static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", 此处 imagePathFormat 之所以配置为如上格式,是因为springMVC中,指定了static目录下的资源为静态资源(其他路径都会被springMVC拦截)。
文件默认保存的物理路径为: web应用根路径 + imagePathFormat 。
{yyyy}{mm}{dd} : 按天分类保存
{time}{rand:6} : 随机生成文件名
另外还有一种简单的解决办法:
1、新建一web工程(ueditor)。
2、将下载下来的ueditor文件拷贝到新建工程 的webapps目录下,可参考官网介绍。
3、在使用ueditor的工程中,修改ueditor配置文件(ueditor.config.js)如下 :
window.UEDITOR_HOME_URL = "";var URL = window.UEDITOR_HOME_URL || getUEBasePath();
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL+ "jsp/controller.jsp"
3、配置上传文件保存路径,修改(ueditor_config.json) :
"imageUrlPrefix": "", "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
富文本编辑器怎么做到防注入
只适合在小应用中,并且处理范围非常有限,简单一点就是过滤/转义,在这我就不多说了,其实 *** 是非常多。我今天主要讲关于架构方面的知识:你google一下,了解下 WAF(Web应用防火墙),主要有两方面的:
软件角度的(推荐):基于nginx的Web应用防火墙/百度的加速了/创新工厂的安全宝......
硬件角度的(不推荐):NGAF
WAF可处理常见的Web安全有:XSS/SQL注入/跨站脚本/shell注入/会话劫持.....
在软件角度,git上面有不少这方面的开源项目,比如:
还有一些付费的云服务:安全宝/加速了......,可以了解下,确实很有意思,并不是简单的过滤转义。
个人认为:这本身属于网站架构方面的内容,是个全局的控制==输入/输出过滤,这要后台和前台保持一致就可以了。
富文本编辑器怎么用
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。
1、什么是富文本编辑器?
抛开专业的定义,用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子,大家大多都使用过网上的一些博客系统或者论坛贴吧吧,那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式,此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器,这个就是富文本编辑器的常见应用,如下图:
富文本编辑器不同于我们平时的文本编辑器,但是其功能确实和我们的平时使用的word的是类似的,只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。
2、富文本编辑器的原理和应用
关于富文本编辑器的原理,一些人可能以为富文本编辑器的原理十分的复杂,事实上也并非如此,当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码,其核心的实现技术就是JavaScript和html 、css等前端技术。
富文本编辑器的应用,比如做为一个网站的开发者,当我们需要一个发布文章的功能时候,用户可能不知道html代码,此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。