自定义EL函数防止HTML注入

我们先来看看没有自定义EL函数时是怎么HTML注入的。

首先,我们定义一个jsp页面用于搜集用户提交的表单数据

<form action="ResultServlet" method="post">
		用户名:<input type="text" name="username"><br><br>
		留言:     
		<textarea rows="6" cols="100" name="message"></textarea><br>
		<input type="submit" value="提交">
</form>

我们让表单数据提交给ResultServlet来处理,所以我们定义一个servlet来处理数据

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ResultServlet extends HttpServlet 
{
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
	{
		request.setCharacterEncoding("UTF-8");
		String name=request.getParameter("username");//获取username
		String message=request.getParameter("message");//获取mesage
		request.setAttribute("name",name);
		request.setAttribute("message",message);
		
		request.getRequestDispatcher("/result.jsp").forward(request,response);//请求转发,给result.jsp显示处理的结果
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
	{
		doGet(request,response);
	}
}

EL表达式显示处理后的数据
<body>
	用户名:${caorui:filter(name)}<br>
	留言内容:${caorui:filter(message)}
</body>

现在,我们可以来测试数据了,一起来看看结果:






很不幸,我们被HTML注入成功了( ▼-▼ )


-------------------------------------------------------------------------------------------我是分割线-------------------------------------------------------------------------------------------------------------


作为一个合格的javaweb程序员,我们应该要解决这个问题。一般情况下,自定义EL函数,可以防止HTML注入(当然,还有更好的办法)。
现在,我们来解决这个BUG。


第一步,开发我们自己的EL函数,这个函数的所属类必须定义为public,函数本身必须为public  static。这个函数的功能是实现HTML编码转换防止注入

public class HTMLFilter 
{
	public static String filter(String message)
	{
		if(message==null)
		{
			return null;
		}
		char content[]=new char[message.length()];
		message.getChars(0,message.length(),content,0);
		StringBuffer result=new StringBuffer(content.length+50);
		for(int i=0;i<content.length;i++)
		{
			switch(content[i])
			{
			case '<':
				result.append("<");
				break;
			case '>':
				result.append(">");
				break;
			case '&':
				result.append("&");
				break;
			case '"':
				result.append(""");
			default:
				result.append(content[i]);
			}
		}
		return (result.toString());
	}
}

我们要让EL函数可以调用这个static方法,此时我们应该在tld(标签库描述符)文件中注册自定义函数,将这个函数映射成EL自定义函数。这个文件可以放到WEB-INF 目录下。

<?xml version="1.0" encoding="UTF-8" ?>  
<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd"  
    version="2.0">  
    <tlib-version>1.0</tlib-version>  
    <jsp-version>2.0</jsp-version>  
    <short-name>function</short-name>  
    <uri>http://www.baidu.com</uri>
    <function>  
        <name>filter</name>  
        <function-class>packge01.HTMLFilter</function-class>  
        <function-signature>java.lang.String filter(java.lang.String)</function-signature>  
    </function>  
</taglib>  


最后,我们可以在显示的jsp页面中使用自定义EL函数

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="caorui" uri="http://www.baidu.com" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	用户名:${caorui:filter(name)}<br>
	留言内容:${caorui:filter(message)}
</body>
</html>

再来看看执行效果



ok,到此为止我们成功了!

### element-ui el-date-picker 自定义内容 在 `el-date-picker` 中实现自定义显示内容,通常涉及修改默认模板或通过插槽(slot)机制注入额外的内容。为了更好地理解这一过程,下面提供了一个具体的例子。 #### 使用作用域插槽定制日期选择器面板内的内容 Element UI 的 `el-date-picker` 支持作用域插槽功能,允许开发者向组件内部插入自定义 HTML 和逻辑。具体来说,在 `<template>` 标签中使用具名插槽可以覆盖原有结构的一部分: ```html <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> <!-- 插入到日历头部 --> <template slot="header" scope="{ prevYear, nextYear, prevMonth, nextMonth }"> <button @click="prevYear">上一年</button> <button @click="nextYear">下一年</button> <span>{{ year }}年{{ month + 1 }}月</span> <button @click="prevMonth">上一月</button> <button @click="nextMonth">下一月</button> </template> <!-- 修改周标签 --> <template slot="week-header" scope="{ weekNames }"> <th v-for="(name, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :key="index">{{ name }}</th> </template> <!-- 日单元格内容重写 --> <template slot="default" scope="{ date, data }"> {{ data.text }} <div v-if="isSpecialDay(date)">特殊标记</div> <!-- 条件渲染某些天数下的特别提示 --> </template> </el-date-picker> ``` 上述代码片段展示了如何利用作用域插槽来自定义 `el-date-picker` 的不同部分[^2]。这里不仅改变了月份导航按钮的位置和样式,还替换了原有的星期名称,并且为特定的日子添加了额外的信息展示区域。 对于更复杂的场景,比如想要完全替换整个弹窗界面,则可能需要考虑创建一个新的 Vue 组件并继承原生的选择框行为,但这超出了简单配置层面的操作范畴。 #### 动态调整 picker-options 配置项 当尝试将 `pickerOptions` 属性放置于 `data()` 函数返回的对象里时会遇到上下文丢失的问题,即 `this` 关键字不再指向当前 Vue 实例。为了避免这种情况发生,建议采用计算属性的方式处理这些选项,从而确保能够访问到最新的实例状态[^1]。 ```javascript export default { computed: { dynamicPickerOptions() { return { disabledDate(time) { const today = new Date(); // 只能选今天之后的日期 return time.getTime() < today; }, shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }] }; } } }; ``` 这样做的好处是可以随时根据应用的状态变化灵活改变可用的时间区间或其他交互特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值