This post consolidates real-world cases and frequently encountered issues when embedding SAS Visual Analytics dashboards and reports using the SAS Visual Analytics SDK. It highlights symptoms, causes, and resolutions for a smoother integration.
The Software Development Kit (SDK) for SAS Visual Analytics is primarily designed for use with SAS Viya, not SAS 9.x. The SAS Visual Analytics SDK allows you to embed SAS Visual Analytics reports and objects into custom web applications and mobile apps. While SAS 9.4 can utilize SAS Visual Analytics 7.x, it doesn't have the same SAS Visual Analytics SDK capabilities as SAS Viya.
Issue 1: CORS Errors and Initial Connection Failures
Cross-Origin Resource Sharing (CORS) is the most common hurdle. It occurs when your web application and your SAS Viya server are on different domains.
Symptoms:
- SSO fails when the report is embedded, prompting the user to log in again, even though SSO works when accessing the SAS Viya URL directly.
- The browser's developer console shows a CORS-related error message:
Access to fetch at 'https://sas.viya.server.com/...' from origin 'https://my-webapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Root Cause:
The domain of your web application (the "origin") has not been added to the SAS Viya configuration's list of allowed origins. The SAS server is rejecting the cross-domain request from your application.
Resolution:
- Add your web application's domain, including the port (if not 80 or 443) and protocol (http or https), to the allowedOrigins property in the SAS Environment Manager.
- Navigate to the SAS Environment Manager.
- Go to the Configuration section.
- Search for the sas.commons.web.security.cors configuration.
- Edit the allowedOrigins list to include your application's origin.
- Example Configuration:
- sas.commons.web.security.cors:
Issue 2: Content Security Policy (CSP) Blocking Connections
Even with correct CORS settings, your own web server's security policy can block the SAS Visual Analytics SDK from functioning.
Symptoms:
The browser's developer console shows CSP-related error messages, for example:
Root Cause:
Your web server has an overly restrictive Content Security Policy (CSP) that prevents the browser from making connections to the SAS Viya server or loading scripts from the SAS CDN.
Resolution:
Update your web server's Content-Security-Policy HTTP header to permit connections and resources from the necessary SAS domains.
Issue 3: SSO Prompts for Login Despite Correct SAS CORS Setup
This issue occurs when SAS Viya is correctly configured for CORS, but the authentication step still fails.
Symptoms:
- SSO is fully configured and works correctly elsewhere.
- SAS CORS (allowedOrigins) is correctly configured.
- The embedded SAS Visual Analytics SDK view still shows a login prompt instead of seamlessly authenticating the user.
Root Cause:
The CORS headers are not being applied by your organization's external Single Sign-On (SSO) provider. When the SAS Visual Analytics SDK attempts to authenticate, the SSO provider's endpoint blocks the request because it doesn't trust the origin (https://my-webapp.com).
Resolution:
The CORS policy must be configured on your SSO infrastructure to allow requests from your web application's domain. This is a configuration on the SSO provider's side (e.g., Azure AD, Okta) and is outside the scope of SAS configuration.
Action: Contact your organization’s SSO administrator to update the SSO provider's CORS policy.
Best Practices & Recommendations:
- CORS Configuration Checklist:
- Add all front-end web server domains to the allowedOrigins setting in the sas.commons.web.security.cors configuration of SAS Environment Manager.
- Also include port numbers along with web server domain tothe allowedOrigins setting in sas.commons.web.security.cors configuration of SAS Environment Manager (e.g., http://localhost:8080).
- Use your browser's Network tab in Developer Tools to inspect request headers and verify that Access-Control-Allow-Origin is present and correct.
- SSO Considerations:
- The SAS Visual Analytics SDK relies on the browser's session and cookies. Test in a private/incognito window to rule out stale session issues.
- Remember that CORS must be enabled on both the SAS Viya server and the SSO authentication provider.
- Content Security Policy (CSP):
- Your web server's CSP can be a source of trouble. Ensure connect-src includes your SAS Viya domain.
- You will likely also need to update script-src (for the SAS Visual Analytics SDK from the CDN), frame-src, and style-src for full compatibility.
- Debugging Tools:
- Use browser Developer Tools, check the Console for errors and the Network tab for failed requests.
- Isolate the problem: Compare network logs (HAR files) from a working version versus the failing attempt.
Sample Embed HTML Code to test SAS Visual Analytics SDK
<html>
<head>
<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script>
<style>
html {
background-color: #f0f0f0;
}
sas-report {
width: 75%;
height: 75%;
--sas-report-padding: 10px;
display: block;
}
</style>
</head>
<body>
<sas-report hideNavigation="auto"
authenticationType="credentials"
url="https://your-sas-server"
reportUri="/reports/reports/your-report-id">
</sas-report>
</body>
</html>
Still Facing Issues?
- Check all security layers: Ensure CORS, CSP, CSRF, and Cross-Site Cookie policies are configured correctly across all endpoints (your app, SAS Viya, and any SSO provider)
- Contact SAS Technical Support: When raising a case with SAS Technical Support, provide detailed information, including:
Reference Links:
