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 #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.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
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 Workflow and Function Backup Options
Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.ListObjects is recognized by VBA
Sub addNewRow() Dim ws As Worksheet ' Set your worksheet name Set ws = ThisWorkbook.Sheets("Invoice") ' Set your table name (change "Table1" to your actual table name) ws.ListObjects("InvItems").ListRows.Add End Sub I am getting Unknown function: LiKPI Widget dashboard select periods
I have a problem with selecting periods as a user filter. In the beste scenario I would like to have to have a period filter like Google Analytics has of Datastudio (see attachment). In the KPI widget I "Group by "inquiry_date" on week&Year". It selectsNeed a way to secure Prefill URLs in Zoho Forms (hide or encrypt prefilled values)
Hi everyone, I often use Zoho Forms with prefilled URLs to simplify the user experience — for example: https://forms.zohopublic.com/.../form?Name=David&Amount=300 However, the problem is that all prefilled values are visible and editable in the link.Can’t send emails from Zoho CRM after adding a new user — verification codes not received
Hi everyone, We recently added a new user to our Zoho CRM account and purchased an additional license. Since then, we haven’t been able to send any emails from Zoho CRM. Our Zoho Mail accounts are working perfectly, we can send and receive emails directlyCan I add Conditional merge tags on my Templates?
Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letterCRM for email in Outlook: how to ignore addresses?
We’re using the "Zoho CRM for email" add-in for Outlook. When opening an email, the add-in displays all email addresses from the message and allows me to add them to the CRM or shows if they’re already contacts. However, sometimes people listed in ToScheduling Calls in CommandCenter / Blueprints
I would love it if you could add a function to schedule a call in the lead's record for a future date. I know you can add a Task by going to Instant Actions > Task and completing the form: These tasks go into the lead's record under Open Actions. ButWorkflow Creation with Zia gets stuck
It gets stuck here:Quickly send emails and sync conversations with custom email addresses in CRM
Editions: All editions DCs: All DCs Release plan: This enhancement has been released for customers in all DCs except IN and US. We will be enabling it for IN and US DC customers soon. [Update on 22 May 2024] This enhancement has been released for allZoho製品と生成AIツールの活用について
いつもありがとうございます。 弊社では、Zoho Oneを契約し、CRMを軸として、見込み客の管理から商談、その後の受注や請求の管理、サポート業務（Desk）、業務データのレポーティング（Analytics）などを行っております。 Zohoサービス自体には、Ziaというツールが搭載されているかと存じますが、それ以外の外部の生成AIツールと連携した活用などもできるのでしょうか？具体的には、CopilotなどがZohoに登録されているデータや情報を見て、対話型で必要なデータを提示してくれたり、商談や蓄積されたメモなどを分析してユーザが知見を得られるような活用ができないか、と考えております。File Field Validation
Hello all, We are tracking our customer NDA agreements in our CRM and have created 2 fields to do so, an execution date field and a file upload field. I want to create a validation rule to ensure that when the execution date field is populated that theWork with Contacts who use multiple Emails / Manage obsolete Email addresses without loosing Emails in Context
Hello List Work with Contacts who use multiple Emails Only after 1 week in using Zoho CRM productively we have contacts which randomly use 2 different email addresses. From the concept I've understood that Zoho CRM offers two email fields which are recognizedNew Field in CRM Product Module Not Visible in Zoho Creator for Mapping
I created a new single-line field in the Products module in Zoho CRM. Zoho CRM and Zoho Creator are integrated, but the newly created field in CRM is not visible in Zoho Creator when I try to map fields.Send WhatsApp voice messages from Bigin
Greetings, I hope all of you are doing well. We're happy to announce this enhancement we've made to Bigin. Bigin's WhatsApp integration now supports audio messages, so you can record and send voice messages. This makes it easier to handle customer questionsMicrosoft Teams now available as an online meeting provider
Hello everyone, We're pleased to announce that Zoho CRM now supports Microsoft Teams as an online meeting provider—alongside the other providers already available. Admins can enable Microsoft Teams directly from the Preferences tab under the MeetingsI want to subscribe 1 professional user but the email only 250 per day?
When I subscribe 1 professional user, I am only able to send 250 email per day? So less? Or is it typo, 2500 rather than 250? Any sale agent or friends can clear my doubt? Thank YouCliq does not sync messages after Sleep on Mac
I'm using the mac app of Cliq. When I open my mac after it was in sleep mode, Cliq does not sync the messages that I received. I always have to reload using cmd + R, which is not what I want when using a chat application.How to add a % Growth column for year-over-year comparison (2024 vs 2025)
Hello, I am trying to build a monthly revenue comparison between 2024 and 2025 in Zoho CRM Analytics. My current setup is: Module: Deals (Affaires) Filter: Stage = Closed Won Date field: Closing Date Grouping: By Month Metrics: Sum of Amount for 2024,How do you map a user picklist field to another user picklist field.
In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn'tExplore Competitive 3D Scanner Prices at Protomont Technologies
The genesis of Protomont Technologies emerged from the collaborative efforts of the founders in 2019, both the founders shoulder an enormous experience in the world of 3D Printing. Protomont Technology aims to craft your vision with creativity, empoweringNew and improved API resources for Zoho Sign Developers
Hello, Developers community! We know that for you, an API's real value depends on how quickly, easily, and reliably you can integrate the it with your application. That's why we're excited to talk about the recent improvements to our developer resources,stock
bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problemMarketing Tip #5: Improve store speed with optimized images
Slow-loading websites can turn visitors away. One of the biggest culprits? Large, uncompressed images. By optimizing your images, your store loads faster and creates a smoother shopping experience leading to higher sales. It also indirectly improves SEO.Why can I not choose Unearned Revenue as an account on items?
Hello, I do not understand why we don't have the ability to code an item to unearned revenue. It is not an uncommon situation to have in business. I understand that there is the Retainer invoice as an option, however that doesn't really work for us. OurForm Submission Emails
Is there a current delay with submission emails being sent? We've had 10-20 forms completed today but only a handful of emails.Rules not working properly
I created a rule to display certain fields on certain states. But it seems to be not working. It hides the fields even when I selected California, (which is a state that should show the fields when selected)Notebook font size issue
If I copy something from somewhere and paste it in my notebook, the font size becomes smaller.Sign in process is beyond stupid. I'd rather plug my phone into USB and copy files than sign in to this POS.
792 clicks and fields to fill in just to get into a 3rd rate app is too stupid for me.Ampersand in URL parameter // EncodeURL does not work
Hi Zoho, I have a url link with a parameter. The parameter is including ampersand in some cases (Can be "H&M" or "P&I") When trying to use %26 instead of "&" (the result I get using EncodeURL()) I get H%26M instead of H&M in the parameter field. How can I solve this? Thanks! Ravidhow can we create in zoho crm a new contact when the looup does not find a similar existing one
In forms/integrations/zoho crm / ne w record tab, contact name is to be mapped with my form contact name. When I go in biew edit/lookup configuration, I don t get the options (help dedicated page simply repeat the same info you get in the app) and doesDirectory Websites
Directories are a good website category to gain search engine traffic. Directories for a professional service category as an example can help their members in search results over their individual website. It would be nice to have a directory templateManage Task on Mobile
How do we manage our task on mobile devices? It seems that there should be a standalone mobile app to handle the new task features. The new features released in regards to Task management are great by the way! Now we need to bring that all together inSet Default Payment Method & Default account
Hi, I would like to know how to set the default payment method and default bank account when recording payments in zoho books. At present we have to change these fields everytime we record a payment, which leads to potential error and as we have a veryCustomer Portal on Zoho Desk
Hi, I'd like to know more about the items below I found when setting up the Customer Portal on Zoho Desk. Could someone help me explaining these in details? Especially the 2nd and 3rd point. Thanking you in advance! Permissions Customers can sign up for Customer Portal Customers can view tickets of their organization (contacts) Customers must register to access Customer Portal Display Community in Customer Self Service portalSlow Performance on desk.zoho.com. 11/3/2025
I’m not seeing any active service alerts for desk.zoho.com, but everyone on our account is currently experiencing very slow load times when opening or navigating tickets. We’ve already tried the standard troubleshooting steps — clearing cache and cookies,"Authorize to Access Your Account"
Hi, I'm trying to log into cliq on my phone but I can't. It says "Authorize to access your account - Verify your identity to access your account using oneAuth credentials", and asks for a password. I tried maybe 100 different passwords and nothing works.Books API Receiving an Error that Doesn't Make Sense when Creating Credit Note - trying to use 'ignore_auto_number_generation' argument
Hello, I'm working on a newly created routine and I'm getting an error that doesn't make sense when trying to create a new Credit Note. Here is my POST request. Endpoint: https://www.zohoapis.com/books/v3/creditnotes?organization_id=########## Body: {Computer Showing Offline in Unattended Access
I have a computer that was connected to the internet but showing offline in Assist. I tried uninstalling the program and deleting it from Zoho Assist the reinstalling and it still does not show up. I have been a user for several months and am not pleased with the lack of connectivity with Assist. If this continues I will have to find another product. The computer I reinstalled it on is not even showing up in Assist now. The name is NYRVLI-PC. ThanksClosing Accounting Periods - Invoice/Posting dates
Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from postingNext Page