Window JS object access

Discussion Ask a question
,
1

Hello,
Is there a way to access the ‘window’ object. The wix-window offers only a limited set of functionality required.
Specifically I am interested in the window.crypto services.
Same question about the ‘document’ object.
Thanks,
David

1 Like
2

WixCode understands all of Javascript, except for anything that accesses the DOM. This keeps the user from inadvertently “breaking” something. I myself tried to hack things from the code, from an iFrame, and in my dreams, but WixCode wasn’t having any of it. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can’t try to trick it by using parent, window, top, etc. Same goes with the Javascript evaluate() function. It is sandboxed and does not allow access to the DOM.

1 Like
3

You might want to try the crypto-js library available in the Wix Package Manager :

591×570 18.9 KB

1 Like
4

Any idea why Wix is blocking access to the DOM?

5

@tennedavid As I mentioned above, it prevents the user from breaking things. Lots of technical details involved.

6

@yisrael-wix So what? If, as a developer, I break it, then its my problem just like any website built using other technologies. Meh.

4 Likes
7

I imported the library as indicated. It appears in my “Backend/node_modules/crypto-js” however I cannot reference it from my ‘site code’. All of the following failed with the message "cannot find module ‘crypto-js’. Any idea?

import CryptoJS from 'crypto-js'; // Cannot find module 'crypto-js' in 'public/pages/masterPage.js'

import CryptoJS from 'backend/crypto-js'; // Cannot find module 'backend/crypto-js' in 'public/pages/masterPage.js'

import CryptoJS from 'public/crypto-js'; // Cannot find module 'public/crypto-js' in 'public/pages/masterPage.js'

const { CryptoJS } = require("crypto-js"); // Cannot find module 'crypto-js' in 'public/pages/masterPage.js'
8

@tennedavid And who is going to provide support for all of the “bug” reports? If users have a “free hand” to go mucking around the DOM, every time the user breaks the page/site with their errant HTML/js, they’ll report a bug. Locking down the DOM enforces a more consistent and stable environment for the user, and greatly reduces support resources.

1 Like
9

@tennedavid Keep in mind that NPM libraries are only accessible from backend code. Also, each package will have a unique import statement. See the package’s external documentation to learn about what import statement to use.

This seems to work for me:
const CryptoJS = require(“crypto-js”);

10

@yisrael-wix Then this solution is not good for me since I want to use the crypto library in the client side. Any other idea?

11

@tennedavid Don’t worry. Create your functions in the backend, and then create your “interface” in a web module file (.jsw). You can call the web module functions from the frontend/public. See the article Wix Code: Calling Server-Side Code from the Front-End with Web Modules .

See the NPM examples:

Save Data to a Google Sheet Using NPM

Use the Google APIs Node.js Client package included in the Wix Package Manager to access a Google Sheet .

Send Email with SendGrid NPM Interface

Send an email using the SendGrid NPM library.

12

Can you share with me any work around for accessing window.$FPROM?

13

@yisrael-wix Yisrael,

You seem to be up on the ins and outs of crypto-js, so I am once again turning to your expertise. I need a simple set of instructions on how to incorporate crypto-js in my wix website so that I can use it to encrypt and decrypt data that would be sent to and received from external sources. (By “simple,” I mean “Step 1 - do this, Step 2 - do that, Step 3 - do this other thing, etc.”)

My rudimentary understanding is that I would have to install the crypto-js module from NPM into the node_modules folder using the Wix Package Manager. I have done that, but that is where I am completely stalled.

You indicated that the code in the crypto-js module would only be accessible in the backend code, so I am assuming that I would have to create a .jsw file in the backend folder. That file would have to contain functions that I would expose using the “export” statement before each function. Do I have to have any “import” statement at the top of that .jsw file to access the contents of the node_module/crypto-js file?

And finally, do you have any examples of the basic encryption and decryption statements that I could use as a model to make use of the library’s capabilities?

I am making the assumption that AES, DES, SHA, and other encryption routines in crypto-js produce results that can be read accurately by those same methods in the Microsoft universe.

My purpose in this is to bypass the complexities of creating a report writing module by using Microsoft Word. Using Microsoft’s VBA, I can theoretically use the built-in encryption functions of Windows 10 within a Microsoft Word document to gain access to my Wix data collections. With a bit of code in Word, I can then use template documents to automate printing, email, and a variety of other activities in a matter of minutes that would otherwise require me to spend hours on the computer at the administrative pages for my website.

Thanks in advance for your help.

14

@yisrael-wix what a horrible way of handling things, this forum should be a support group and developer tools are for developers, handicapping developers for the sake of “we do not want to spend money on support” is a joke.

1 Like
15

@yisrael-wix Yisrael,

One more thing. After writing to you, I did a few things, and I was able to determine that the crypto-js NPM module is working correctly, but it does so only in the backend code. Here is what I did:

  1. I installed the crypto-js package in the node_modules folder using the Wix Package Manager.
  2. I created a file in the backend folder named “crypto.jws.” It’s contents are shown below:

import * as CryptoJs from “crypto-js”;

export function conversion(){
var crypt = CryptoJs;
var secret = “Pasw0rd@123”;
var string2Sign = “Welcome to the world of programming”;
console.log('string2Sign: ’ + string2Sign);
var hash = crypt.HmacSHA256(string2Sign, secret);
console.log('hash: ’ + hash);
var signature = crypt.enc.Base64.stringify(hash);
console.log('signature: ’ + signature);
return signature;
}

The import statement apparently grabs the CryptoJs object from the NPM module, and the module from which it grabs it must be a public module since the “from” statement references only the name of the NPM module and does not refer to it as “node_modules/crypto-js.” I am assuming, too, that the object name within the crypto-js module is CryptoJs and its instantiation relies on a case-sensitive spelling.

  1. You will note that I put in several console.log() statements so that I could track the results. I found that each statement produces real results.

  2. I then created a client-side page named “new page” in the Wix website. The code for this page is as follows:

import {conversion} from ‘backend/crypto’;

$w.onReady( function () {
let x = conversion();
console.log(x);
})

  1. When I run the code, I get the following results from the console output:

{…} New Page Line 6
string2Sign: Welcome to the world of programming crypto.jsw Line 7
hash: 47c169631e973c25ce4a2c364f7df343a71c96afc38316f1dae87b123e4e2e38
crypto.jsw Line 9
signature: R8FpYx6XPCXOSiw2T33zQ6cclq/Dgxbx2uh7Ej5OLjg= crypto.jsw Line 11

Note that the {…} occurs BEFORE the output from the crypto.jsw file’s console commands. I am presuming that this is because the .jsw produces a PROMISE and not an immediate return value. The {…} does NOT expand to show any child values in the debugging screen.

I then altered the code to read as follows:

import {conversion} from ‘backend/crypto’;
$w.onReady( function () {
let x = conversion()
.then( () => {
console.log(x);
})
})

The results in the debugger were as follows:

string2Sign: Welcome to the world of programming crypto.jsw Line 7
hash: 47c169631e973c25ce4a2c364f7df343a71c96afc38316f1dae87b123e4e2e38
crypto.jsw Line 9
signature: R8FpYx6XPCXOSiw2T33zQ6cclq/Dgxbx2uh7Ej5OLjg= crypto.jsw Line 11
{…} New Page Line 6

Again, the “{…}” could not be expanded by clicking, but the fact that it appeared after the console.log() output of the backend code tells me that indeed the return from the backend is a promise, not an immediate output.

So my question is this: how do I retrieve the result from backend operation in my client-side code? As you can see, I am not using any code on the client side to call crypto-js functions directly. I am instead using backend code to call those functions. I am producing observable results in that backend code, and all I wish to do is to return those values to the client-side so that I can use them for mundane purposes.

Your help would be greatly appreciated.

16

@gefullnut
Yes, Wix has certain limitations that may impose handicaps on developers, but you, as a developer, surely knows that there are always certain parts of the code that we write that are deemed to be “untouchable” because their alteration could adversely affect the way that an application works. What Wix supplies is a vast amount of capabilities that do not have to be hand-coded. In my little website, the code I have used so far would have taken me at least a year and a half to produce, and with Wix it took me a few days to produce the same result. I think that’s a pretty good trade-off for not having full access to all the site’s code. There is a reason that I chose not to go the .NET route in my case. It would have given me full control over the site, but at what expense? I have a business to run, and wet-nursing every little aspect of my code would mean that the business just doesn’t happen.

I don’t know your situation, so I can’t say that your frustration is misplaced, but consider the value that Wix delivers vs. your present need for this particular feature. There is likely a workaround, but in the meantime I wish you a lot of luck.

2 Likes
17

@cookiedoodledough You understood properly that you need to handle a Promise in the frontend, you just didn’t get the results correctly. Try something like this:

conversion().then(ret => {
    console.log(ret);
})
18

@yisrael-wix Yisrael, it worked like a charm. Thanks. If I know your office address, I’d be glad to send you some cookies.

1 Like
19

Hi @yisrael-wix . I am trying to generate a proper random number and prefer not to use math.random(). I read about using getRandomValues(). I’ve got as far as successfully installing crypto-js into node-modules.

Nowe I want to use getRandomValues() in a backend function.

I am having trouble understanding what ‘import’ statements I need. All I’ve found in the help and forums is “…each package will have a unique import statement. See the package’s external documentation to learn about what import statement to use…”. I’ve read the doc that I could find on crypto-js but found it confusing. Can you help me with what I need to do just to be able to use getRandomValues() with an example please?

I tried adding const CryptoJS = require(“crypto-js”); to the top of my backend file but that didn’t work. Also if I try to use the function like this: W[w]indow.crypto-js.getRandomValues() it complains about ‘window’ [and ‘Window’]

Cheers, Paul