Kaizen #24 - CORS and the JS SDK

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
  1. Simple Requests
  2. Pre-flight requests
1. Simple Requests
  1. The browser sends the header ORIGIN in the XHR (XMLHttpRequest) to inform the target site about the request's origin.
  2. On the target site, the server compares the ORIGIN value with the allowed origins.
  3. 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.
  1. The browser sends the pre-flight request via the OPTIONS HTTP request method.
  2. The server sends the details about the target site such as the allowed methods and the allowed origins.
  3. 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
  1. Your app must have the redirect.html page to which the access token is sent.
  2. 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
  1. Go to https://api-console.zoho.com.
  2. Click ADD CLIENT. 
  3. Choose the client as Java Script and click CREATE NOW.
  4. 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.
  5. Click CREATE.
  6. Your client ID, client secret will be displayed under the Client Secret tab.

b. Authenticate your app
  1. 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}
  2. Provide the necessary scopes, and the redirect_uri.
  3. The Zoho Accounts page prompts for user credentials. The user enters the credentials and may grant access for the entire session. 
  4. 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
  5. 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.
  6. Parse the access_token parameter to obtain the OAuth token.
  7. 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



                                Bootcamp
                                Community
                                Pricing
                                Webinars
                                What's New
                                Integrations
                                Contact Support
                                Contact Sales
                                  Zoho Survey Resources
                                    Features
                                    Survey Templates
                                    Integrations
                                    Community
                                    iOS Mobile Surveys
                                    Pricing
                                    Android Mobile Surveys
                                    Insurvey Blogs
                                    Insight Blogs
                                    Tips & Tricks





                                                Latest Feature Updates

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts




                                                      Zoho SalesIQ Resources

                                                            • 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 how

                                                            • Kaizen #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

                                                            • Kaizen #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

                                                            • Kaizen #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.


                                                            Manage your brands on social media
                                                            Access Zoho Social

                                                              Zoho Pagesense Resources


                                                                  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

                                                                                      • CRM Community Learning Series

                                                                                        CRM Community Learning Series


                                                                                      • Kaizen

                                                                                        Kaizen

                                                                                      • Functions

                                                                                        Functions

                                                                                      • Meetups

                                                                                        Meetups

                                                                                      • Kbase

                                                                                        Kbase

                                                                                      • Resources

                                                                                        Resources

                                                                                      • Digest

                                                                                        Digest

                                                                                      • CRM Marketplace

                                                                                        CRM Marketplace

                                                                                      • MVP Corner

                                                                                        MVP Corner









                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now


                                                                                            Zoho Show Resources

                                                                                              Zoho Writer

                                                                                              Get Started. Write Away!

                                                                                              Writer is a powerful online word processor, designed for collaborative work.

                                                                                                Zoho CRM コンテンツ



                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                              • Recent Topics

                                                                                                              • Notes badge as a quick action in the list view

                                                                                                                Hello all, We are introducing the Notes badge in the list view of all modules as a quick action you can perform for each record, in addition to the existing Activity badge. With this enhancement, users will have quick visibility into the notes associated

                                                                                                              • What's new in Zoho One 2025

                                                                                                                Greetings! We hope you have all had a chance by now to get hands-on with the new features and updates released as part of ZO25. Yes, we understand that you may have questions and feedback. To ensure you gain a comprehensive understanding of these updates,

                                                                                                              • Good news! Calendar in Zoho CRM gets a face lift

                                                                                                                Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities

                                                                                                              • Edit default "We are here to help you" text in chat SalesIQ widget

                                                                                                                Does anyone know how this text can be edited? I can't find it anywhere in settings. Thanks!

                                                                                                              • Quick way to add a field in Chat Window

                                                                                                                I want to add Company Field in chat window to lessen the irrelevant users in sending chat and set them in mind that we are dealing with companies. I request that it will be as easy as possible like just ticking it then typing the label then connecting

                                                                                                              • How to create a two way Sync with CRM Contacts Module?

                                                                                                                Newbie creator here (but not to Zoho CRM). I want to create an app that operates on a sub-set of CRM Contacts - only those with a specific tag. I want the app records to mirror the tagged contacts in CRM. I would like it to update when the Creator app

                                                                                                              • Zoho Sheet for Desktop

                                                                                                                Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

                                                                                                              • Allow Manual Popup Canvas Size Control

                                                                                                                Hello Zoho PageSense Team, We hope you're doing well. We would like to request an enhancement to the PageSense popup editor regarding popup sizing. Current Limitation: Currently, the size (width and height) of a popup is strictly controlled by the selected

                                                                                                              • Where is the settings option in zoho writer?

                                                                                                                hi, my zoho writer on windows has menu fonts too large. where do i find the settings to change this option? my screen resolution is correct and other apps/softwares in windows have no issues. regards

                                                                                                              • How to set page defaults in zoho writer?

                                                                                                                hi, everytime i open the zoho writer i have to change the default page settings to - A4 from letter, margins to narrow and header and footer to 0. I cannot set this as default as that option is grayed out! so I am unable to click it. I saved the document

                                                                                                              • Develop and publish a Zoho Recruit extension on the marketplace

                                                                                                                Hi, I'd like to develop a new extension for Zoho Recruit. I've started to use Zoho Developers creating a Zoho CRM extension. But when I try to create a new extension here https://sigma.zoho.com/workspace/testtesttestest/apps/new I d'ont see the option of Zoho Recruit (only CRM, Desk, Projects...). I do see extensions for Zoho Recruit in the marketplace. How would I go about to create one if the option is not available in sigma ? Cheers, Rémi.

                                                                                                              • How to import data from PDF into Zoho Sheet

                                                                                                                I am looking to import Consolidated Account Statement (https://www.camsonline.com/Investors/Statements/Consolidated-Account-Statement) into zoho sheet. Any help is appreciated. The pdf is received as attachment in the email, this document is password

                                                                                                              • Zoho Projects Android app: Integration with Microsoft Intune

                                                                                                                Hello everyone! We’re excited to announce that Zoho Projects now integrates with Microsoft Intune, enabling enhanced security and enterprise app management. We have now added support for Microsoft Intune Mobile Application Management (MAM) policies through

                                                                                                              • Cant't update custom field when custom field is external lookup in Zoho Books

                                                                                                                Hello I use that : po = zoho.books.updateRecord("purchaseorders",XXXX,purchaseorder_id,updateCustomFieldseMap,"el_books_connection"); c_f_Map2 = Map(); c_f_Map2.put("label","EL ORDER ID"); c_f_Map2.put("value",el_order_id); c_f_List.add(c_f_Map2); updateCustomFieldseMap

                                                                                                              • Wrapping 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 you

                                                                                                              • About Zoneminder (CCTV) and Zoho People

                                                                                                                Hi team I would like to implement a CCTV service for our branches, with the aim of passively detecting both the entry and exit of personnel enrolled in Zoho Peeple, but my question is: It is possible to integrate Zoho People with Zoneminder, I understand

                                                                                                              • Introducing the Zoho Projects Learning Space

                                                                                                                Every product has its learning curve, and sometimes having a guided path makes the learning experience smoother. With that goal, we introduce a dedicated learning space for Zoho Projects, a platform where you can explore lessons, learn at your own pace,

                                                                                                              • Create CRM Deal from Books Quote and Auto Update Deal Stage

                                                                                                                I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is converted

                                                                                                              • How to show branch instead of org name on invoice template?

                                                                                                                Not sure why invoices are showing the org name not the branch name? I can insert the branch name using the ${ORGANIZATION.BRANCHNAME} placeholder, but then it isn't bold text anymore. Any other ideas?

                                                                                                              • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

                                                                                                                Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

                                                                                                              • Kaizen #223 - File Manager in CRM Widget Using ZRC Methods

                                                                                                                Hello, CRM Wizards! Here is what we are improving this week with Kaizen. we will explore the new ZRC (Zoho Request Client) introduced in Widget SDK v1.5, and learn how to use it to build a Related List Widget that integrates with Zoho WorkDrive. It helps

                                                                                                              • Set connection link name from variable in invokeurl

                                                                                                                Hi, guys. How to set in parameter "connection" a variable, instead of a string. connectionLinkName = manager.get('connectionLinkName').toString(); response = invokeurl [ url :"https://www.googleapis.com/calendar/v3/freeBusy" type :POST parameters:requestParams.toString()

                                                                                                              • Possible to connect Zoho CRM's Sandbox with Zoho Creator's Sandbox?

                                                                                                                We are making some big changes on our CRM so we are testing it out in CRM's Sandbox. We also have a Zoho Creator app that we need to test. Is it possible to connect Zoho CRM's Sandbox to Zoho Creator's Sandbox so that I can perform those tests?

                                                                                                              • I Need Help Verifying Ownership of My Zoho Help Desk on Google Search Console

                                                                                                                I added my Zoho desk portal to Google Search Console, but since i do not have access to the html code of my theme, i could not verify ownership of my portal on Google search console. I want you to help me place the html code given to me from Google search

                                                                                                              • Timeline Tracker

                                                                                                                Hi Team, I am currently using Zoho Creator – Blueprint Workflows, and I would like to know if there is a way to track a timeline of the approval process within a Blueprint. Specifically, I am looking for details such as: Who submitted the record Who clicked

                                                                                                              • Primary / Other Billing Contacts

                                                                                                                If you add an additional contact to a Zoho Billing Customer record, and then mark this new contact as the primary contact, will both the new primary and old primary still receive notifications? Can you stop notifications from going to the additional contacts

                                                                                                              • Missing Import Options

                                                                                                                Hello, do I miss something or is there no space import option inside of this application? In ClickUp, you can import from every common application. We don't want to go through every page and export them one by one. That wastes time. We want to centralize

                                                                                                              • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

                                                                                                                Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

                                                                                                              • Is it possible to enforce a single default task for all users in a Zoho Projects ?

                                                                                                                In Zoho Projects, the Tasks module provides multiple views, including List, Gantt, and Kanban. Additionally, users can create and switch to their own custom views. During project review meetings, this flexibility creates confusion because different users

                                                                                                              • [Free Webinar] Zoho Creator webinars - Learning Table and Creator Tech Connect Series in 2026

                                                                                                                Hello everyone, Wishing you all a wonderful new year! May 2026 and the years ahead bring more opportunities, growth, and learning your way 🙂 We’re excited to kick off the 2026 edition of the Learning Table Series and Creator Tech Connect Series ! Learning

                                                                                                              • Reply and react to comments

                                                                                                                Hi everyone! We're excited to bring to you a couple of new features that'll make your sprint process simpler. A cloud application brings with it an array of social media features that can be efficiently used in your organizational setup. As an agile scrum

                                                                                                              • Restrict Users access to login into CRM?

                                                                                                                I’m wanting my employees to be able to utilize the Zoho CRM Lookup field within Zoho Forms. For them to use lookup field in Zoho Forms it is my understanding that they need to be licensed for Forms and the CRM. However, I don’t want them to be able to

                                                                                                              • Module Customisation - Lookup function not available

                                                                                                                Good evening, Within my business, I can have multiple customers, who have multiple mobile assets. When I set these assets up, I enter information such as vehicle registration, Vehicle identification number (VIN), Unit number, YOM, in addition to others.

                                                                                                              • zoho click, and nord VPN

                                                                                                                Unfortunately, we've been having problems with Zoho Click, where essentially the line cuts off after about a minute's worth of conversation every time we are on VPN. Is there a way we can change this within the settings so it does not cut the line off

                                                                                                              • Zoho Calender

                                                                                                                a) does the clanender in zoho project allow you to see the name of the event in the celnder view, it currently says either "Task (1) or "Milestoen (1)" b) Alternatively does the calender in Zoho project integrate with zoho calender?

                                                                                                              • Matching ZOHO Payments in Banking

                                                                                                                Our company has recently integrated ZOHO Payments into our system. This seemed really convenient at first because our customers could pay their account balance by clicking on a link imbedded in the emailed invoice. Unfortunately, we can't figure out how

                                                                                                              • Team Gamification

                                                                                                                Would love to motivate, engage and encourage our team with our social media posts. Would like to include Gamification features of Social Media in Zoho Social or Marketing Automation. And also bring in Social Advocacy tools/tracking/management to these,

                                                                                                              • 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 efficient

                                                                                                              • New Enhancements to Zoho CRM and Zoho Creator Integration

                                                                                                                Hello Everyone, We’ve rolled out enhancements to the Zoho Creator and Zoho CRM integration to align with recent updates made to the Zoho Creator platform. With enhancements to both the UI and functionality, This update also tightens access control by

                                                                                                              • Work Type - Limitation

                                                                                                                Hello, I'm setting up work types and have noticed, a limitation on the parts area to 10 lines. Can this be increased to 20 or greater? In addition to this, when I attempt to add the work type to a work order, the correct labour hours doesn't flow through.

                                                                                                              • Next Page