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
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 #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 areKaizen #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 achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.
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 CRM for Gmail Extension Not Working in Brave Browser?
Is anyone able to get the Zoho CRM Chrome Extension working in the Brave browser? They're both built on the Chromium platform and every other Chrome Extension works with the exception of Zoho CRM for Gmail so any ideas here?Sharing URLs and direct access
Hello, I am storing my team's email signature images on Workdrive. I am creating a public image download share and adding “?directDownload=true” so that the image can be accessed without the Workdrive interface. A few questions: 1) Can we generate friendlyhow to change the page signers see after signing a document in zoho sign
Hello, How can I please change the page a signer sees after signing a document in Zoho Sign? I cannot seem to find it. As it is now, it shows a default landing page "return to Zoho Sign Home". Thanks!Question about using custom_fields in Storefront Add-to-Cart API (error 2003 – required details)
Hi everyone, I’m working with the Zoho Commerce Storefront API, specifically the Add to Cart endpoint: POST /storefront/api/v1/cart According to the documentation, this endpoint supports a custom_fields parameter for adding line-item custom data. I’mCan a project be cloned?
Good afternoon, greetings. I would like to ask if it's possible to clone a project in Microsoft Project. I found a way to do it using templates, but I'm not sure if there's a direct way to clone a project. Thank you in advance for your attention, andTimesheet Tasks in Zoho Books: associate to service item
How do we associate a service item to timesheet tasks in Zoho Books? For example: Joe spent 5 hours on project:task1 which is Service Item#1 (Income:Service1). When the invoice is issued thru the Project Invoice section, this is not available. When theWhy Sharing Rules do Not support relative date comparison???
I am creating a Sharing Rule and simply want to share where "Last Day of Coverage" (Date field) is Greater than TODAY (Starting Tomorrow). However, sharing rules don't have the option to compare a date field to a relative date (like today), only to StaticTask/Activity indicator in SalesPipeline overview has disappeared
I Just logged in my ZOHO CRM first 2026 checking my salespipeline overview , Every record card used to show an indication that there was an open task (Yellow if the expiry date was close, red if the expiry date was today and grey when it had expired).Tip #56- Accessibility Controls in Zoho Assist: Hearing- 'Insider Insights'
As we begin the new year, it’s a great time to focus on making our tools more inclusive and accessible for everyone. Remote support often involves long hours in front of screens, varying lighting conditions, and users with diverse accessibility needs.Zoho Desk Android app update: Table view for All Departments view, custom button
Hello everyone! In the latest version(v2.9.25) of the Zoho Desk Android app update, we have introduced Table view for the 'All Departments' view in the ticket module. We also have supported an option that allows tickets in the Table view to be sortedWhat's New - December 2025 | Zoho Backstage
In December, Backstage introduced a focused set of updates that improve how you manage registrations, communicate with attendees, and track participation. These enhancements are designed to give organizers greater flexibility and clearer control acrossNeed code format to specify default values
Can someone please direct me to the code syntax or the proper translation per the instructions circled below. These instructions don't seem correct.Problem with CRM Connection not Refreshing Token
I've setup a connection with Zoom in the CRM. I'm using this connection to automate some registrations, so my team doesn't have to manually create them in both the CRM and Zoom. Connection works great in my function until the token expires. It does not refresh and I have to manually revoke the connection and connect it again. I've chatted with Zoho about this and after emailing me that it couldn't be done I asked for specifics on why and they responded. "The connection is CRM is not a feature toTask Deletion Restriction & Strict Stage Control
Hello Zoho Community, We have the following two issues currently pending and under testing, for which we require a workable and reliable solution: 1. Task Deletion Restriction We are testing ways to ensure that staff users are not able to delete tasksAdd multiple users to a task
When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesmanA Roundup of Zoho Sprints 2025
Sorting Custom Date in API isn't working w pagination limit
How can we sort a custom field with DATE using pagination? Starting at page=1 then moving to page=2 with a limit of 10 each, its all messed up and even shows some of the same records as page 1? https://www.zohoapis.com/crm/v2/INVOICE_MODULE/search?criteria=(FM_Contact_ID:equals:1234)&sort_by=Invoice_Date&sort_order=desc&per_page=10&page='SAP Business One(B1) integration is now live in Zoho Flow
We’re excited to share that SAP Business One (B1) is now available in Zoho Flow! This means you can now build workflows that connect SAP B1 with other apps and automate routine processes without relying on custom code. Note: SAP Business One integrationEnhancement in Role and Profile mapping of agents in Sandbox
Hello everyone! We have brought in a modification in the way users are mapped to a particular role and profile in Sandbox. What has changed? When agents are copied from production to Sandbox: If a user's current role and profile is available in Sandbox,The reason I switched away from Zoho Notebook
My main reason for switching to Zoho was driven by three core principles: moving away from US-based products, keeping my data within India as much as possible, and supporting Indian companies. With that intent, I’ve been actively de-Googling my digitalDecimal places settings for exchange rates
Hello, We are facing issues while matching vendor payments with banking feeds. As we often import products/services exchange rate comes into play. Currently, ZOHO allows only six digits for decimal places. We feel that conversions like JPY to INR requireZoho removed ability to see all Scheduled Reports!
If you are not the owner of a scheduled report, Zoho recently removed the capability to see each scheduled report. As an admin who relies on seeing all scheduled reports being sent, this is a terrible update. Now I cannot see ANY scheduled reports...even the ones I am being sent!! This should be a setting for admins to control. This is a bad update.Automate Backups
This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.GCLID and Zoho Bookings
Is there anyway to embed a Zoho Bookings signup on a landing page and pass the GCLID information? More specifically, can this be done using auto-tagging and not manual tagging the GCLID? I know Zappier has an integration to do this but is there a betterMerge Items
Is there a work around for merging items? We currently have three names for one item, all have had a transaction associated so there is no deleting (just deactivating, which doesn't really help. It still appears so people are continuing to use it). I also can't assign inventory tracking to items used in past transactions, which I don't understand, this is an important feature moving forward.. It would be nice to merge into one item and be able to track inventory. Let me know if this is possible.Create PO from an invoice
We are a hardware and software sales company which receives orders over the internet. We drop ship most of our products from a warehouse outside of our company. Our orders get sync'd into Zoho from our store via onesaas as invoices. It would be greatBlueprint or Validation Rules for Invoices in Zoho Books
Can I implement Blueprint or Validation Rules for Invoices in Zoho Books? Example, use case could be, Agent confirms from client that payment is done, but bank only syncs transactions tomorrow. in this case, Agent can update invoice status to done, andResetting auto-number on new year
Hi everyone! We have an auto-number with prefix "D{YYYY}-", it generates numbers like D2025-1, D2025-2, etc... How can we have it auto-reset at the beginning of the next year, so that it goes to D2026-1? Thanks!Delivery and handling of documents e-stamped using Zoho Sign
Hello everyone! Zoho Sign makes it easy to pay non judicial stamp duty online and automatically attach the digitally generated e-stamp challan to electronic documents. We also manage the delivery of physical e-stamped papers. We periodically receive theseThe Social Wall: December 2025
Hello everyone! As we wrap up the final edition of the Social Wall for 2025, it’s the perfect time to look at what went live during December. QR code generator From paying for coffee to scanning metro tickets, QR codes are everywhere and have made everydayCustom AI solutions with QuickML for Zoho CRM
Hello everyone, Earlier, we introduced Custom AI Solutions in CRM that let you access QuickML for your custom AI needs. Building on that foundation, we’ve now enabled a deeper integration: QuickML models can be seamlessly integrated into CRM, and surfaceHelper Functions and DRY principle
Hello everyone, I believe Deluge should be able to use 'Helper functions' inside the main function. I know I can create different standalones, but this is not helpful and confusing. I don't want 10000 different standalones, and I dont want to have toAdd specific field value to URL
Hi Everyone. I have the following code which is set to run from a subform when the user selects a value from a lookup field "Plant_Key" the URL opens a report but i want the report to be filtered on the matching field/value. so in the report there isIntroducing workflow automation for the Products module
Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to Bigin's Products module. The Products module in Bigin now supports Workflows, enabling you to automate routine actions. Along with this update,Power up your Kiosk Studio with Real-Time Data Capture, Client Scripts & More!
Hello Everyone, We’re thrilled to announce a powerful set of enhancements to Kiosk Studio in Zoho CRM. These new updates give you more flexibility, faster record handling, and real-time data capture, making your Kiosk flows smarter and more efficientZia Formula Expression Generator for Formula fields
Hello everyone! Formula fields are super useful when you want your CRM to calculate things for you but writing the expression is where most people slow down. You know what you want, but you’re not fully sure which function to use, how the syntax shouldIssue with Zoho Creator Form Full-Screen View in CRM Related List Integration
Hi Team, We have created a custom application in Zoho Creator and integrated it into Zoho CRM as a related list under the Vendor module, which we have renamed as Consignors. Within the Creator application, there is a form named “Pickup Request.” InsideWrapping up 2025 on a high note: CRM Release Highlights of the year
Dear Customers, 2025 was an eventful year for us at Zoho CRM. We’ve had releases of all sizes and impact, and we are excited to look back, break it down, and rediscover them with you! Before we rewind—we’d like to take a minute and sincerely thank youDirectly Edit, Filter, and Sort Subforms on the Details Page
Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevantCustomer Parent Account or Sub-Customer Account
Some of clients as they have 50 to 300 branches, they required separate account statement with outlet name and number; which means we have to open new account for each branch individually. However, the main issue is that, when they make a payment, theyNext Page