听说还有人不会,处理网页 URL 中的特殊字符 “空格” 问题
myzbx 2024-12-16 14:52 16 浏览
网页 URL 中的特殊字符 “空格” 问题
Java 代码案例
1、将一段内容和接口拼接成 URL 链接
代码示例
java复制代码public static String generateContent(String content) {
// 将 content 进行 url 编码
String ans;
try {
ans = URLEncoder.encode(content, "UTF-8");
} catch (UnsupportedEncodingException e) {
// 处理异常情况
throw new RuntimeException(e);
}
return ans;
}
1、不带空格的处理
java复制代码public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为:" + ansUrl);
}
运行结果:
perl复制代码https://example.com/resource?a=%E5%B0%8F%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码example.com/resource?a=小黑
网页截图:
2、带有空格的处理
java复制代码public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为:" + ansUrl);
}
运行结果:
perl复制代码https://example.com/resource?a=%E5%B0%8F+%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码https://example.com/resource?a=小+黑
网页截图:
3、解决空格的问题
java复制代码public static String generateContent(String content) {
// 将 content 进行 url 编码
String ans;
try {
// -----------------------调整-----------------------
ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
} catch (UnsupportedEncodingException e) {
// 处理异常情况
throw new RuntimeException(e);
}
return ans;
}
public static void main(String[] args) {
String baseUrl = "https://example.com/resource?a=";
String content = "小 黑";
String ansUrl = baseUrl + generateContent(content);
System.out.println("最终生成的 URL 的值为:" + ansUrl);
}
运行结果:
perl复制代码https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91
粘贴到浏览器上会被浏览器解码出来给用户看到:
ini复制代码https://example.com/resource?a=小 黑
网页截图:
其中 %20 是空格经过编码后的结果
2、问题解决的原因
从上面的案例可以看到,如果 url 中有空格出现,且不经过特殊处理,那么将会导致浏览器无法正确解析 url,从而导致 url 重定向失败,那么问题的原因是什么呢?首先来看一下URL的组成部分
1、URL 的组成部分
下面是一个简单的 URL 链接:
bash复制代码http://localhost:8080/path/to/index.html?id=123#content
它主要有下面几个部分组成
- 协议:URL 的网络传输协议,如 http、https、ftp 等。表示资源访问需使用何种协议;
- 服务器名称:表示要访问的服务器主机名或 IP 地址;
- 端口(可选):服务器使用的端口号,如 http 默认的端口是 80,https 默认的端口是443,如果省略则使用该协议的默认端口;
- 路径:表示服务器上具体资源的路径信息:例如“/index.html”;
- 查询参数(可选):路径后加问号开头的查询字符串,用于传递额外的参数,如”?id=123”;
- 锚点(可选):链接内的超链接锚点定位,例如“#content”;
- HTTP请求不包括#
- #是用来指导浏览器动作的,针对浏览器起作用,对服务器端完全无用
- 访问http://www.example.com/index.html#print,浏览器实际发出的请求只是请求index.html,没有"#print"部分。
- 位于#后面的字符都是位置标识符
- 在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。 这意味着,这些字符都不会被发送到服务器端。
- 在URL中指定一个颜色值 http://www.example.com/?color=#fff 但浏览器实际发出的请求是"#fff"被省略了。只有将#转码为%23,浏览器才会将其作为实义字符处理。http://example.com/?color=%23fff
- 改变#后面的参数不会触发页面重载
- 改变#后面的参数会改变浏览器的访问历史
- 用户名密码(可选):用于基础的 HTTP 认证的用户名和密码;
2、URL 编码中遵循的规则
在 URL 编码过程中,会遵循以下的规则:
- 空格:替换成 + (%20)
- /:分割目录和子目录
- ?:分割 URL 和查询
- %:指定特殊字符
- #:指定书签 (%23)
- &:指定分隔参数 (%26)
- =:指定参数的值(%3D)
3、为何 URL 中不允许包含空格和部分特殊字符
- URL 作为资源定位符,它需要保证各个组成部分(协议、主机名、端口、路径等)之间使用统一的分隔符,通常采用斜线"/"。如果直接使用空格,很难区分路径中的空格与路径之间的分隔;
- 早期URL标准没有规定如何处理空格等特殊字符,直接包含空格可能导致解析或匹配时产生歧义;
- 例如:http://www.example.com/products/product name.html
- 当浏览器在解析这个 URL 的时候,可能就会产生下面的歧义问题:
- 1、是否应该解析为两个路径组件"products/product"和"name.html”
- 2、搜索引擎或其他系统进行URL匹配检索时,不清楚空格是否应该作为路径分隔符来匹配; 3、攻击者可以构造歧义URL,利用空格来规避安全机制或进行异常操作;
- 包含空格特殊字符可能会破坏URL本身结构或导致安全问题;
- 包含空格可能导致传输或存储时产生问题。例如传输过程中空格是否需要编码等问题没有明确规定;
相关推荐
- 以文本的方式绘制简单的SVG流程图——flowchart.js
-
介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...
- 全国首套构网型SVG在木垒投运
-
中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...
- Popmotion – 小巧,灵活的 JS 运动引擎
-
Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...
- 零基础教你学前端——43、初识SVG
-
解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...
- 2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
-
2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...
- vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!
-
前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...
- 一篇文章带你了解SVG 蒙版(Mask)
-
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...
- SVG实现的流程图绘制
-
一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...
- 解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享
-
前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...
- 交互设计师做好动画后,提交给开发的文档有哪些?
-
谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...
- Motion for Vue:为Vue量身定制的强大动画库
-
在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...
- Web开发人员的福音!8个实用的SVG工具
-
SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...
- 一键画波浪线、一键多图片调色?这3个网站好玩到停不下来
-
作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...
- vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!
-
Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...
- DrawSVG – SVG 路径动画 jQuery 插件
-
jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)