Kaizen #24 - CORS and the JS SDK
Hello everyone!
Welcome back to another week of Kaizen!
In this post, we will discuss the Cross-Origin Resource Sharing (CORS), and how it is used in Zoho CRM's JS SDK.
What is CORS?
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers in requests to allow web apps running in origin A, access to selected resources in origin B.
The below image depicts how CORS requests are served in a browser.
Here, in a web document hosted in domain-a.com, the main page, the layout CSS, and the image is served from the same domain (domain-a.com), while the canvas image is served from a different domain (domain-b.com).
Therefore, the request to fetch the canvas image from domain-b.com is a cross-origin request controlled by CORS.
What requests use CORS?
- Invocations of the XMLHttpRequest (XHR).
- Web fonts so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
- Images/video frames drawn to a canvas using drawImage().
- CSS shapes from images.
CORS Request Types
The browser decides the request type based on the request methods (GET/PUT/POST/DELETE) and the request headers.
The two types of CORS requests are
- Simple Requests
- Pre-flight requests
1. Simple Requests
- The browser sends the header ORIGIN in the XHR (XMLHttpRequest) to inform the target site about the request's origin.
- On the target site, the server compares the ORIGIN value with the allowed origins.
- If the source is allowed, the target site allows access to the resource to the requested site. Otherwise, the request is denied.
2. Pre-flight Requests
Before the actual request is sent, a pre-flight request is sent to the target site.
- The browser sends the pre-flight request via the OPTIONS HTTP request method.
- The server sends the details about the target site such as the allowed methods and the allowed origins.
- After deciding whether the target site could return the requested information based on this response, the browser makes the actual GET/POST/PUT/DELETE request.
Therefore, the server must send back the header Access-Control-Allow-Origin in the response header to serve simple and pre-flight requests appropriately.
Access-Control-Allow-Origin : [origin]
Example : Access-Control-Allow-Origin: https://www.example.com
This header allows only the website mentioned here to access the resources.
Here, https://www.example.com can access the resource on the target site, since it is explicitly allowed.
The server compares this value to the one sent in the ORIGIN header of the request, and accepts/rejects the request accordingly.
Access-Control-Allow-Origin : *
Example : Access-Control-Allow-Origin: *
The wildcard character (*) means that any site can access the resource in the target site. This practice is unsafe and hence, not widely used.
CORS and Zoho CRM JS SDK
Zoho CRM's JS SDK contains methods to invoke Zoho CRM's APIs that are CORS-enabled. All you have to do is register your JS app in Zoho Accounts Developer console and authenticate it.
You can then just use the methods available in our JS SDK in your code, and make API calls to Zoho CRM.
Prerequisites
- Your app must have the redirect.html page to which the access token is sent.
- The redirect.html page must contain the script to save the tokens in local storage based on the parameters sent after user authentication.
Before you can use the CRM APIs, you must
a. Register your app
b. Authenticate your app
a. Register your app
- Go to https://api-console.zoho.com.
- Click ADD CLIENT.
- Choose the client as Java Script and click CREATE NOW.
- Specify the client name, homepage URL of your app's UI, redirect URI (the HTML page of your application where you want the users to be redirected to after providing consent to your app), and the JavaScript domain.
- Click CREATE.
- Your client ID, client secret will be displayed under the Client Secret tab.
b. Authenticate your app
- Call the authorization URL from your HTML app.
https://accounts.zoho.com/oauth/v2/auth?scope={scope}&client_id={client_id}&response_type=token&state=zohocrmclient&redirect_uri={path_to_the_redirect.html_of_your_app} - Provide the necessary scopes, and the redirect_uri.
- The Zoho Accounts page prompts for user credentials. The user enters the credentials and may grant access for the entire session.
- After the user grants access, Zoho Accounts redirects the user to the page you specified in the redirect_uri. You can see the access_token, grant_for_session as parameters to the redirect uri in the address bar.
Example: javascriptDomainName/redirect.html?access_token={access_token}&grant_for_session=true|false - The redirect.html file must run the script to store the access token of a particular user in local storage and use it while making API calls to Zoho CRM. This file is available in the attached ZIP of this post.
- Parse the access_token parameter to obtain the OAuth token.
- Note that the OAuthtoken expires every one hour. Generate a new one as and when required.
Note
- You can find the sample JS app as an attachment to this post.
- You can also download our JS SDK from the Github page.
After you download the ZIP, it opens the jssdktest folder that contains the below folders.
- app - This folder contains the redirect.html file which holds the script to store and retrieve tokens from local storage.
- index.html - The HTML file that renders the form where the user-entered details are captured to insert a lead in Zoho CRM. This file also calls the init() method to simultaneously initialize the SDK while the user submits the form.
- js - this folder contains the zcrmsdk.js and the processData.js files.
zcrmsdk.js holds all the API methods.
The processData.js file contains the script to initialize the SDK (init()), the action that happens when the user clicks the Submit button on the web page (submitData()) etc,.
Let us now see how CORS works while using the JS app.
Step - 1: User Redirection and SDK Initialization
The user visits your web page and the app redirects the user to Zoho Accounts with the client id, scopes, and the redirect URI that you have specified in the processData.js file.
The user enters the Zoho Credentials. Zoho Accounts prompts for user consent.
When the user clicks Accept, Zoho Accounts redirects the user to the URL you specified while registering your app. In our case, it is the path to the redirect.html file inside the app folder.
This step simultaneously initializes the SDK and runs the script to store the token.
Step - 2: redirect.html runs the script to store the access token
After the user grants access to the app, the access token is sent as a parameter in the address bar of the redirect URI.
The redirect.html invokes the setAccessToken() method and stores the token in local storage.
Here's the code snippet.
function setAccessToken() { var hashProps = getPropertiesFromURL(); if(hashProps) { for( var k in hashProps) { if( hashProps.hasOwnProperty(k)) { var key = ( k === 'access_toke' || k === 'access_token' ) ? 'access_token' : k; var value = ( k === 'api_domain' ) ? decodeURIComponent(hashProps[k]) : hashProps[k]; localStorage.setItem(key, value); } } } setTimeout(function() { window.close(); }, 0); } setAccessToken(); |
You can also see the access token in the browser console under the Application tab.
Step-3: Display the Homepage of the app (index.html)
After the access token is obtained, the index.html page (the homepage URL you specified while registering) of your app is displayed.
The user enters the details in the form and clicks Submit.
Step-4: Invoke the submitData() method from the processData.js file
Clicking the Submit button invokes the submitData() method that contains the code to insert the lead in Zoho CRM with the details furnished in the form.
The code snippet is as follows.
function submitData() { var firstName = document.getElementById("firstName").value; var lastName = document.getElementById("lastName").value; var email = document.getElementById("email").value; var company = document.getElementById("company").value; var dataObj = {'First_Name': firstName,'Last_Name': lastName, 'Email': email, 'Company': company}; var input = {'module':'Leads', 'body':{'data':[dataObj]}}; headers = {'Content-Type': 'application/json'}; ZCRM.API.RECORDS.post(input).then(function(resp){ var jsonData = JSON.parse(resp); window.location.replace(window.location.origin + "/view.html"); //location.reload(); }); } |
Step-5: Make the cross-origin request to insert the lead
The method submitData() sets the headers and makes a function call to ZCRM.API.Records.post() which in turn, makes a CORS request to the Zoho CRM server.
You can see the request headers being set in the browser console under the Network tab.
As you can see, the header Access-Control-Allow-Origin contains the value as the JavaScript Domain.
When this domain and the one specified during app registration matches, the request goes through and the lead is inserted in CRM. Otherwise, the app receives the error.
Below is the screenshot after the lead is inserted in CRM.
The major advantage of using the JS SDK is that all APIs are available as JS functions, and CORS code handling is already done. All you have to do is incorporate the requested methods in your app's code and make calls from the registered JavaScript domain.
We hope you found this post useful. Stay tuned for more!
Cheers!
Access your files securely from anywhere
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Shylaja S
Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Syncing with Google calendar, Tasks and Events
Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planningMerge invoices
This has come up three times in a month of me using the system. a client whom i do work for on a regular bases asked me to invoice separate jobs on a single invoice. I would then go and cancel the old invoices and make a new one. It would be great if i could just select the invoices and click merge to create a single invoice.Pipeline stages for product-led growth (PLG) subscription services
(Estagios de pipeline com foco em serviço digital por assinatura (PLG)) Dear colleagues, I am writing to request assistance with a significant challenge I am currently facing. I manage a digital service that operates on a subscription-based model. I amMultiselect lookup in subform
It would be SO SO useful if subforms could support a multiselect look up field! Is this in the works??Zoho CRM for Email ( Microsoft add on app) Feb 25, 2025
We are currently experiencing issues with Zoho CRM for Outlook despite updating the Microsoft add on app and Zoho software to the latest versions. When working in Outlook on our Macs and PC's and 365 on the web, when we try to link an email in OutlookSheet View for Reports
We often need to filter our contacts in a way that is too complex for Custom Filters (which now allows filtering by Related Modules - amazing! - but doesn't allow for an *OR* relationship between the multiple filters) or Custom View (which does not yetFeature enhancement: Highlight rows based on a cell value
Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to drawUrgent: Unable to Receive OTP Email for Portal User Registration in Zoho Creator
I paid to enable the Portal User feature on 2/25, and followed the official instructions (Youtube video: Customer Portals | Zoho Creator) to set up the Portal User using my Gmail account. However, I am not receiving the OTP email and am unable to successfullyZoho not receiving verification email.
I developed a website registration page and need to send verification email. I am using sendinblue for sending out the verification emails. Somehow, the mail is not being received by the Zoho users. Gmail, outlook, yahoo domains works fine but when I try to send the mail to my Zoho account I am not able to receive the mail. Can you please let me know what might be the issue?Restore deleted spreadsheet
Hi all, I can not find my spreadsheet. It seems that my spreadsheet is deleted. Please, restore the spreadsheet. Thanks in advanceLookup fields can't be used for anything important
Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?Function to check frequency of customer ordering patterns
Hi, I'm no coder, so I thought I could make use of Chat GPT to generate some Deluge script to create a function that would check order frequency of our customers so that I could send an email if they go beyond their usual order pattern. Chat GPT and ClaudeBetter Control over Team Ordering and Display
Two feature requests for Zoho Desk team drop downs: The ability to change the order of teams, currently it's not in alphabetical order, which is confusing. I'm thinking a manual ordering via number or drag and drop, alphabetical order, and creation orderClear specific tag or tags from all leads
I'm looking for a way to clear a specific tag from all Leads. I have a function when a tag is added to a lead they are added to a campaign and their status is set to "invited". I need to find a method to remove the tag. If I try to delete the tag to clearCisco Webex Calling Intergration
Hi Guys, Our organisation is looking at a move from Salesforce to Zoho. We have found there is no support for Cisco Webex Calling however? Is there a way to enable this or are there any apps which can provide this? Thanks!Has Anyone Else Built a State Machine into a Function?
I'm in the process of building a state machine for lead lifecycle management within Zoho CRM, and I'm curious if anyone else has tried integrating a state machine into their Deluge functions, especially considering Zoho’s 12-function cap. I’ve managedIs there a way for a custom function to trigger a custom made email alert?
Hi Zoho Team, We have currently maxed out our 30 workflows in one of our department and we are trying to find ways to make it more efficient. We usually use our workflows to send automated email notifications per team leader for approval of tickets. IsUnified WhatsApp Number Management in Zoho Desk and SalesIQ
Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbersMulti User Lookup field on the Zoho CRM iOS app.
Hello all! Hope you are all safe and sound. We have now brought in support for the Multi User Lookup field on the Zoho CRM mobile app. Below are the enhancements that are supported in this update: * Multi User Lookup field can be added through theHelp with Deluge Script in Zoho SalesIQ (Input Variables Always Null)
Hi everyone, I’m working on a Deluge script for Zoho SalesIQ, specifically for a block in Zobot. The script is supposed to: Check the visitor’s name when they start a chat. If the name is empty, return false; if a name is present, return true. However,Item/service subtotal
Just discovered & really pleased that we can drag to re-order the line items in Sales orders & Invoices, a very nice feature which doesn't seem to be documented? It would be nice to be able to insert a subtotal as a line item to complete this great featureHide/Show Certain Fields When Creating/Editing Invoices, Estimates, Etc.
Hello there, I would like the ability to hide or show certain fields for different employees/roles in my company when they are creating or editing invoices, estimates, etc.. Most of the time, we don't use half of the fields shown on the create/edit invoiceIs there a way to make an account inactive in ZoHo Desk
We have a few Clients "Accounts" that we no longer do business with. It would be beneficial for them to not show up in lists. However, we want to go back and view tickets, time, etc.Any way to Associate a Recurring Invoice with Deal/Potential in Zoho CRM
When we create an Invoice in Zoho Books, we have the option to associate that invoice with a Potential/Deal that is tied to that same customer. Can we do the same thing with Recurring Invoices? When creating a Recurring Invoice, I want to be able to AssociateSSO/SAML
Question - how are you guys handling SSO for Desk? It seems the only options lead back to ADFS which is a dying technology, stupidly complicated to set up and configure (I mean, you can put that on your resume) and seems like overkill for SSO when AAD does it so much better and effortlessly. We want to have our clients have SSO to log into our support portal and we want our Agents to have SSO as well. I shouldn't have to expose our server, turn on ADFS, configure it, install multiple clients (SyncAre downloadable product available in Zoho Commerce
Hi all. We're considering switching to Zoho Commerce for our shop, but we sell software and remote services. Is there a features for downloadable products? I can't find any information about this. Thank you very much AliceAsk the Experts 17: Elevate Customer Communication With Multichannel & Instant Messaging
Hello Everyone, Get ready for the opportunity to interact with Zoho Desk specialists! This month, we’re diving into Multichannel Operations, helping you manage customer interactions across various platforms seamlessly. Why Join? Customers reach out throughZOHO DESK
I use Outlook Exchange to receive emails and want to forward them to Zoho Desk for better management. Additionally, I want to reply to emails in Zoho Desk and have them sent to customers via Outlook Exchange, but I don’t know how to configure it.Automating Custom Web Link Messages to Customers via Instant Messaging in Zoho Desk
Hello, I am looking for assistance with Zoho Desk's Instant Messaging feature. Is there a way to automate the sending of a custom web link to customers every day at 6:30 PM? Any guidance or suggestions on how to achieve this would be greatly appreciated.Exciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!
We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each underAn error occurred while uploading the attachment.
From the image below, attaching files is not possible via the website but is supported through the Mobile App.One time offer in Zoho Campaigns
Hello! I have an idea to improve my sales. I would like to make a "one time offer" in Zoho Campaigns with a clock that will count down the bid validity period. Is it possible? Regards.How to Initiate WhatsApp Message on SalesIQ?
I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.Multiple self client instances
there a couple of details that deserve clarification / improvement in Zoho's OAuth 2: 1. for building true server apps - cloud to cloud REST - one has to choose Self Client when creating a new instance in API Console; Server-based Appplications is slightlyWorkdrive Oauth2 Token Isn't Refreshing
I have set up oauth for a bunch of zoho apis and have never had a problem with oauth. With workdrive i am using the exact same template i usually use for the other zoho apps and it is not working. All requests will work for the first hour then stops soZoho Desk - Delete an email conversation
When using Zoho support desk I see an option to delete and edit conversations that are comments, BUT if the conversation was automatically added as a conversation from an email, then the option to delete it seems not to be available. Is there a way toOrganizational Emails Send through Email Relay Server
Hello, It would be great if the the Organizational Emails could send through the Email Relay Server as well. I often need to send email as someone else and since we use the GMail API option I have to use the organizational emails to do this. We use Postmark for our Email Relay Server to increase deliver-ability which is something that we have had issues with when sending everything through Zohos servers. Also with postmark there is no need for each organizational email to have its own credentialsEmoji support in workdrive
Hello, We are using emojis in our filenames and folder to help visually find relevant data. Currently Workdrive is stripping out emojis and the rest of the filename (along with the suffix), making the file unreadable when they are synchronized with desktop.What is a 'user' in Zoho Surveys, and can I have multiple Offline Kiosks running?
Is a 'user' the amount of people that can make and edit surveys on the website? I basically just want to know if I am able to have multiple Offline Kiosks running on multiple devices at the same time. Either on the Basic or Plus plan which both have 1Fundation / Non profit : Could you help ?
Hi, We're about to handle a Medical research fundation, non profitable structure, what kind of prices could we hope from you ? Could you help us ? We would need Survey, automated campaign and ZIA Thanks in advanceNext Page