Friday, March 15, 2024

Responsive Authoring Issue in AEM as a Cloud


Photo by Taras Shypka on Unsplash

While migrating our websites from AMS (AEM 6.5) to AEM as a Cloud, we noticed that responsive authoring for certain Editable templates wasn’t functioning as expected. Interestingly, these same templates were working flawlessly in the AMS environment.

Additionally, selecting the breakpoints was not functioning correctly.

This issue was not present in the AMS (6.5) environment, where both responsive authoring and breakpoint selection were functioning as expected.

After analysis, the root cause of the issue is the logic difference between AME 6.5 and AEM as Cloud for responsive authoring on /libs/cq/gui/components/authoring/editors/clientlibs/ (the hash may vary if any additional changes introduced)

In AEM 6.5 — check if the configuration width is greater than or equal to the device width.


getDeviceBreakpoint:function(deviceWidth){var cfg=this.getBreakpoints(),closestBp;for(var bp in cfg)if(cfg[bp].width>=deviceWidth&&(!closestBp||cfg[bp].width<=cfg[closestBp].width))closestBp=bp;return closestBp}

In AEM as a Cloud — check if the configuration width is greater than the device width. This can lead to the selection of an incorrect breakpoint. Consequently, changes that should apply to the actual breakpoint, like small, end up being applied to a different one, such as medium.


getDeviceBreakpoint:function(deviceWidth){var cfg=this.getBreakpoints(),closestBp;for(var bp in cfg)if(cfg[bp].width>deviceWidth&&(!closestBp||cfg[bp].width<=cfg[closestBp].width))closestBp=bp;return closestBp}

To address the issue, it is essential to ensure that the responsive configuration sets the breakpoints in emulators to one less than the standard breakpoint value (standard breakpoint value — 1). Additionally, within the editable template structure’s responsive configuration, the breakpoint value should be maintained at the standard breakpoint value.

For instance, in the configuration of the emulator for a large breakpoint: /apps/<Project>/emulators/bootstrap/large/cq:emulatorConfig, (width:1199)

In the responsive configuration of the template structure for large breakpoints (for better management enable these configurations through the template-type): /conf/<project>/settings/wcm/templates/<template>/structure/jcr:content/cq:responsive/breakpoints/large (width:1200)

You can examine the emulator and responsive configuration of a page using the PageInfo servlet — For example, https://aemhost/libs/wcm/core/content/pageinfo.json?path=%2Fcontent%2Ftest%2Fus%2Fen%2Ftest-page

Now, you can start editing the page to make it work well on different devices.

Thursday, February 22, 2024

ReferenceError: XMLHttpRequest is not defined - Ollama Java Script

I encountered the following error while using Ollama JavaScript on my local system.

ReferenceError: XMLHttpRequest is not defined

    at \Development\ollama\js\node_modules\whatwg-fetch\dist\fetch.umd.js:540:17

    at new Promise (<anonymous>)

    at fetch (\Development\ollama\js\node_modules\whatwg-fetch\dist\fetch.umd.js:533:12)

    at file:////Development/ollama/js/node_modules/ollama/dist/utils.js:77:28

    at (<anonymous>)

    at file:////Development/ollama/js/node_modules/ollama/dist/utils.js:7:71

    at new Promise (<anonymous>)

    at __awaiter (file:////Development/ollama/js/node_modules/ollama/dist/utils.js:3:12)

    at (file:////Development/ollama/js/node_modules/ollama/dist/utils.js:72:53)

    at Ollama.<anonymous> (file:////Development/ollama/js/node_modules/ollama/dist/index.js:59:42)

The actual issue was with the node and npm versions, please ensure the latest node/npm version is installed on your system before running the Ollama JS in your local system.

  • Node v20.11.0+
  • NPM v10.2.4+

Error: Cannot find module '@npmcli/config'

I encountered the following error while executing any npm command, such as 'npm -v', on a Windows system.


    throw err


Error: Cannot find module '@npmcli/config'

Require stack:

- \AppData\Roaming\nvm\v20.11.1\node_modules\npm\lib\npm.js

- \AppData\Roaming\nvm\v20.11.1\node_modules\npm\lib\cli-entry.js

- \AppData\Roaming\nvm\v20.11.1\node_modules\npm\lib\cli.js

- AppData\Roaming\nvm\v20.11.1\node_modules\npm\bin\npm-cli.js

    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)

    at Module._load (node:internal/modules/cjs/loader:985:27)

    at Module.require (node:internal/modules/cjs/loader:1235:19)

    at require (node:internal/modules/helpers:176:18)

    at Object.<anonymous> (\AppData\Roaming\nvm\v20.11.1\node_modules\npm\lib\npm.js:2:16)

    at Module._compile (node:internal/modules/cjs/loader:1376:14)

    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)

    at Module.load (node:internal/modules/cjs/loader:1207:32)

    at Module._load (node:internal/modules/cjs/loader:1023:12)

    at Module.require (node:internal/modules/cjs/loader:1235:19) {


  requireStack: [







 I was managing Node.js using NVM, and the issue only occurred with versions 20.11.0 and above, while earlier versions worked perfectly. The PATH setup appeared to be correct. Ultimately, I resolved the issue by directly downloading and installing Node.js on the system.

Friday, February 9, 2024

Exploring Security Features in Adobe Experience Manager for Cloud Environments

 In this post, let us explore some of the security-related setup/configurations available on AEM as a Cloud platform to protect the platform.

Traffic Filter Rules:

Traffic filter rules can be used to block or allow requests at the CDN layer (Fastly). These traffic filter rules are available to all AEM as Cloud Service Sites and Forms customers OOTB.

The traffic filter rules can be used for multiple scenarios.

  • Rate Limit the requests based on client IPS’s.
  • Block traffic based on IP addresses, Request Path, Query String, method, domain, reqHeader, reqCookie, postParam, etc.
  • Black traffic from specific countries.

The traffic rules can be targeted to the Author or Publish tier or both together. You can also apply various operations — like equals, doesNotEquals, in, matches, etc. The CDN responds with a 406 return code if a rule is matched and blocked.

The traffic rules can be managed through a YAML file and deployed separately through the Cloud Manager Config pipeline to Non-prod and prod environments. Create a YAML file(cdn.yaml) specific to Dev environments and Stage/Prod environments, separate into different folders, e.g., Config-Dev/cdn.yaml and Config-Prod/cdn.yaml; the config files can be managed through a separate repository or within a Dispatcher module repository, crate config pipeline specific to dev and stage/prod environments and point to the corresponding config folder along with repository, branches and other configurations.

For more details, refer to this document — Traffic Filter Rules including WAF Rules | Adobe Experience ManagerExamples and result analysis of Traffic Filter rules including WAF rules | Adobe Experience Manager (

WAF (Web Application Firewall):

A WAF helps protect web applications by filtering and monitoring HTTP traffic between a web application and the Internet. It typically protects web applications from attacks such as DDOS, cross-site forgery, cross-site scripting (XSS), file inclusion, and SQL injection. A shield is placed between the web application and the Internet by deploying a WAF in front of a web application. The WAF operates through a set of rules that aim to protect against vulnerabilities in the application by filtering out malicious traffic.

The WAF rules/flags, e.g., XSS, SQLI, LOG4J-JNDI, can be enabled along with the other traffic filter rules explained above. The WAF rules can be enabled through the same cdn.yaml file and the Config pipeline.

The WAF traffic filter rules require either an Enhanced Security license or a WAF-DDoS Protection license.

For more details, refer to this document — Traffic Filter Rules including WAF Rules | Adobe Experience Manager.


Mod_security is an Apache module that helps protect your website from various attacks. Mod_security acts as a Web Application Firewall (WAF) that filters and blocks known malicious HTTP requests. Blocked HTTP requests include many, but not all, forms of Brute Force, Cross-Site Scripting (XSS), Remote File Inclusion (RFI), Remote Execution, and SQL injection (SQLi) attacks. By default, the mod security module is enabled on AEM as a Cloud Dispatcher (Apache), but the required rules and configurations can be enabled based on your needs.

For more details, refer to this document — Use ModSecurity to protect your AEM site from DoS Attack | Adobe Experience Manager (

IP Allow List:

IP allowlisting is a way of giving trusted individuals access to the business network. With an IP allow list, the network administrator can allow specific IP addresses to access your files, applications, and software remotely.

AEM as a cloud service is, by default, accessible via the internet. While security is handled through user authentication and authorization, IP allow-listing is a way to limit access only to trusted IP addresses. Cloud Manager’s IP allowlists can be used to limit and control access only to such trusted IP addresses.

Cloud Manager users with appropriate permissions can create allowlists of trusted IP addresses from which their site’s users can access their AEM domains. After adding IP allowlists — Enter an IP or IP CIDR block that can be applied/unapplied multiple times as a unit or entity to an author and/or publisher service in an environment. For instance, this would be helpful if you wish to allow access to your Author environment from your company’s network, VPN, or VDI but block external access.

For more details, refer to this document — Adding IP Allow Lists | Adobe Experience Manager Applying and Un-Applying IP Allow Lists | Adobe Experience Manager

CDN uses the IP Allowlists defined in Cloud Manager to block the incoming requests for a specific environment/tier. The IP Allow lists defined in Cloud Manager take precedence over Traffic Filters Rules.

Advanced Networking:

AEM as a Cloud Service provides advanced networking features that allow for precise management of connections to and from AEM as a Cloud Service program.

AEM as a Cloud supports various networking configurations, including — Flexible Port egress, Dedicated egress IP address, and VPN.

Virtual Private Network (VPN) allows an AEM as a Cloud Service customer to connect the AEM environments within a Cloud Manager Program to an existing, supported VPN. This allows secure and controlled connections between AEM as a Cloud Service and services within the customer’s network.

Flexible port egress allows for custom, specific port forwarding rules to be attached to AEM as a Cloud Service, allowing connections from AEM to external services to be made.

The dedicated egress IP address allows requests from AEM as a Cloud Service to use a dedicated IP address, allowing the external services to filter incoming requests by this IP address.

For more details, refer to this document — Advanced networking | Adobe Experience Manager Demystifying Dedicated Egress IPs in AEM Cloud Services | by Albin Issac | Tech Learnings | Dec, 2023 | Medium

Dispatcher Filters:

The request can also be restricted at the dispatcher layer by the /filter section to specify the HTTP requests the Dispatcher accepts. All other requests are sent back to the web server with a 404 error code (page not found). If no /filter section exists, all requests are accepted.

The /filter section consists of a series of rules that either deny or allow access to content according to patterns in the request-line part of the HTTP request. Use an allowlist strategy for your /filter section:

  • First, deny access to everything.
  • Allow access to content as needed.
/filter {
/0001 { /glob "*" /type "deny" }
/0002 { /type "allow" /method "POST" /url "/content/[.]*.form.html" }

For more details, refer to this document — Configuring Dispatcher | Adobe Experience Manager

HIPPA (Health Insurance Portability and Accountability Act) Compliance:

HIPAA compliance ensures the protection and confidential handling of patient health information, adhering to strict standards set by the Health Insurance Portability and Accountability Act.

Adobe provides healthcare customers with services that are ready to accept PHI, referring to these services as HIPAA-Ready Services. These HIPAA-Ready Services have additional features and functionalities that allow both customers, Covered Entities or Business Associates, and Adobe to comply with their respective HIPAA obligations.

The Adobe Experience Manager (AEM) as a Cloud Service is part of the HIPPA-ready service provided by Adobe.

Additional licensing is associated with enabling the HIPPA-ready service for the AEM as a Cloud service.

For more details, refer to this document — HIPAA Ready (

Mutual Transport Layer Security (mTLS) authentication from AEM:

AEM supports integrating with the external APIs that require mTLS authentication. The mTLS or two-way TLS authentication enhances the security of the TLS protocol by requiring both the client and the server to authenticate each other. This authentication is done by using digital certificates. It is commonly used in scenarios where strong security and identity verification are critical.

For more details, refer to this document — Mutual Transport Layer Security (mTLS) authentication from AEM | Adobe Experience Manager (

Server-to-server Token-Based Authentication:

AEM’s Developer Console grants access to Service Credentials, which are production-ready service-to-service access tokens used to facilitate external applications, systems, and services to interact with AEM Author or Publish services over HTTP programmatically. Also, Local Development Access Token can be used by developers building integrations that require programmatic access to AEM as a cloud service needs a simple, quick way to obtain temporary access tokens for AEM to facilitate local development activities. To satisfy this need, AEM’s Developer Console allows developers to self-generate temporary access tokens that can be used to access AEM programmatically.

For more details, refer to this document — Service credentials | Adobe Experience Manager ( Local Development Access Token | Adobe Experience Manager (

Data encryption:

All data in transit between AEM as a Cloud Service and external components is conducted over secure, encrypted connections using TLS 1.2 or greater. The cloud service provider encrypts all data at rest.

AEM as a Cloud Service also has a FIPS-approved crypto library and support for encryption keys to crypt all the critical data present in the cloud repository.

For more details, refer to this document — aem-cloud-service-security-overview.pdf (

OAuth2 Support for the Mail Service:

AEM as a Cloud Service offers OAuth2 support for its integrated Mail Service, allowing organizations to adhere to secure email requirements.

For more details, refer to this document — OAuth2 Support for the Mail Service | Adobe Experience Manager

Secret Variable Management through Cloud Manager:

In AEM as a Cloud service, the environment-specific configurations can be enabled using the Cloud manager environment variable. Two value types can be enabled — secret values and standard variables. The secret values can be centrally managed through Cloud Manager UI rather than managed through the code base to improve security; the secret variables can be referred to OSGI services, JAVA code, etc.

For more details, refer to this document — Support Custom Run Modes in AEM as a Cloud | Environment Specific Variables in AEM as a Cloud | by Albin Issac | Tech Learnings | Medium

Network security:

The AEM as a Cloud Service security model includes tenant and node-level isolation for all services. Each AEM as a Cloud Service tenant exists within its own isolated namespaces, including its own networking policies, computing, and storage.

Reference — aem-cloud-service-security-overview.pdf (

IAM integration:

AEM as a Cloud Service integrates Adobe Identity Management Service (IMS) for user verification. Various other Adobe products, including the Adobe Admin Console, also utilize this IMS authentication method. For AEM Authors in AEM as a cloud service, Adobe IMS authentication is activated, a change from previous AEM versions where identity and access management (IAM) settings had to be implemented individually on each AEM author server. With AEM in the cloud, single sign-on (SSO) configurations for AEM Authors and user and group management are centrally handled through the Adobe Admin Console using Adobe IMS.

For more details, refer to this document — AEM as a Cloud: IMS based SSO Authentication for Authors | by Albin Issac | Tech Learnings | Dec, 2023 | Medium

Also, the IAM system can be integrated with the publishers to enable an authenticated experience for the users who visit AEM websites.

For more details, refer to these documents — Enable User Authentication for AEM Websites — Azure AD B2C OAuth 2.0 | by Albin Issac | Tech Learnings | Medium Enable User Authentication for AEM Websites — Azure AD B2C | SAML Application with Azure AD B2C | by Albin Issac | Tech Learnings | Medium Social Login with Google OAuth2 — Adobe Experience Manager (AEM) | by Albin Issac | Tech Learnings | Medium Social Login with LinkedIn — Adobe Experience Manager (AEM) | by Albin Issac | Tech Learnings | Medium

Security Headers:

Security headers are HTTP response headers that define whether a set of security precautions should be activated or deactivated on the web browser. The security headers can be enabled through the Dispatcher (Apache) layer also; if required, some of the security headers can be directly enabled through the AEM publisher,

For more details, refer to this document — Adobe Experience Manager(AEM): HTTP Security Headers for Websites | by Albin Issac | Medium

Protect against Cross-Site Scripting (XSS)

Cross-site scripting (XSS) allows attackers to inject code into web pages viewed by other users. Malicious web users can exploit this security vulnerability to bypass access controls.

AEM applies the principle of filtering all user-supplied content upon output. Preventing XSS is given the highest priority during both development and testing.

The XSS protection mechanism provided by AEM is based on the AntiSamy Java™ Library provided by OWASP (The Open Web Application Security Project). The default AntiSamy configuration can be found at


It is important that you adapt this configuration to your own security needs by overlaying the configuration file. The official AntiSamy documentation provides you with all the information you need to implement your security requirements.

Reference — How to Protect AEM Websites from Cross-Site Scripting(XSS) (

Protect against Cross-Site Request Forgery Attacks

Cross-site request forgery (CSRF) is a web vulnerability that lets a malicious hacker trick the victim into submitting a request that allows the attacker to perform state-changing actions on behalf of the victim.

AEM uses CSRF tokens, and the Sling Referrer Filter — Adobe Experience Manager’s Referrer Filter enables access from third-party hosts to protect the websites from CSRF attacks.

For more details, refer to this document — CSRF protection | Adobe Experience Manager Referrer Filter configuration with AEM Headless | Adobe Experience Manager

In summary, security is essential in the cybersecurity landscape for any platform or website. It is imperative that every platform implements necessary measures to safeguard both the platform and user data. As a cloud service, AEM offers multiple layers of security configurations to protect the platform, enabling these configurations as needed.

Friday, January 26, 2024

Optimizing Your Website: A/B Testing

 In the ever-evolving digital landscape, the success of a website hinges on more than just attractive design and engaging content. It’s about creating an online experience that resonates with your audience, drives conversions, and outperforms the competition. This is where A/B testing becomes an indispensable tool. In this post, let us delve into the details of A/B testing to help you optimize your website effectively.

A/B testing, at its core, is a method to compare two versions of a web page to see which one performs better. It’s not just about changing a color here or a font size there; it’s a systematic approach to understanding user behavior and making data-driven decisions.

Why Consider A/B Testing?

  • Improved User Engagement: By testing different elements of your website, you can determine what resonates best with your audience, leading to increased engagement.
  • Data-Driven Decisions: A/B testing provides concrete data, removing guesswork and allowing for informed decision-making.
  • Increased Conversion Rates: Small changes can significantly impact user behavior, and A/B testing helps identify changes that increase conversions.
  • Reduced Bounce Rates: By optimizing the user experience, A/B testing can decrease the number of visitors who leave your site quickly.
  • Risk Mitigation: Test changes on a portion of your audience to gauge reactions before a full rollout, reducing potential risks.
  • Personalization: Tailor experiences to different user segments, improving satisfaction and loyalty.

Key strategies to conduct successful A/B tests:

  • Understanding Your Audience: Learn to align your testing strategy with user expectations and behavior.
  • Defining Clear Objectives: We emphasize the importance of setting specific, measurable, achievable, relevant, and time-bound (SMART) objectives for each test.
  • Choosing the Right Elements to Test: From call-to-action buttons to headlines, images, and page layouts, we guide you on what elements to test for maximum impact.
  • Creating a Hypothesis: Develop a hypothesis based on data and insights and use it to predict the outcome of your test.
  • Implementing the Test: Create a variation based on your hypothesis, and A/B test it against the base version. A variation is another version of your current version with changes that you want to test. You can test multiple variations against the control to see which one works best.
  • Run test: Kick off the test and wait for the stipulated time for achieving statistically significant results.
  • Analyzing Test Results and deploy changes: Learn how to interpret the data to make informed decisions. If the test succeeds, deploy the winning variation.
  • Continuous Improvement: Understand that A/B testing is an ongoing process, not a one-time fix.

Types of Testing:

  • A/B Testing: The most basic form where two versions (A and B) of a single variable are compared against each other.
  • Split URL Testing: Similar to A/B testing but involves different URLs. This is useful for testing two very different designs or page layouts.
  • Multivariate Testing (MVT): Tests multiple variables simultaneously to see which combination creates the best outcome.

I was using free trial version for exploring the different types of testing.

Let us quickly see the details on conducting various testing.

For any A/B testing engine you should first install piece of Java Script to your websites head section in vwo it's called as HTML SmartCode.

Attributes: Define visitor characteristics according to your requirements to visualize their unique identity. There will be standard attributes such as Visitor Language, Device Type, Location, Browser, Operating System, Landing Page URL, etc. You can also define custom attributes to segment your customers.

Events: Setup and track all visitor activities on your website. There will be standard events such as Screen Viewed, Page Visit, Click etc. You can also define custom attributes to capture visitor events.

Segments: Slice visitor data to understand behavior and create high-impact audience groups. There will be standard events such as Direct Traffic, Referral Traffic, Desktop Traffic, New Visitors, Returning Visitors. You can also define custom segments based the Attributes and Events.

You will have the capability to integrate with external Analytics/CDP systems to import attributes and segments into the A/B testing tool.

Triggers: Setup when events, like campaigns will appear in visitor journeys. There will be standard triggers such as Page Visit, Session time > 60 seconds etc. You can also define custom triggers based on the events defined.

Metrics: Specific measurements or key performance indicators (KPIs) that are used to evaluate the performance of campaigns. Define metrics based on the events to measure the campaign success.

Let’s now quickly conduct an A/B test for a change on a page.

Create a A/B Test campaign.

Add the URLs you want to include in your A/B testing campaign.

Create required variations, select the Traffic Split e.g Equal between base variation and other variations.

Edit the Variation through visual editor to enable the changes.

I am going to change the post Title on this variation through Edit Element option, you can perform other options too.

You can save section of the page as a reusable Widgets through “Save to Library Option.”

Additionally, you can apply standard widgets or elements, or use widgets saved by you, to modify the page’s user experience.

Save the variation changes.

Now add the metrics to the campaign, primary and secondary if required.

Now select the segment to run this test, also define the Traffic Allocation.

Additionally, you can define the Triggers, also Schedule to automatically start or pause the campaign, Manual Activation etc.

You will be able to preview the variations.

Now that the campaign is ready, you can start the test. As users access the page, they will be randomly switched between the base experience and the variation. Additionally, if needed, the campaign can be paused and resumed.

After reviewing the metrics, you should be able to roll out the winning variation to all customers.

Same way you should be able to create test for Split URL or Multivariate testing.

Split URL: Split Testing or Split URL Testing is a website optimization process to test different variations of your website hosted on multiple URLs. This test takes two or more variants of a web page and divides your website traffic between them. It helps identify the best-performing variation based on your conversion goals. Split tests are suitable in case of major changes being made on a website e.g. Website layouts, Backend algorithms and etc. Avoid a split-URL test while making little modifications to the website, such as changing the color of the CTA, and headlines as this can cause lag in the variation owing to visitor redirection.

Multivariate: In multivariate testing, multiple elements of a webpage are modified & tested to determine which combination performs better. Although multivariate testing can be incredibly valuable, it’s not the right fit for every scenario. Sometimes, a simple A/B test is the best choice. However, if you want to test several variants, multivariate tests are a great way to pinpoint which winning combinations drive click-through rates (CTR), conversions, and revenue.

You can open the visual editor and enable the changes on different elements — tool creates multiple combinations from the permutations of changes made by you.

I made changes to three different elements, and the tool created various combinations to test variations of these changes.

You can define other configurations and then start the campaign. The duration calculator identifies the estimated campaign duration based on the parameters configured.

After you run your test, you need to analyze your results and implement changes. You should compare the performance of each combination against your goal and hypothesis. You should look for the combination that has the highest impact on your goal, such as the highest conversion rate, click-through rate, or revenue. Finally, you should implement the winning combination on your page and monitor the results.

In conclusion, A/B Testing, Split URL Testing, and Multivariate Testing are powerful tools that empower website owners and marketers to make data-driven decisions for optimizing their online presence. A/B Testing allows you to compare two variations and choose the one that resonates best with your audience. Split URL Testing takes it a step further by evaluating entirely different web pages. Multivariate Testing explores multiple elements simultaneously to fine-tune your website’s performance.

By harnessing the insights gained from these testing methods, you can enhance user experience, boost conversion rates, and achieve your website goals more effectively. Remember, optimization is an ongoing process, and regularly testing and refining your website is key to staying competitive in the digital landscape. So, start testing, analyzing, and optimizing to unlock the full potential of your website and deliver an exceptional user experience.