Qlik Sense - Embedded - CORS - Require[js/qlik,js] - Cache Enabled

[unknownb]

Hello,

We are facing an issue in our application, which embeds a Qlik Sense dashboard from our analytic server.

When cache is disabled at browser level, (i.e chrome dev tools - clear cache and empty and hard reload) the qlik sense dashboard, title and objects of the sheet load without issue.

However, when cache is enabled, we are getting a number of CORS issues in the console, such as (1a below), even with our page headers including, "no-store, no-cache, must-revalidate". These CORS issues are not present, as above, when the cache is disabled. 

1a;

Access to XMLHttpRequest at 'https://aaaa.xxxx.com/resources/qmfe/sense-client/8.0.13/translations/client/en-US.json' from origin 'https://yyyy.xxxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://aaaa.xxxx.com/resources/qmfe/sense-client/8.0.13/translations/engine/en-US.json net::ERR_FAILED

Looking at our code, it appears the code is not running at the following javascript function;

require(["js/qlik"], function(qlik) {

Where above this, we are setting the following;

require.config( {
			baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources",
			waitSeconds: 15,
			paths: {
				qlik: 'js/qlik.js?qlikTicket=<cfoutput>#session.analyticsLoggedIn#</cfoutput>&v=' + (new Date()).getTime()
			}
		});

As stated, we are confused as without cache it runs fine, with cache, it doesn't.

It may be worth noting, our application is multi tenanted with a number of subdomains and domains, so the CORS is not an easy implentation we are yet to complete.

Any help into what could be causing this, would be great.

[Scotchy]

Review the below ideas, let me know if it is useful.

The issue you are encountering with CORS (Cross-Origin Resource Sharing) when caching is enabled in your application embedding Qlik Sense dashboards is indeed challenging, especially in a multi-tenant environment with various domains and subdomains. Let's break down the problem and possible solutions:

Understanding the Issue

1. CORS Policy: CORS is a security feature that restricts web applications from making requests to a domain different from the one that served the web page. Your error message indicates that the browser is blocking requests to resources from https://aaaa.xxxx.com when originating from https://yyyy.xxxx.com due to the absence of the Access-Control-Allow-Origin header.

2. Cache Behavior: When cache is disabled, the browser may not strictly enforce certain security checks like CORS, which explains why you don't encounter the issue in this scenario. However, with caching enabled, these security checks are enforced, leading to the CORS errors you're observing.

3. JavaScript require Function: This function not running indicates that the script it's supposed to load (qlik.js) isn't being accessed correctly, possibly due to the CORS issues.

Potential Solutions

1. Properly Configure CORS Headers: Ensure that your server (https://aaaa.xxxx.com) includes the appropriate CORS headers in its responses. Specifically, it needs to include the Access-Control-Allow-Origin header with the value set to the origin of your requesting site (https://yyyy.xxxx.com) or a wildcard (*), although the latter is less secure and not recommended in a production environment.

2. Verify Cache-Control Headers: Although you mentioned setting "no-store, no-cache, must-revalidate", it's important to ensure that these headers are correctly implemented on both the server and client sides.

3. Cross-Domain Requests with Subdomains: In a multi-tenant environment with various subdomains, you might need to dynamically set the Access-Control-Allow-Origin header based on the requesting origin, ensuring that only trusted domains are allowed.

4. Update require Configuration: Ensure that the require.config paths and baseUrl are correctly set. The issue might also be related to how caching is managed for the qlik.js file. The query parameter v=(new Date()).getTime() is commonly used to avoid caching, but there might be conflicts with other caching policies set at the browser or server level.

5. Debugging Tips:

   • Check the network requests in the browser's developer tools to see if the headers are correctly set.
   • Temporarily allow all origins in the CORS policy to rule out configuration issues.
   • Ensure that the Qlik Sense server is properly configured to handle CORS requests, especially in a multi-domain setup.

6. Server Configuration: If you have control over the Qlik Sense server, consider modifying its configuration to better handle CORS, especially considering the multi-tenant nature of your setup.

Next Steps

• If you have access to the server configurations, start by adjusting the CORS headers.
• Check the client-side implementation for any discrepancies in header handling or script loading.
• Consider consulting with your network or server administrators if the issue persists, as it might involve deeper server-side configurations.

Remember, CORS policies are critical for web security, so while troubleshooting, it's important to maintain a balance between functionality and security. If you need more specific guidance, especially regarding Qlik Sense server configurations or advanced JavaScript debugging, please provide additional details.