Preventing Cross-Site Request Forgery (CSRF) in Google Apps Script Dialogs and Sidebars

Cross-Site Request Forgery (CSRF) is a web security vulnerability that allows a nefarious entity to take actions on a website that are unintended by the user.

Typically, this is done by tricking the user into using another website resembling the intended site and then submitting a form or clicking a button. The dodgy site then sends a request with its own payload of nasty stuff on the user’s behalf.

Google Workspace and Google Apps Script’s HMTL Service API protect the user with OAuth2 authorization standards and embed dialogues and sidebars in restrictive iframes to sandbox these environments. However, there may be a requirement to further protect your users from unintentionally sending form data using the google.script.run Client-side API that sends data back to Google Apps Script, with a server-side generated anti-CSRF token.

Indeed, when completing a CASA Tier 2 security assessment for a Google Workspace Editor add-on this was a requirement for me to not only pass the assessment but to also meet GDPR requirements.

An anti-CSRF token will allow us to create a unique ID for the current sidebar or dialogue session. We can store this token server-side in the User Properties of the Properties Service and then add the token to a hidden input element in our form client-side on our dialogues and sidebars. We can then send this token along with our form payload back to Apps Script where we can first validate the token before continuing.

The following script and tutorial provide a brief example of how to do this.

The Example Dialogue

We will first open a Google Sheet (but you can open a Google Doc or Slide and do the same thing) and create a bound Google Apps Script.

Our simple tasks will be to:

  1. Create a menu to access a modal dialogue in the Google Sheet.
  2. Create the modal dialogue with a form containing a radio selection and a submit button.
  3. On submission, the form is validated with the anti-CSRF token before

anti-CSRF token example Google Sheets DialogueCreate a Menu Item and Modal Dialogue in Google Sheets

First, let’s get our UIs out of the way.

Lines 5-12 generate the Google Apps Script simple trigger onOpen(). This will create our menu item that will access the dialogue using the Spreadsheet App Class’ getUi() method.

Next, we build the dialogue. Here, we invoke HtmlService to create a template from a file, referencing the ‘Index.html’ file as our source file. We will take this approach to use scriptlets in our HTML to define our CSRF token.

Finally, we will call the UI method again to display the HTML in a modal dialogue.

Hire a Google Workspace Developer for your Business Needs

Create the Front-end ‘Index’ HTML Page


<!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>

view raw

Index.html

hosted with ❤ by GitHub

 The HTML form & CSRF token

Lines 10- 19: Here we are adding our form containing our three choices of goats for our survey.

Note the first input type in the form:

<input type="hidden" name="_csrf" value="<?= getCsrfToken() ?>" />

This is where we are inserting a custom token into the current dialogue session. we have named it “_csrf”. You can also see that we have used Google Apps Script’s HTML printing scriptlets to display the anti-CSRF token returned from the getCsrfToken() function.

This function is called from the Google Apps Script side and generated as a part of the HTML template-building process. More on this function later.

 

Line 20-21: The submit button is added outside the form so as not to generate an error when clicked.

A response line is also added to display if the token is correct or not.

Create and Publish Google Workspace Add-ons with Apps Script Course 300px

Submitting the Form

submit()

Lines 43-64

When the ‘Submit’ button is clicked, the submit() function is invoked.

Here we retrieve the form element and use the new FormData() constructor to gather all the form responses including our hidden CSRF token.

Next, we iterate over the form data entries sorting the keys and values in the payload object.

Finally, we use the google.script.run API to send a stringified version of the payload back serverside.

We also invoke the withSuccessHandler method to return a message once validation of the token has been carried out.

onSuccess(e)

Once the CSRF token has been validated against the stored token value serverside (Apps Script-side) a stringified object will be returned back to the HTML file containing a hasError boolean property and a text string property.

If there was no match between the sent CSRF token and the stored token, we change our message colour to red.

Then we report the message in the ‘response’ span under the submit button.

Generate the CSRF Token in Google Apps Script

This function is called from the Index.html file template when it is being generated.

The function uses the Apps Script Utilities Service to generate a Unique User ID using the getUuid() method.

Next, the token is stored in the user’s property service. This way the token is only accessible for that use for this script. We will generate and store this token each time the user opens dialogue to make it even more challenging for an attacker to breach.

Finally, the token is returned so it can be stored in the HTML file.

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

Validating the CSRF token in Apps Script

Lines 6-10: When the user submits the form, it is sent to the formInputs() function. Here we first parse the stringified form data back to an object and then set up a message object that we will return when our script is complete.

On line 14, we grab our stored CSRF token value so that we can compare it against the one coming in.

Then on lines 17- 27, we check if the form CSRF value matches the store CSRF token value. If it doesn’t, then we return the message variable with our error text.

If the tokens match, then you can carry on a validate your other form inputs before continuing with your data.

That’s it. That’s the whole script. Google Apps Script makes it really easy to implement this security token.

Is It Really Necessary to Add CSRF Tokens to your Google Workspace Dialogues and Sidebars?

Well…probably not. Particularly if you do not intend to publish your Add-on to the public. However, if you do have some restricted scopes that need to be authorised by your users then part of the CASA Tier 2 Assessment then it probably isn’t a huge deal.

The likelihood of someone finding or caring about your dialogues and then trying to exploit them along with Google OAuth and Iframe restrictions would make it pretty hard for a baddie to do any damage to your Google Workspace environment. But, you never know.

Create and Publish a Google Workspace Add-on with Apps Script Course

Need help with Google Workspace development?

My team of experts can help you with all of your needs, from custom app development to integrations and security. We have a proven track record of success in helping businesses of all sizes get the most out of Google Workspace.

Schedule a free consultation today to discuss your needs and get started or learn more about our services here.

~Yagi.

 

How to Automatically Share Teachable Students to Google Drive Files and Folders when they Enroll in your Course

Not only are Google Workspaces, Google Sheets, Docs, Forms and Slide great to work in and look awesome, but the convenience of collaborating and sharing your Google Drive Files and Folders is also super useful. So much so that many course creators share their documents with their students all the time.

The problem that course creators have is that they are generally stuck with two options when sharing their Google Drive files and folders:

  1. Set sharing to Anyone with Link can view. And hope other freeloading students don’t find and share their course material.
  2. Manually share each student as they enrol. Which is time-consuming for the course creator and annoying for the student who needs to wait to be shared before they can get their hands on your awesome course content.

Both options are really terrible.

I reluctantly chose option one for my first Google Sheets Essentials Teachable Course and it really bothered me. I needed to find a way to share my Google Drive course content with only those students who signed up for my course.

In this tutorial, I will guide you through creating a Google Apps Script web app that receives a webhook notification when a student enrols onto one of my Teachable courses. If a student enrolled with a non-Gmail or non-Google Workspace domain email account, they will be sent an email with an attached form to add a Google-friendly email.

If you want a copy of the Google Sheet with the Apps Script attached, without coding it all yourself, plus written-visual tutorials on how to quickly set up your sheet head over to my teachable page now and purchase the sheet and instructions for just $2.95. Yeap not even the price of a cuppa.

The fun thing is that you will experience how the whole process works, because…well…that’s how I am going to share the Google Sheets file with you when you enrol. Neat, hey?

As a part of your purchase you will also get a few other perks:

  • Set files or folders for ‘view’, ‘comment’ or ‘edit’ access. 
  • Add existing students to your selected course Google Drive Files and Folders.
  • Get your full course list from your Teachable site right in your Sheet. 
  • A choice to bulk set your files and folders to:
    • prevent downloads, copying and print.
    • Prevent sharing by any documents you have provided ‘edit’ permission to.

If you want to understand how it all works and build your own, read on, you can always throw a couple of coins at me and enrol to run the workflow just for fun.

Instantly share ONLY Teach:able Students to selected Google Drive Files and Folders

 

If you are looking to build your own Teachable Course you can check out a how-to guide here:

How to launch an online course—and craft your email strategy

Continue reading “How to Automatically Share Teachable Students to Google Drive Files and Folders when they Enroll in your Course”

Create a Google Workspace Add-on file picker card with CardService that opens a Google Picker in an overlay window – Google Apps Script

Google Apps Script: Card Service, Google Workspace Add-on, Google Picker

So you have this awesome idea for a Google Workspace Add-on (GWAO), but you need to be able to select Google Drive files and folders as a part of your process.

Sure, you could just open up another tab and find the link and paste it in a text input or paragraph input in your Card Service build, but that is time-consuming and kinda defeats the purpose of the convenience of the sidebar.

Ideally, you would want a built-in File Picker class that would select the files and folders from the directories you need. Whelp… unfortunately, we don’t have that right now for Google Apps Script’s Card Service.

One approach might be to build out a file picker card selecting each parent’s files and folders and navigate through it like, say, a linked list. Now, I haven’t tried this approach, but looking at how slow and memory expensive it is to call your Google Drive through either Google Apps Script’s Drive App class or the Advanced Service Drive Class, I gave this a pass… for now… .

Instead, I decided to incorporate Googles File Picker API as a popup window from the sidebar, because, it’s kinda what it is designed for. Also, not gonna lie, the example at the bottom of the docs was a huge help (cough … copy and paste … cough)

Let’s take a look at what we are going to build.

Continue reading “Create a Google Workspace Add-on file picker card with CardService that opens a Google Picker in an overlay window – Google Apps Script”

Google Apps Script: Store a Unique User Key from a User Accessing your WebApp [updated Dec 2021]

Google Apps Script: WebApp [updated Dec 2021 – With thanks to Greg S]

In this tutorial, we will cover how you can get a unique temporary access key from a user accessing your WebApp that lasts for 30 days.

Temporary access keys allow you to track users as they use your WebApp over time while still providing anonymity to the user by providing only an access key to that user. Rather than, say, use their name or email address.

Why is this important? Well, you might want to limit the number of times a user submits a form on your WebApp. If you can get a user’s access key unique to them then you can store the number of attempts by the user and check it before the data is submitted.

For example, in a previous post, we created a chain story that we might want to limit the number of times our users contribute to our story to once a day.

NOTE! This tutorial is pretty much standalone. However, it will require some basic knowledge of Google Apps Script WebApp and HTML. Don’t worry if some basic setup parts are not covered in this tutorial, I’ll link to how to do these bits if you need some more instruction.

Let’s take a look at what we are going to make:

Continue reading “Google Apps Script: Store a Unique User Key from a User Accessing your WebApp [updated Dec 2021]”

Google Apps Script: Automated PDF Certificated Creator That Is Emailed to the Attendee (Updated Feb 2022)

Google Apps Script: DriveApp, PropertiesService, SpreadsheetApp, GmailApp, SlidesApp. Google Slides, Google Sheets.

Have you ever wondered how people create certificates en mass and send them out automatically? You are in the right place.

In this tutorial, we are going to:

  1. Create Certificates of Attendance for multiple attendees using Google Slides and a list of attendees in Google Sheets.
  2. Send those certificates as an attached PDF to the attendees.

We’ll set it up so it is super user-friendly with a handy menu in your Google Slide template so that all you have to do is to update your Google Sheet of names each time you run the course and then click a few buttons.

Google Apps Script Menu Items in Google Slides

Also, we will run an example so you can see how it all works and what you need to do to set it up.

For the coders out there, I think I have documented the Google Apps Script code enough for you to figure out how to quickly implement your own project. However, I have also added a smalls discussion of some parts of the code at the end.

This is a standalone tutorial. However, it draws from two main tutorials if you want to explore those first (Though it is not essential):

Let’s get cracking.

Continue reading “Google Apps Script: Automated PDF Certificated Creator That Is Emailed to the Attendee (Updated Feb 2022)”