h5|web页面嵌套iframe传参给cocosCreator

最新推荐文章于 2024-07-05 14:41:46 发布

dupha

最新推荐文章于 2024-07-05 14:41:46 发布

阅读量2.1k

点赞数 1

分类专栏： cocos-creator Vue 个人日志文章标签：前端 javascript 游戏引擎

本文链接：https://blog.youkuaiyun.com/mingketao/article/details/129927169

版权

个人日志同时被 3 个专栏收录

38 篇文章

订阅专栏

cocos-creator

10 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

文章介绍了如何在h5页面中通过iframe嵌入cocosCreator游戏并传递参数，如token和phone。详细阐述了参数的获取与使用，并强调了安全性评估的重要性，包括参数验证、防止XSS和CSRF攻击以及数据加密等措施。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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时，需要注意安全性问题，采取相应的措施来保护数据安全和防止恶意攻击。

关键词: