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
How can I track which zoho users are actively using Zoho CRM
I have several licenses of Zoho CRM. We now need to add a new user. I could purchase a new license, but before I do, I would like to see if any of our existing users are not actively using the license assigned to them. How can I determine the activityZoho One Down
Zoho Team, Checking if when the services up - currently Zoho One is downUrgent Zoho Creator down!!!???
Now my zoho creator faced this issue. Anyone has idea? Urgent!!!Access to Detail View From HTML Snippet
Zoho Creator displays a detail view that slides out from the right onClick of a record in a report. Am I able to access that detail view from an html snippet, e.g. click a record in a list and display the detail view? The zc_LoadIn dialog is a bit clunky,Option to Customize Career Site URL Without “/jobs/Careers”
Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving toBilling Management: #10 Solving Common Mistakes in Billing
Over the past few weeks, we have explored different facets of billing, from the simplicity of traditional one-time billing to the evolving landscape of subscriptions, retainers, and usage-based models. We've unpacked how billing isn't just about sending【開催間近 - 10/17】東京 ユーザー交流会 Vol.3 参加登録 受付中！(参加無料)
ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 10/17(金)に、東京・新橋で「東京 ユーザー交流会 Vol.3」を開催します！ ZOHOLICSよりも小規模なイベントですので、「リアル開催はちょっと緊張する…」という方も、安心してご参加いただけます✨ 当日は、初公開の事例を2つご紹介予定です！ なお、セッション映像のアーカイブ配信は予定していないため、会場にお越しいただいた方だけが、登壇者へ直接質問したり、リアルな声を聞いたりできる貴重な機会となっています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーLoading CSS Stylesheets into HTML Snippet
Combining html/css into a single snippet can grow quite large for a UI that has a lot of functionality/styling. To keep things tidy, are we able to pull files into an html snippet using a <link> tag? If so, what are some best practices?Notes Attachments
Two things it would be nice to have the attachment size the same as the attachments sections and it would be nice to be able to attach links like you can in the attachments section. Thank youCanvas: empty images
Hello. If I add an image field like contact photo in a Canvas design, and the field is empty, there is an ugly placeholder in its place. This doesn't happen in the standard view. In the standard view, if the contact photo is empty, nothing appears inGoogle enhanced conversions not working
Hi guys, I've connected Zoho CRM through Google Ads interface with the goal to setup the enhanced conversion tracking in Google Ads. I have to Zoho related conversion goals which you can see in the images below: For the conversion goal above I've setupMS Teams Meeting to Zoho CRM
Has anyone figured out a good way to push MS Teams meeting info on a trigger of "meeting end" to Zoho CRM? We're looking for a way to take attendees of a meeting and meeting duration and push it into Zoho CRM after the meeting has ended. If I can justMicrosoft 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 MeetingsFont Size 11 - Zoho CRM Email Templates
Our company communicates with our vendors exclusively using Calibri Font Size 11, as this is the standard formatting for professional emails. Since the CRM only allows for the selection of font sizes 10 & 12, we have been unable to utilize the CRM emailIntroducing Zoho Creator's 2025 Release Projection 2
Hello Creators! I'm Prakash, from the Creator product management team, and today I'm delighted to unveil our next set of features as part of Release Projection 2 for 2025. With thoughtful analysis and planning, we've curated powerful new capabilitiesCalling Function via REST API with API Key gives 401 using Zoho Developer
Hi, I created a couple of functions using the one month trial of Enterprise edition, which I was able to call using the API Key method from Postman and from an external site. Now that my trial has expired, I have created the same functions in the DeveloperCRM 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 filesFeature Request: Tag, Search, and Report on Individual Private Comments
Zoho Desk Team, First, I want to say that we are extensive users of Zoho Desk and it is a core part of our support operations. We rely heavily on the private comments feature for internal communication, knowledge sharing, and maintaining a clear historyNew portal SAML authentication error: User not found
Dears, Has anyone else been experiencing this lately? I am creating a new portal authenticated by SAML (Entra ID). I followed the same process as I did with other portals, but any new portal created after this always encounters this error. I’ve been reportingIn arattai received message can't be deleted
The issue has been noticed in following: arattai app (Android) arattai app (Window) arattai web While the message posted by me may be deleted, the ones received from others can't be. The item <Delete> change to <Report> when the message is a receivedDisplay Client Name in Zoho Creator Client Portal Dashboard
Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currentlyZoho Forms - Improved Sub-Forms
Hi Forms team, I'm helping a client move from JotForms to Zoho Forms and I've found another opportunity for improvement. In the below screenshot, JotForm left and Zoho Forms right. The Zoho Forms Sub-Form is quite a poor visually. There is no way to makeZoho Forms - Print Button on Forms
Hi Forms team, I'm replicating a form for a client which is currently based on JotForm. I noticed that at the end of the form there is a button to print the completed form. I thought this would be something worth sharing and a nice to have in Zoho Forms.How do I move a section or element from one page to another in the NEW Zoho Sites UI
I have a section on my home page with numerous elements within it and I'd like to move the entire section to a different page on my site so I don't have to recreate it from scratch. Is there a way for me to do that easily? I could use a quick answer on this please.Elevate your CX delivery using CommandCenter 2.0: Simplified builder; seamless orchestration
Most businesses want to create memorable customer experiences—but they often find it hard to keep them smooth, especially as they grow. To achieve a state of flow across their processes, teams often stitch together a series of automations using WorkflowCreator Change History: Ways to improve
Hi Everyone, Recently been working in developing this change history(an idea from Zoho Forms) - unlike forms that you can this with a click but using Creator, we can use "old" keyword. The concept I come up with is to put the result in a table however,Zoho Projects app update: Global Web Tabs support
Hello everyone! In the latest version(v3.10.10) of the Zoho Projects app update, we have brought in support for Global Web Tabs. You can now access the web tabs across all the projects from the Home module of the app. Please update the app to the latestExport as MP4 or GIF
Hi, Just wondering if there's a way to export/convert a presentation to an MP4 video file or even a GIF. One use case would be to use the animation functionality to create social media graphics/charts/gifs/videos. Thanks for a great tool... Rgds JonUsing IMAP configuration for shared email inboxes
Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configurePage Layout- Horizontal Rule
When editing the layout of, for instance, the Potentials page, is there a way to insert a horizontal rule or white space in between fields? I'd like to keep a group of fields in the same Section, but would like to create some seperation in order to further group together certain fields within the Section. If this is not possible, does anybody have any other suggestions on how to create this same effect? Thank you!Zoho Books will discontinue support for older browser versions soon
Hello users, Starting from May 15, 2024, Zoho Books will no longer support the following browser versions: Browsers Version Restrictions Firefox Browser Versions older than 100 Google Chrome Versions older than 100 Microsoft Edge Versions older than 100Zoho Projects - Q3 Updates | 2025
Zoho Projects - Q3 Updates | 2025 Hello Users, The final quarter of the year 2025 has begun, and we at Zoho Projects are all set with a plan. New targets to achieve and new milestones to reach, influenced by the lasting imprint of the past quarter. 2025'sFeature request - pin or flag note
Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less importantZoho Sheet - Printing - Page Breaks and Printing Customization
I think the title is descriptive enough in that I cannot find help documentation on a simple task of adding in page brakes for separating pages on print. ThanksTables for Europe Datacenter customers?
It's been over a year now for the launch of Zoho Tables - and still not available für EU DC customers. When will it be available?Issue with Trident exe file
Hello Team, Exe Setup file It's showing harmful for user pc please check and do needful. this message for developer team. Thanks Bhargav PurohitDifferent languages for users
Hello, Do you plan to enable individual users to select their languages for interface? Currently language can be changed for everyone - it looks like a settings for a whole portal, which is not good when you are working internationally. Best regards,Transaction Locking with the dynamic date
Is it possible to dynamically update dates on transaction locking. We want to lock transaction x days from todayMessages not displayed from personal LinkedIn profile
Hello. I connected both our company profile and my personal profile to Zoho social. I do see all messages from our company page but none from my private page. not even the profile is being added on top to to switch between company or private profile,Unable to change sales_order status form "not_invoiced" to "invoiced"
I am automating process of creating of invoice from sales_orders by consolidated sales_orders of each customer and creating a single invoice per customer every month. I am doing this in workflow schedule custom function where i create invoice by gettingNext Page