Fortifying Embedded BI: Exploring the Power of CORS Security

In the past, integrating diverse web applications or services for embedding purposes was often hindered by the same-origin policy’s limitations. This policy posed obstacles to cross-origin requests, impeding access to resources from different domains crucial for successful embedding. However, the introduction of cross-origin resource sharing (CORS) headers ushered in a transformative era of secure data sharing across domains, revolutionizing the embedding landscape. In this blog, you’ll learn the importance of using CORS headers to overcome cross-origin request limitations, enabling seamless web application embedding and enhancing online platforms.

What are CORS headers?

CORS serves as a security mechanism, limiting web browsers from making requests to a domain other than the one provided the web page. This feature works through response headers, which servers can utilize to specify which origins have permission to access the resources on the server.

CORS headers

The significance of CORS headers in web development

CORS headers play a crucial role in web development by facilitating secure communication between different domains or origins. It improves web development in the following ways.

Enhanced security

By enabling CORS headers in your embedded application, you can restrict unauthorized access to embedded resources, preventing potential security risks and unauthorized data retrieval from different domains.

Customization and extension

CORS headers play a crucial role in extending or customizing Bold BI to fulfill specific business needs. They enable developers to securely access required resources while creating custom components, connectors, or integrations that interact with the Bold BI server from external domains.

Developer flexibility

CORS headers allow users to leverage the full potential of Bold BI’s embedding capabilities. By specifying the necessary headers, they can handle authentication and manage communication between the host application and embedded Bold BI resources.

Controlled access

With CORS headers, you have granular control over the access permissions for embedded Bold BI resources. You can specify the allowed origins, methods, and headers, giving you the flexibility to define the level of access and functionality available to embedded users.

Factors to consider when using CORS headers in Bold BI

When using CORS headers in Bold BI, you need to consider the following:

1. Enabling CORS headers: Ensure that your server or backend API is configured to include appropriate CORS headers in the HTTP responses. This allows the Bold BI application to make cross-origin requests.
2. Allow specific origins: Specify the allowed origins by configuring the Access-Control-Allow-Origin This header should contain the domain or origins that are allowed to access your Bold BI application.
3. Allow specific HTTP methods: Use the Access-Control-Allow-Methods header to specify the allowed HTTP methods for cross-origin requests. This prevents unauthorized access and potential security risks.
4. Include additional headers: Use the Access-Control-Allow-Headers header for requests requiring custom headers or non-standard headers to specify the allowed headers. This ensures that the browser permits those headers in cross-origin requests.
5. Handle preflight requests: Ensure your server responds correctly to these preflight requests by including the appropriate CORS headers.
6. Secure CORS configuration: Configure your server to enforce strict security measures to prevent unauthorized access and protect sensitive data.

How to set CORS headers in embedded applications

To enable cross-origin requests in embedded applications, follow these steps:

1. On the administration page in the Bold BI site, click the Security Here you can configure CORS settings headers under the CORS section, as shown.

Bold BI Administration Page

2. Enable the Customize CORS Policy option if you want to configure a custom CORS policy.

Customize CORS Policy

3. Set the Access-Control-Allow-Origin header to a specific domain to restrict requests only from that domain. This enables the header to determine the domains permitted to access the server’s resources.

4. Under the Access-Control-Allow-Methods tag, select the GET, POST, and PUT options to specify the allowed HTTP methods for cross-origin requests. To enable secure cross-origin communication from another domain in Bold BI, add the domain to allowed origins, include custom headers like Content-Type and Authorization, and use Access-Control-Expose-Headers to specify extra allowed headers.

How to Set up CORS Headers in an Embedded App

5. Next, select the Save button to save the changes and the new site to be rendered, as shown in the next image.

After following these steps, the CORS headers will be successfully enabled in your tenant, allowing cross-origin requests from different domains in your embedded application. When embedding dashboards in a web application, it is crucial to consider the authorization process. This involves sending authorization details to the backend server and receiving responses. To ensure secure communication and restrict access to authorized domains only, CORS headers are set up. These headers enable cross-origin requests, protecting sensitive data and enhancing security.

To ensure proper CORS configuration, you need to:

1. Specify the exact origins or domains that are allowed to access your resources.
2. Limit the allowed methods and headers to only those required by your application.
3. Consider implementing authentication and authorization mechanisms to control access to your resources further.
4. Regularly review and update your CORS settings to ensure they align with your application’s security requirements.

When embedding a Bold BI dashboard or data source in your application, it is crucial to thoroughly test your CORS configuration to ensure it functions as intended. If you face any error message stating that the content has been blocked by CORS policy, it may be due to the security policy header sent by Bold BI. To resolve this issue, you need to add your origin in the CORS settings under the security section in your tenant, which can be accessed when CORS is enabled in Bold BI.

Real-time use cases of CORS headers

Healthcare industry

By embedding a dashboard into your healthcare application, you can enhance security and ensure secure access through the configuration of CORS settings in your tenant. Configuring CORS headers in healthcare analytics and research permits authorized domains to securely access sensitive patient data, maintaining data privacy, controlling access, and facilitating a smooth flow of information across domains.

Sample Showing How Healthcare Organizations Can Securely Retrieve Patient Information

Enabling CORS settings on the server allows requests from different domains to access resources served by applications or APIs. This involves adding specific headers, including the critical Access-Control-Allow-Origin header, which specifies authorized domains. When an unauthorized domain attempts to access healthcare industry resources, the browser blocks the request based on the CORS headers received from the server, ensuring the security and integrity of the data and preventing unauthorized access.

The browser will restrict the resource request based on the CORS Origin header provided by the application. If the requested domain differs from the one configured in the application, it will display the following console error.

Cross-Origin Error

Find the article interesting? You can also set up CORS headers in your application by following the procedures in this help document.

I hope this article helps you understand why setting up CORS headers is important. To know the features of Bold BI in detail, subscribe to this blog.

Originally published at https://www.boldbi.com on June 21, 2023.