[p5.js] Web page source code security issues / How can I do 'p5 Encryption'?

p5.js Project Guidance
1

[p5.js] Web page source code security issues

Hello. You can easily create web pages through ‘p5.js’. good.

However, I am curious about one thing. Can’t you hide the code?
If you press the ‘F12’ button after implementing the WEB Page, the source code is displayed.
The source code appears as the original.

How do I hide the source code? I wonder.
crome

2

You can obfuscate your JavaScript code. The code would still be accessible, but it would be quite difficult for a person to understand it.

2 Likes
3

@javagar

 var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");
//U2FsdGVkX18ZUVvShFSES21qHsQEqZXMxQ9zgHy+bu0=

var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");
//4d657373616765

Q1) How do I add ‘CryptoJS.AES’?

Q2) Can it be used on p5? Or is there some other way to ‘encrypt’ it?

4

If you are concerned that visitors to the web page might see strings that contain sensitive information, you could consider encryption. However, since it is the browser that executes the JavaScript code, a highly motivated user could still get access to the code, and work at getting at the sensitive information.

Are you hosting the web pages on a server that you control? If so, you could hide a lot of the logic by using a web framework, such as Flask. See:

With Flask, you would use Python to create web pages. Much or all of the sensitive logic could be performed behind the scenes. You could still use p5.js to perform the graphics.

3 Likes
5

@javagar

If only AES algorithm can be used in ‘p5’, it seems that encryption code can be written enough.

Is there any way?

I know how to use it like ‘JavaScript’, but I can’t apply it to ‘p5’.

6

The p5.js library is all JavaScript. You would be serving that library, your script, some HTML, and probably some CSS. You might also be serving some data, such as JSON. Which of those would you like to encrypt?

1 Like
7

@javagar

Thank you very much for your interest.

  1. I only need to protect ‘p5.js source code’.
  2. I want to use ‘CryptoJS.AES’ within ‘p5.js’, but I don’t know how to use it.

Is there any way?

8

Link to CryptoJS Documentation:

You could certainly use CryptoJS within a p5.js script. However, we need to see an example of code that you are trying to get to work.

In your HTML file, try this:

  • Link to the CryptoJS library.
  • Link to the p5.js library.
  • Link to your sketch script.

If you could provide us with an HTML file and a sketch to exemplify what you are trying to do, we can try to help. However, if you are trying to encrypt JavaScript code itself, and hope to have the browser execute it without making the code accessible to a visitor to the web page, that may be difficult or impractical. I don’t feel able to do that, but perhaps someone else can offer suggestions.

2 Likes
9

@javagar

Thanks for the kind explanation.

Here I am wondering,

Should I put the ‘p5.js’ folder > Library folder > CryptoJS v3.1.2 folder?

Or do I only need to put some specific js?

10

You could put the p5.js and the CryptoJS libraries in the libraries folder. That libraries folder could be within the same folder as your sketch. Just let us know how you have configured the files when providing us with example code.

11

@javagar

[ERROR SOURCE]

var CryptoJS = require("crypto-js");
var secretKey = 'hihihihihihihihi';


console.log('original:', data);

function setup() {

  if(displayWidth > displayHeight) { android = false; }else { android = true; }   
  
  android=true;
  
  if(android) {  createCanvas(600, 1100); }
        else  {  createCanvas(1920, 1080); }
  
  
  if(android) {
      ANDROID_SETUP(); 
  }else{
      x = 753; y1 = 477; y2 = 547; w = 256; h = 52;
      login_id = createInput('Your ID');
      login_id.position(x, y1);
      login_id.size(w, h);
      login_id.style('font-size', '18px');
      // login_id.textSize(10);
      login_pw = createInput('', 'password');
      login_pw.position(x, y2);
      login_pw.size(w, h);
      login_pw.style('font-size', '18px');
  } 
  
     var encrypted = CryptoJS.AES.encrypt("Message", secretKey).toString();  // -> ERROR
     console.log('encrypt:', encrypted);
     // var decrypted = CryptoJS.AES.decrypt(encrypted, secretKey).toString();
     // console.log('decrypted:', data);  
}

[FILE]

It’s blocked there. I don’t know why.

12

Is there a good CryptoJS discussion group? It seems that this may be more of a CryptoJS issue than a p5.js one. A CryptoJS discussion group might be a venue where you can find expertise for good advice regarding this topic. If you do post a query concerning this issue on such a forum, please provide us a link to the post. They may also benefit if you provide a link from that post back to this discussion.

2 Likes
13

@javagar

Thank you for answer.

What I want is to run ‘CryptoJS.AES’ in the ‘p5.js’ space.
If operation is possible, it is likely that several variables can be encrypted.

And it looks like it could be complicated.
You can check the method through ‘JS’ at ‘google’.
But I want to utilize ‘p5.js’ for this, but I don’t know how.

14

See:

1 Like
15

@javagar

I solved it and uploaded it.

1 Like