uni-app 网页链接中包含base64编码格式的参数中有特殊符号时 运行会报Failed to execute 'setAttribute' on 'Element'错误
uni-app 网页链接中包含base64编码格式的参数中有特殊符号时 运行会报Failed to execute ‘setAttribute’ on 'Element’错误
操作步骤：
- 外部链接跳转H5应用，并携带base64编码格式的参数名，如“dG9rZW4=“，页面无法渲染，删除参数名后面的“=”，即可正常渲染
预期结果：
- 页面能够正常渲染
实际结果：
- 无法正常渲染并报Failed to execute ‘setAttribute’ on ‘Element’: ‘dG9rZW4=’ is not a valid attribute name错误
bug描述：
- 通过链接跳转uniapp的H5应用，链接中带有base64编码的参数，例：http://localhost:5173/#/?dG9rZW4%3D=(具体参数)，其中参数名‘dG9rZW4=‘，带有特殊符号‘=’，此时会报InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘dG9rZW4=’ is not a valid attribute name.错误。
- 推测：uniapp编译页面时直接截取了链接参数，并通过setAttribute方法写入标签内，参考附件图片，删除参数名的‘=’后即可正常编译
- tab页和普通页面都出现了该问题
附件图片
环境信息
| 项目 | 信息 |
|---|---|
| 产品分类 | uniapp/H5 |
| PC开发环境 | Windows |
| 操作系统版本 | Windows11家庭版 21H1 |
| HBuilderX | 正式 |
| 版本号 | 4.29 |
| 浏览器 | Chrome |
| 浏览器版本 | 130.0.6723.92（正式版本） |
| 项目创建方式 | HBuilderX |
3 回复
链接已经是encode过的，dG9rZW4%3D，%3D就是‘=’的encode编码，但实际跳转的时候还是会将%3D识别为‘=’，现在是通过一个空白的中间页跳转到首页来忽略这个问题
在uni-app中处理包含base64编码格式参数的网页链接时，如果base64字符串中包含特殊符号（如+, /, =等），可能会导致在DOM操作中setAttribute方法失败，因为这些符号在URL中有特定的含义或需要特殊处理。
为了避免这种情况，你可以采取以下步骤：
-
URL编码Base64字符串：在将base64字符串作为URL参数传递之前，先对其进行URL编码。
-
解码URL参数：在接收端，先对URL参数进行解码，然后再进行后续处理。
以下是一个示例代码，展示了如何在uni-app中实现这一过程：
发送端（编码）
假设你有一个base64字符串，并希望将其作为URL参数传递：
// 原始base64字符串
let base64String = "SGVsbG8gV29ybGQhIA=="; // "Hello World! " in base64
// 对base64字符串进行URL编码
let encodedBase64String = encodeURIComponent(base64String);
// 构建URL
let url = `https://example.com/page?data=${encodedBase64String}`;
// 跳转到该URL（在uni-app中可以使用navigateTo或redirectTo等方法）
uni.navigateTo({
url: url
});
接收端（解码）
在接收页面，你需要从URL参数中解码base64字符串：
// 从URL中获取参数
let options = getCurrentPages()[getCurrentPages().length - 1].options;
let encodedBase64String = options.data;
// 对URL编码的base64字符串进行解码
let decodedBase64String = decodeURIComponent(encodedBase64String);
// 现在decodedBase64String是原始的base64字符串，可以正常使用
console.log(decodedBase64String); // 输出: SGVsbG8gV29ybGQhIA==
// 如果需要进一步处理（如解码为原始字符串），可以使用atob函数
let originalString = atob(decodedBase64String);
console.log(originalString); // 输出: Hello World!
通过这种方式，你可以确保base64字符串中的特殊符号不会导致setAttribute错误，因为它们在传递过程中被正确地编码和解码。这种方法不仅适用于uni-app，也适用于任何需要在URL中传递可能包含特殊字符的数据的场景。
