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
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
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
Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are
New to Zoho TeamInbox?
Zoho TeamInbox 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
Zoho Desk Community Module Reporting
I can't seem to find any reporting for the community module in Zoho Desk. Am I missing something or are there just no reports available?Zia AI capabilities now available in all paid editions
Hello everyone, We are expanding the availability of AI-powered features in Desk to the other paid subscriptions from 7th July 2026. Right now, the following AI-based features are available for Enterprise edition users: Intelligence: Sentiment analysis,Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México
Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México Hola equipo de Zoho, Durante los últimos meses he observado una necesidad recurrente entre varios clientes en México relacionada con el cumplimiento fiscal delAlternate color rows
After I changed the background color to a dark gray and changed the alternate rows to a light gray. I have discovered that I can no longer change the text in the light gray rows to Bold.Workflow Assistance in Zoho CRM
Our client's sales team visits customers on-site and currently fills a physical paper form to capture customer details, and then separately re-enters the same data into Zoho CRM via the mobile app — resulting in double data entry. We want the salespersonCan we generate APK and IOS app?
Dears, I want to know the availability to develop the app on zoho and after that .. generate the APK or IOS app and after that I added them to play store or IOS store.. Is it possible to do this .. I want not to use zoho app or let my customers use it. thanksPricelists
So we have them in books but I cannot find them in commerce?Cliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsCollapsible Sections & Section Navigation Needed
The flexibility of Zoho CRM has expanded greatly in the last few years, to the point that a leads module is now permissible to contain up to 350 fields. We don't use that many, but we are using 168 fields which are broken apart into 18 different sections.Important update on our transition to the new video platform framework
As part of our ongoing platform changes, users in select regions, including the United States and other supported data center locations, have been migrated to our new video platform framework. Due to this migration, some participants may notice changesZoho CRM Layout Rules: Nine New Actions, Profile-Based Execution, and Interactive Preview
Hello everyone, Availability: This feature is now available for customers in the JP and SA DCs. It is planned to be released for other customers in soon. We’re excited to announce powerful new enhancements to Layout Rules in Zoho CRM - a feature builtValidation Rule Not Working for Mandatory Field in Zoho Blueprint
As a Zoho user, we created a validation rule for a specific field. However, we noticed that when we made the same field mandatory within a Blueprint, the validation rule we defined did not work. When we reported this issue to Zoho Support, they statedCRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users
Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storageTicket id issues
When I reply a ticket from desktop, it doesn't have ticket id in the subject and it's great. When I reply a ticket from Zoho desk mobile, Zoho adds ticket id in the subject and I don't want that. Please help in this matter.Une collaboration simplifiée grâce à l’interopérabilité des calendriers
L’interopérabilité des calendriers permet aux équipes utilisant différentes plateformes, comme Zoho Calendar et Google Calendar, de consulter facilement les disponibilités de leurs collègues sans avoir à utiliser plusieurs outils. Dans les entreprisesOverview on users IMAP settings
We have about 30 users who all have the channels/email/email configuration/IMAP integration/O365 enabled and emails are synchronized. Here my problem: Passwords for the email accounts are expiring on individual bases and most of the users forget to updateFormat of data after export to spreadsheet
Dear Zoho, can you explain to me what is the point of a report exporting to XLSX if the format of the amounts that will be created there is in text format and not suitable for anything? Why do I need data in a sheet with which nothing more can be doHow to add custom icons in Sites ?
I've been trying to upload some of my own icons (specific to my business) to my zoho Site draft, and can't find a way to do it. I guess the workaround could be to insert images instead of icons and upload my icons as images, but I was wondering if its possible to customize the icon library.Zoho Forms API
Is there any way to get all form entry list using API? Looking forward to hear from you#21 Five Minutes Every Monday That Replace an Hour of Digging
Welcome to the final stretch of our journey. In this series so far, you have configured Zoho Invoice, created and managed your transactions and built a workflow that shares invoices and collects payments almost on its own. You have been doing the work.Kaizen #251: From Campaign Leads to Sales Orders with Zoho CRM Mass Action APIs
Hello all!! In growing businesses, sales teams often deal with a large volume of records every day - leads from campaigns, qualified prospects ready for conversion, and approved quotes that must be converted into sales orders. Performing these actionsIntroducing the Employee Portal for internal job posting
Employee referrals and internal applications are one of the most trusted hiring channels. But in many organizations, employees only hear about openings through messages, word of mouth, or after the role has already been open for a while. When employeesInspection Table
Hello Latha, We created a job sheet that includes the new table (Inspection Table) which was introduced recently. However, agents are not able to see the rows in the inspection table. Could you please investigate this issue and get back to us? PleaseZoho Mail is down?
We stopped getting new emails since 8:42am EST and mail.zoho.com shows an error.Forwarding without verification
Hi, I use Tripit to keep track of all my business travel. I've recently moved over to Zoho and wanted to set up a forwarding rule to send various travel confirmation emails automatically to plans@tripit.com Obviously this is an email address I don't control,Disappearing Mouse cursor in Zoho Mail / Windows 11 (Chrome + Edge)
I'm seeing an issue when writing mails with the light theme with the mouse cursor being white and the document area also being white - making it nearly impossible to see the mouse cursor. I see the problem on Windows 11 under Chrome and Edge. (Yet toRequest to unblock user creation error (This user is not allowed to add in Zoho)
Hello Zoho Support Team, I am the Super Admin of my Zoho Mail organization. When I try to create a new business email user account, I encounter the following error message: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.comZoho Mail account blocked after malware incident – request for review and unblock
Hi Zoho team and community, My Zoho Mail account has been blocked due to outgoing email activity that was detected as spam or unusual sending behavior. The root cause was a malware infection on my computer, which compromised several of my accounts, includingcreating an alias
your instructions for creating an alias are wrong. there is no add alias in my mail account. also i dont have a control panel link just a settings link how do i really make an aliasIP Address blocked by many servers
hello team this is to inform you that the zoho ip address 103.117.158.51 has been marked spam and not trustworthy by outlook and many other company servers. kindly discontinue using this ip to maintain a healthy domain reputation for your clients. RegardsAutomatically set the default VAT percentage on a quote
Every time I create a quote, I have to manually adjust the VAT and activate the checkbox for 21%. But all of our quotes include 21% VAT. So now occasionally, it happens that the checkbox is forgotten, and the customer receives an incorrect quote (withoutWhat's New in Zoho Inventory | June 2026
Hello users, June 2026 introduces a range of exciting enhancements to Zoho Inventory. With the full rollout of the Zoho Inventory Windows application, the launch of Terminal Payments, and new tracking combinations in Advanced Inventory Tracking, you canTime Zone is incorrect
Time zone is not working properly...I've checked it twice. I'm eastern U.S. time it's currently 12:22 pm EST. CRM shows 3:22 pm EST.Send a converted Contact or Deal back to Leads using the Restore Lead extension for Zoho CRM
Hello everyone, This comes up more than people expect: a Lead gets converted into a Contact, and sometimes a Deal along with it, because at the time it looked ready. Then the situation changes the opportunity turns out to be much further off than expected,Zoho CRM mobile updates: Reports module, record tags, dynamic formula field, and more
Hello everyone, We've made a few updates to the Zoho CRM mobile app to enhance your mobile CRM experience and efficiency. Here's a quick look at what's new: Reports module (iOS ) Record tags (iOS) Dynamic formula field (Android) WhatsApp business deepSide scroll bar missing from "new editor"
The "new editor" simply lacks a side scroll bar. Unable to navigate long notes without using the keyboard. Bad upgrade... (using web version)Zoho Desk MCP doesn't expose all functions
Hello, I'd like to be able to draft (rather than send) ticket replies using Claude Cowork. However, the Zoho Desk MCP doesn't currently offer that, despite it being available in the API (https://desk.zoho.com/DeskAPIDocument#Threads#Threads_DraftEmailReply).Zoho Community Digest - July 2026 | Part 1
Hello everyone! Keeping up with everything across the Zoho ecosystem is a lot, so we're bringing back the Zoho Community Digest, now weekly. Each week we round up the need-to-know announcements from the Zoho Community Forums, four editions a month, soCanva Integration
Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,Feature Suggestion for Zoho Social: Auto-reply to Comments or Keywords
Hi Zoho team, I'd like to suggest a very specific feature that would be extremely helpful for customer engagement: the ability to automatically send a reply to comments on posts — either all comments or those containing specific keywords. For example,Next Page