DEV Community

Sergio Holgado
Sergio Holgado

Posted on

WEb3form how to avoid exposing your api key

Web3form API keys are being exposed in html files, since any user can inspect the page and copy it, to prevent this create a process.env file and store you API key there

WEBFORM = your-api-key

Then we'll import it into the html file by adding an id to the
access key input as follows

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact us</title>
</head>
<body>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" id="key" >
        <input type="text" name="name" required>
        <input type="email" name="email" required>
        <textarea name="message" required></textarea>
        <div class="h-captcha" data-captcha="true"></div>
        <button type="submit">Submit Form</button>
    </form>
    <script src="https://web3forms.com/client/script.js" async defer></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then we'll access the value attribute through Javascript and link it to the env variable

document.getElementById('key').value = process.env.WEBFORM; 
Enter fullscreen mode Exit fullscreen mode

This will prevent users from inspecting the page and stealing your API key since the env file is not accesible.

If you are contributing to a Github repo or NPM make sure to add the process.env file to your gitignore file or npmignore respectively

Top comments (0)