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

**URL:** <https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094>\
**Category:** Project Guidance\
**Created:** [December 13, 2021, 8:40am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094 "2021-12-13T08:40:19Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 13, 2021, 8:40am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/1 "2021-12-13T08:40:19Z")

</div>

[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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f7aab42984415a747d39ce3d84b2ebeaca70380.jpeg)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 13, 2021, 9:14am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/2 "2021-12-13T09:14:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 13, 2021, 1:29pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/3 "2021-12-13T13:29:20Z")

</div>

@javagar

> <https://stackoverflow.com/questions/18279141/javascript-string-encryption-and-decryption>

```auto
 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?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 13, 2021, 1:41pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/4 "2021-12-13T13:41:57Z")

</div>

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:

- [Wikipedia: Web framework](https://en.wikipedia.org/wiki/Web_framework)
- [Flask](https://flask.palletsprojects.com/en/2.0.x/)

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.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 14, 2021, 4:31am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/5 "2021-12-14T04:31:43Z")

</div>

@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’.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 14, 2021, 6:35am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/6 "2021-12-14T06:35:17Z")

</div>

> [@GWAK](#):
>
> I know how to use it like ‘JavaScript’, but I can’t apply it to ‘p5’.

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?

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 14, 2021, 7:34am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/7 "2021-12-14T07:34:02Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 14, 2021, 12:00pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/8 "2021-12-14T12:00:00Z")

</div>

Link to CryptoJS Documentation:

> **[CryptoJS](https://cryptojs.gitbook.io/docs/)**
>
> Original documentation: https://code.google.com/archive/p/crypto-js/

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.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 14, 2021, 12:24pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/9 "2021-12-14T12:24:04Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 14, 2021, 12:32pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/10 "2021-12-14T12:32:26Z")

</div>

> [@GWAK](#):
>
> Should I put the ‘p5.js’ folder \> Library folder \> CryptoJS v3.1.2 folder?

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.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 14, 2021, 12:55pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/11 "2021-12-14T12:55:52Z")

</div>

@javagar

[ERROR SOURCE]

```auto
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]

> **[TEST\_JS\_211208.zip](https://drive.google.com/file/d/1wWvT82unTcyGYsMzjZMn5CFSOnyYu1H7/view?usp=sharing)**
>
> Google Drive file.

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 14, 2021, 9:17pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/12 "2021-12-14T21:17:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 14, 2021, 11:26pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/13 "2021-12-14T23:26:20Z")

</div>

@javagar

> <https://stackoverflow.com/questions/18279141/javascript-string-encryption-and-decryption>

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 18, 2021, 2:56pm UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/14 "2021-12-18T14:56:43Z")

</div>

See:

> [@\[p5.js\] How to use 'CryptoJS'](https://discourse.processing.org/t/p5-js-how-to-use-cryptojs/34185):
>
> How to use ‘CryptoJS’ Add library \<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"\>\</script\> Add code var encrypted = CryptoJS.AES.encrypt(myString, myPassword); var decrypted = CryptoJS.AES.decrypt(encrypted, myPassword).toString(CryptoJS.enc.Utf8); It works fine!

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 19, 2021, 1:58am UTC](https://discourse.processing.org/t/p5-js-web-page-source-code-security-issues-how-can-i-do-p5-encryption/34094/15 "2021-12-19T01:58:27Z")

</div>

@javagar

I solved it and uploaded it.