业务场景是:对页面图片或者文件的src加密,即打开F12不可获取到图片地址。
具体实现:后台获取文件的真实地址,对地址进行Base64加密,页面采用指定格式回显即可。
- Base64加密工具类
import org.apache.commons.codec.binary.Base64;
import sun.misc.BASE64Decoder;
import java.io.*;
public class Base64ToImg {
public static String getImgStr(String imgFile){
//将图片文件转化为字节数组字符串,并对其进行Base64编码处理
InputStream in = null;
byte[] data = null;
//读取图片字节数组
try
{
in = new FileInputStream(imgFile);
data = new byte[in.available()];
in.read(data);
in.close();
}
catch (IOException e)
{
e.printStackTrace();
}
return new String(Base64.encodeBase64(data));
}
}
- 后台接口
/**
* 查找文件表加密地址
*/
@RequestMapping(value = "/selectFileToBase", method = RequestMethod.POST,produces = "application/json;charset=utf-8")
@ResponseBody
public ResulVO selectFileToBase(HttpServletRequest request) {
try {
String loanId = request.getParameter("loanId")==null?"":request.getParameter("loanId").trim();
String loanConfigId = request.getParameter("loanConfigId")==null?"":request.getParameter("loanConfigId").trim();
//查询条件
Criteria criteria = new Criteria();
criteria.clear();
//条件
if(StringUtils.isNotBlank(loanId)){
criteria.put("loanId",loanId);
}
if(StringUtils.isNotBlank(loanConfigId)){
criteria.put("loanConfigId",loanConfigId);
}
List<TFileConfig> fileConfigList = fileConfigService.selectByCondition(criteria);
if (fileConfigList != null && fileConfigList.size() > 0){
for (TFileConfig tFileConfig : fileConfigList){
String imgUrl = tFileConfig.getRealPath();
if(StringUtils.isBlank(imgUrl)){
return ResulVOUtils.error(9999,"查询无数据");
}
//调用工具类加密
String imgbase = Base64ToImg.getImgStr(imgUrl);
tFileConfig.setBasePath(imgbase);
}
}
if (fileConfigList != null && fileConfigList.size() > 0){
return ResulVOUtils.success(fileConfigList);
}else{
return ResulVOUtils.error(9999,"查询无数据");
}
} catch (Exception e) {
logger.error("FileConfigController.java-selectFileToBase-Exception: ", e);
return ResulVOUtils.error(1009, "查询异常请重试!");
}
}
页面方法
//回显图片方法
function setImageInfo(str2){
str2 ='#'+str2;
var url = pcs.common.path + '/admin/fileConfig/selectFileToBase?loanId='+$("#loanId").val() + "&loanConfigId=" + $('#loanConfigId').val();
$.post(url,{},function(data){
if(data.code == 1){
var list = data.rs;
if(list != null && list != '' && list != undefined){
for(var i = 0; i<list.length; i++){
var obj = list[i];
if( obj.filePath != null){
var filePath = obj.filePath;
var fileConfigId = obj.fileConfigId;
var pid = "c" +fileConfigId;
//加密后的文件地址
var basePath = obj.basePath;
var content = '';
var index = filePath.lastIndexOf("\.");
content = filePath.substring(index,filePath.length);
if(content == '.doc' || content == '.docx'){
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="../../ui/img/word.jpg" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
' </div>')
}else if(content == '.txt'){
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="../../ui/img/txt.jpg" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
' </div>')
}else if(content == '.pdf'){
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="../../ui/img/pdf.jpg" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
' </div>')
}else if(content == '.xls' || content == '.xlsx' ){
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="../../ui/img/excel.jpg" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
' </div>')
}else if(content == '.zip' || content == '.rar' ){
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="../../ui/img/zip.jpg" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
'</div>')
}else{
$(str2).append(' <div id="'+pid+'" style="display: inline-block;"><img oncontextmenu="return false;" src="https://img-blog.csdnimg.cn/2022010702372838568.jpg'+basePath+'" alt="" class="layui-upload-img" style="width: 150px;height: 100px;margin-right: 10px">' +
' </div>')
}
}
}
}
}else{
return;
}
},'json');
}
- 页面文件回显的格式(采用Base64指定格式回显),οncοntextmenu="return false;"这个属性设置禁止右击图片,也起到一定的安全的作用。
<img oncontextmenu="return false;" src="https://img-blog.csdnimg.cn/2022010702372838568.jpg'+basePath+'" alt="" class="layui-upload-img">
最后达到加密的效果,如图所示: