Created
December 28, 2023 04:48
-
-
Save Yagisanatode/5160423dcf80796eb07a3217c7a79342 to your computer and use it in GitHub Desktop.
For tutorial on CSRF in Google Apps Script for Yagisanatode blog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Choose Your Goat</h1> | |
| <form id="goatForm" onsubmit="event.preventDefault();"> | |
| <input type="hidden" name="_csrf" value="<?= getCsrfToken() ?>" /> | |
| <label for="goat_type">Type of Goat:</label><br> | |
| <input type="radio" name="goat_type" id="goat_type_pygmy" value="pygmy"> | |
| <label for="goat_type_pygmy">Pygmy Goat</label><br> | |
| <input type="radio" name="goat_type" id="goat_type_nigerian_dwarf" value="nigerian_dwarf"> | |
| <label for="goat_type_nigerian_dwarf">Nigerian Dwarf Goat</label><br> | |
| <input type="radio" name="goat_type" id="goat_type_boer" value="boer"> | |
| <label for="goat_type_boer">Boer Goat</label><br> | |
| </form> | |
| <input type="button" value="Submit" onclick="submit()"> | |
| <div id="resp">Response: <span id="response">...</span></div> | |
| </div> | |
| </body> | |
| <script> | |
| /** | |
| * When the validation process is completed successfully without Apps Scripting errors. | |
| * @param {String.<Object>} e - event parameter containing 'hasError' boolean and 'text' string. | |
| */ | |
| function onSuccess(e){ | |
| const message = JSON.parse(e) | |
| let color = message.hasError? "red" : "blue" | |
| const resp = document.getElementById("response") | |
| resp.innerText = message.text | |
| resp.style.color = color | |
| } | |
| /** | |
| * Submits the response back to Google Apps Script. | |
| */ | |
| function submit(){ | |
| const form = document.getElementById('goatForm'); | |
| // Create a FormData object | |
| const formData = new FormData(form); | |
| let payload = {} | |
| // Iterate over the form data | |
| for (const [key, value] of formData.entries()) { | |
| console.log(key, value); | |
| Object.assign(payload, {[key]: value}) | |
| } | |
| console.log(payload) | |
| google.script.run.withSuccessHandler(onSuccess).formInputs(JSON.stringify(payload)); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment