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>
Then we'll access the value attribute through Javascript and link it to the env variable
document.getElementById('key').value = process.env.WEBFORM;
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)