h5|web页面嵌套iframe传参给cocosCreator
目录
一、快速浏览
二、详细实现与项目代码
三、安全性评估——iframe
实现效果:
一、快速浏览
- 在h5页面中，使用JavaScript获取需要传递的参数，如下：
var token = 'ZHESHINIDETOKEN';
var phone = '110120119';
- 使用iframe嵌入cocosCreator游戏页面，同时将参数作为url的query string传递，如下：
<iframe src="http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119"></iframe>
- 在cocosCreator游戏页面中，使用JavaScript获取url中的参数，如下：
var url = window.location.href; //http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119
var params = url.split('?')[1].split('&'); //["token=ZHESHINIDETOKEN","phone=110120119"]
var token = params[0].split('=')[1]; //ZHESHINIDETOKEN
var phone = params[1].split('=')[1]; //110120119
- 在cocosCreator游戏中使用获取到的参数进行相关操作。
二、详细实现与项目代码
- web|h5 代码 (页面中嵌套iframe显示cocos)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web|h5传递参数给iframe到cocos</title>
</head>
<script>
</script>
<body>
<h1>web|h5传递参数给iframe到cocos</h1>
<iframe height="60%" width= "80%" src="http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119"></iframe>
</body>
</html>
- cocos creator 代码实现
2.1场景节点设置
2.2在Canvas下添加脚本 （parameControll.ts） 代码如下:
import {
_decorator, Component, Node, Label } from 'cc'; //cocos creator v3.6.1
const {
ccclass, property } = _decorator;
@ccclass('parameControll')
export class parameControll extends Component {
start() {
var url = window.location.href; //http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119
var params = url.split('?')[1].split('&'); //["token=ZHESHINIDETOKEN","phone=110120119"]
var param1 = params[0].split('=')[1]; //ZHESHINIDETOKEN
var param2 = params[1].split('=')[1]; //110120119
this.node.getChildByName("token-001").getComponent(Label).string = param1; //token-001节点赋值
this.node.getChildByName("phone-001").getComponent(Label).string = param2; //phone-001节点赋值
}
update(deltaTime: number) {
}
}
2.3实现效果
三、安全性评估——iframe
在使用h5嵌套iframe传参给cocosCreator时，需要进行安全性评估，以确保传递的参数不会被恶意利用或篡改。
以下是一些安全性评估建议：
-
验证参数：在接收到参数之后，需要对其进行验证，确保参数的格式和内容符合预期。例如，可以检查参数是否为数字、字符串或布尔值，并且是否符合特定的格式要求。
-
防止跨站脚本攻击（XSS）：在传递参数时，需要对参数进行转义或过滤，以防止恶意脚本注入。例如，可以使用HTML实体编码或JavaScript的encodeURIComponent()函数来转义特殊字符。
-
防止跨站请求伪造（CSRF）攻击：在接收到请求时，需要验证请求来源是否合法。例如，可以使用CSRF令牌来验证请求是否来自合法的来源。
-
加密传输：为了保护传输过程中的数据安全，可以使用SSL/TLS加密协议来加密传输的数据。
-
限制访问权限：为了防止未授权的访问，可以限制访问接口的权限，并使用身份验证和授权机制来验证访问者的身份和权限。
总之，h5嵌套iframe传参给cocosCreator时，需要注意安全性问题，采取相应的措施来保护数据安全和防止恶意攻击。
关键词:
扫描二维码关注公众号，回复：
16055255 查看本文章
