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

                                                                                                              • Add RTL and Hebrew Support for Candidate Portal (and Other Zoho Recruit Portals)

                                                                                                                Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to set the Candidate Portal to be Right-to-Left (RTL) and in Hebrew, similar to the existing functionality for the Career Site. Currently, when we set the Career Site

                                                                                                              • Ability to Edit YouTube Video Title, Description & Thumbnail After Publishing

                                                                                                                Hi Zoho Social Team, How are you? We would like to request an enhancement to Zoho Social that enables users to edit YouTube video details after the video has already been published. Your team confirmed that while Zoho Social currently allows editing the

                                                                                                              • Send Supervisor Rule Emails Within Ticket Context in Zoho Desk

                                                                                                                Dear Zoho Desk Team, I hope this message finds you well. Currently, emails sent via Supervisor Rules in Zoho Desk are sent outside of the ticket context. As a result, if a client replies to such emails, their response creates a new ticket instead of appending

                                                                                                              • Free Webinar : Unlock AI driven business insights with Zoho Inventory + Zoho Analytics

                                                                                                                Are you tired of switching between apps and exporting data to build customized reports? Say hello to smarter & streamlined insights! Join us for this exclusive webinar where we explore the power of the Zoho Inventory–Zoho Analytics integration. Learn

                                                                                                              • Critical Issue: Tickets Opened for Zoho Support via the Zoho Help Portal Were Not Processed

                                                                                                                Hi everyone, We want to bring to your attention a serious issue we’ve experienced with the Zoho support Help Portal. For more than a week, tickets submitted directly via the Help Portal were not being handled at all. At the same time no alert was posted

                                                                                                              • Hide/Show Subform Fields On User Input

                                                                                                                Hello, Are there any future updates in Hide/Show Subform Fields "On User Input"?

                                                                                                              • Cloning Item With Images Or The Option With Images

                                                                                                                Hello, when I clone an item, I expect the images to carry over to the cloned item, however this is not the case in Inventory. Please make it possible for the images to get cloned or at least can we get a pop up asking if we want to clone the images as

                                                                                                              • Archiving Contacts

                                                                                                                How do I archive a list of contacts, or individual contacts?

                                                                                                              • WorkDrive and CRM not in sync

                                                                                                                1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (here

                                                                                                              • Custom validation in CRM schema

                                                                                                                Validation rules in CRM layouts work nicely, good docs by @Kiran Karthik P https://help.zoho.com/portal/en/kb/crm/customize-crm-account/validation-rules/articles/create-validation-rules I'd prefer validating data input 'closer to the schema'

                                                                                                              • Adding Default Module Image into mail merge field

                                                                                                                As with most people finding their way to these forums i have a specific requirement that doesn't seem to be supported by Zoho I have created 2 custom modules to suit my purpose 1 is an inventory type module that lists aluminium extrusions, and all relevant

                                                                                                              • Sync Data from MA to CRM

                                                                                                                Currently, it's a one-way sync of data from the CRM to MA. I believe we should have the ability to select fields to sync from MA to the CRM. The lead score is a perfect example of this. In an ideal world we would be able to impact the lead score of a

                                                                                                              • Is it possible to roll up all Contact emails to the Account view?

                                                                                                                Is there a way to track all emails associated with an Account in one single view? Currently, email history is visible when opening an individual Contact record. However, since multiple Contacts are often associated with a single Account, it would be beneficial

                                                                                                              • Update CRM record action

                                                                                                                Currently, MA only offers a "Push Data" action to push data to a CRM module. This action is built to cover the need to both create a new record and update an existing record. Because it has been implemented this way all required fields on the CRM module

                                                                                                              • 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

                                                                                                              • Add deluge function to shorten URLs

                                                                                                                Zoho Social contains a nice feature to shorten URLs using zurl.co. It would be really helpful to have similar functionality in a Deluge call please, either as an inbuilt function or a standard integration. My Creator app sends an email with a personalised

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

                                                                                                              • Unable to remove the “Automatically Assigned” territory from existing records

                                                                                                                Hello Zoho Community Team, We are currently using Territory Management in Zoho CRM and have encountered an issue with automatically assigned territories on Account records. Once any account is created the territory is assigned automatically, the Automatically

                                                                                                              • 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

                                                                                                              • Next Page