🚩CORS, CSP and Preview API

This page highlights the common reasons why your preview API response may fail and what you can do to ensure your APIs are accessible to preview.

When you use Preview API option on QAPI, you may sometime encounter a situation where you see no response from APIs and the status either says "Error" or "Not Found". These issues are due to security policies like CORS, CSP and likes. This guide helps you identify if the unsuccessful calls are due to any of these issues and how you can resolve them.

Note that AI uses Preview API to generate assertions. If Preview API doesnt work due to the issues listed in this guide, you will not be able to generate assertions using AI. We are also working on an update, which will resolve this soon.

Understanding CORS Errors

CORS (Cross-Origin Resource Sharing) errors are security protections enforced by web browsers under the Same-Origin Policy. This policy mandates that scripts on a web page can only request data from the same origin (domain, protocol, or port) from which the script originated. This measure helps prevent malicious scripts from accessing sensitive information from other websites. If a web page tries to fetch resources from a different origin without proper permissions, the browser will block the request, resulting in a CORS error.

Causes of CORS Errors

• Browser Security: Browsers automatically enforce the Same-Origin Policy to prevent potentially harmful interactions between different origins.

• Lack of Permissions: If an external server does not send the appropriate headers to allow cross-origin requests, the browser will block these requests.

How to Identify CORS Errors

CORS errors are typically logged in the browser's console. Developers might notice messages indicating that a cross-origin request was blocked due to missing or incorrect CORS headers. These messages are crucial for debugging issues related to resource sharing between different origins.

Solutions to CORS Errors

1. Server-Side Configuration: Ensure that the server hosting the resources sets the correct CORS headers. This often involves configuring the Access-Control-Allow-Origin header to include the domains that need access to the resources.

2. Using a CORS Plugin: If configuring the server isn’t an option, using a CORS plugin can help bypass these restrictions during development. However, this is only a temporary fix and not recommended for production environments.

3. Upgrade Plans: For environments where CORS errors persist, consider upgrading to our pro plan that offers enhanced capabilities for handling cross-origin requests.

We are soon releasing our own plugin designed specifically for this purpose, we will update this section with the link to download the same.

Handling Content-Security-Policy (CSP) Errors

A CSP error occurs when a webpage’s Content Security Policy blocks certain resources from being loaded. These policies are put in place to prevent attacks such as Cross-Site Scripting (XSS) and data injection.

Implications of Allowing All URLs

• Increased XSS Risks: Allowing all URLs can expose the site to XSS attacks, where malicious scripts are injected into the webpage.

• Potential Data Leakage: Unrestricted URL access can lead to accidental data exposure, compromising sensitive information.

• Loss of Control Over Content: Without URL restrictions, the integrity of the website content can be compromised, potentially harming the user experience and reputation.

We are actively working on solutions which will help resolve many of these situations. Please watch this space for more updates.