h5|Web page nested iframe pass parameter to cocosCreator

Contents
1. Quick view
2. Detailed implementation and project code
3. Security assessment——iframe

Realize the effect:
insert image description here

1. Quick View

In the h5 page, use JavaScript to obtain the parameters that need to be passed, as follows:

var token = 'ZHESHINIDETOKEN';
var phone = '110120119';

Use an iframe to embed the cocosCreator game page, and pass the parameters as the query string of the url, as follows:

<iframe src="http://192.168.66.1:9800/?token=ZHESHINIDETOKEN&phone=110120119"></iframe>

On the cocosCreator game page, use JavaScript to get the parameters in the url, as follows:

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

Use the obtained parameters to perform related operations in the cocosCreator game.

2. Detailed implementation and project code

web|h5 code (the nested iframe in the page displays 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 code implementation
2.1 Scene node setting

2.2 Add script (parameControll.ts) under Canvas The code is as follows:

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 Realize the effect
insert image description here

3. Security assessment - iframe

When using h5 nested iframe to pass parameters to cocosCreator, a security assessment is required to ensure that the passed parameters will not be maliciously used or tampered with.

Here are some security assessment suggestions:

Validate parameters: After receiving the parameters, they need to be validated to ensure that the format and content of the parameters meet expectations. For example, you can check that a parameter is a number, string, or Boolean, and that it meets certain format requirements.
Prevent cross-site scripting attacks (XSS): When passing parameters, parameters need to be escaped or filtered to prevent malicious script injection. For example, special characters can be escaped using HTML entity encoding or JavaScript's encodeURIComponent() function.
Prevent cross-site request forgery (CSRF) attacks: When receiving a request, it is necessary to verify whether the source of the request is legitimate. For example, CSRF tokens can be used to verify that a request is from a legitimate source.
Encrypted transmission: In order to protect the data security during transmission, the SSL/TLS encryption protocol can be used to encrypt the transmitted data.
Restrict access rights: In order to prevent unauthorized access, you can restrict the access rights of the interface, and use authentication and authorization mechanisms to verify the identity and rights of visitors.

In short, when h5 nested iframe passes parameters to cocosCreator, you need to pay attention to security issues and take corresponding measures to protect data security and prevent malicious attacks.

Key words: