Adding the license key to constructor

Technical Support
1

Product: WebViewer SDK

Product Version: 11.4.0

My company has recently obtained a paid license key for the WebViewer SDK.
The Apryse Docs say to put the license key in the constructor like this:

WebViewer(
{
path: ‘src/assets/lib’,
licenseKey: key,
},

Doing it like this will have the license key be visible in our codebase, which could be a security issue.

My question is: Do we need to have the license key as a secret variable or is it safe to put the key as a plain string inside the JavaScript Code?

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


When using the WebViewer SDK, embedding your license key directly in your JavaScript code can indeed be a security concern, as it may expose your key to anyone who has access to your codebase. It’s generally a good practice to keep sensitive information like license keys out of the client-side code to prevent unauthorized usage.

Some things you can try:

  • Use environment variables to store your license key securely on the server-side and pass it to your client-side code during the build process.

  • Configure your build tools (e.g., Webpack, Vite) to replace placeholder values in your JavaScript code with the actual license key from the environment variables at build time.

  • Consider implementing a server-side endpoint that securely provides the license key to your client-side code only when necessary.

  • Review your server and client architecture to ensure that the key is only accessible to authorized components.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

3

Hello Marvin,

Thank you for contacting Apryse Forums.

As mentioned in this forum post, there is no way to hide code from the client. Users can see everything sent from the server. Since users can see everything, there is only so much that can be done, namely obfuscation. This is not something Apryse can change as this is how the web works.

> Do we need to have the license key as a secret variable or is it safe to put the key as a plain string inside the JavaScript Code?

We don’t require any further protection of the key other than passing it into the WebViewer constructor, but if you want to make it difficult for other users to see your key, you can try obfuscating it.

Here are some ways to make it harder to find such as using window.btoa to encode the license key and using window.atob to decode it before passing it into the WebViewer constructor. Then uglify and minify the output script so it is harder to read.

// some other js file
window.zfeg48 = ‘bGljZW5zZSBrZXk=’; // randomly named global variable = btoa(‘license key’)

// main.js
WebViewer({
licenseKey: atob(window.zfeg48),
…
}, viewerElement);

You could make the process as difficult and convoluted as possible to deter prying eyes (ex. multiple minified files; each putting together a part of options object before passing into WebViewer). However, it will be accessible during the exchange.

Best Regards,
Darian

2 Likes
4

Hello Darian,

thank you for the fast reply.

Would I be able to store the key in our backend and have it as a runtime variable in the frontend? So after the user is logged in our system, an API call is made which gets the key and puts it in a runtime variable used by the WebViewer?

1 Like
5

Hello Marvin,

Yes, you can store the license key in your backend and set it as a runtime variable in the frontend. The license key will not be exposed in the client-side code this way; however, it will still be accessible during runtime.

Best Regards,
Darian

1 Like