Common Problems and Solutions of Webpage Integration

Version

Function Description

This document summarizes common problems during the webpage integration process and their solutions.

Problem:

After you log in to the decision-making platform as a non-admin user and access the URL http://IP address:Port number/webroot/decision/Called API, the following error occurs.

Solution:

You need access permission on this page. For details, see Hierarchical Authorization.

Problem:

The built-in toolbar is displayed by default when a template is embedded into a webpage. However, if you have customized a toolbar on the webpage, you may want to hide the built-in toolbar.

Solution one: web attribute configuration

Open the template in the designer, choose Template > Web Attribute on the menu bar, and configure the toolbar visibility for the Data Analysis Preview, Pagination Preview, and Data Entry Preview modes in Data Analysis Setting, Pagination Preview Setting, and Data Entry Setting, respectively.

Take Pagination Preview Setting as an example. Set Following Settings to Set for This Template Separately, and deselect Use Toolbar to hide the built-in toolbar, as shown in the following figure.

Solution two: control via the URL parameter

On the template preview page, suffix &__showtoolbar__=false to the preview URL to hide the built-in toolbar.

X-Frame-Options Header-Related Error

Problem:

When you embed a report link into a web app with an iframe, the following error occurs.

The error message "XXX refused to connect" is displayed on the page.

Press F12 or right-click the page and select Inspect to open Console in Chrome, where the error description is displayed: "Refused to display 'http://localhost:8080/webroot/decision/view/report?XXXXXXX'  in a frame because it set 'X-Frame-Options' to 'sameorigin'", as shown in the following figure.

Cause:

X-Frame-Options is an HTTP response header used to instruct whether a browser should allow a webpage to be displayed in a <frame>, <iframe>, <embed>, or <object>. Sites can use the header to avoid clickjacking attacks by ensuring that their content is not embedded into other sites.

Three values of the X-Frame-Options header:

deny: The page cannot be displayed in a frame, even if on pages from the same origin (domain).

sameorigin: The page can be displayed in a frame on pages from the same origin.

allow-from uri: The page can be displayed in a frame on pages from specific external domains.

The error mentioned above occurred because the value of the X-Frame-Options header is set to sameorigin, while the page embedding the content is not from the same origin, causing the display to fail.

Solution:

Log in to the decision-making platform as the admin, choose System Management > Security Management > Security, click Advanced Setting in Security Headers, and disable Prevent Clickjacking, as shown in the following figure.

Note: 

If the solution does not resolve the problem, the X-Frame-Options header may be configured on the Apache, Nginx, IIS, HAProxy, or Express servers. You need to check the server configuration files.

"This request has been blocked; the content must be served over HTTPS" Error

Problem:

When you embed an HTTP address into an HTTPS page, the error occurs: "This request has been blocked; the content must be served over HTTPS."

Cause:

HTTPS, also referred to as HTTP over SSL (Secure Socket Layer), is designed to provide a secure communication channel. Therefore, websites served over HTTPS do not allow HTTP requests. For the content to be displayed properly, all HTTP requests need to be replaced with HTTPS requests.

Solution:

Method one:

To enable HTTPS access for an HTTP page, you need to configure an SSL certificate on the server, which allows the page to be served securely over HTTPS. For details, see HTTPS Access by Configuring the SSL Certificate in Tomcat. SSL can be configured on Nginx, Apache, and IIS servers, but this may not be the most convenient option. Therefore, when an HTTPS address is required, you are advised to use method two.

Method two:

Note: 

The method only applies to loading static resources, for example, a static image. When the decision-making platform or a report is embedded into an HTTPS page, the requests made during loading are not for static resources. In this case, method one should be used to embed the content into an HTTPS page.

The HTTP Content Security Policy (CSP) upgrade-insecure-requests directive instructs the browser to upgrade HTTP requests to HTTPS before fetching the content, preventing users from accessing insecure resources.

To implement this, you can add the meta tag in the <head> section of the iframe's parent page (usually an HTML file):

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

The following figure shows adding the meta tag in the <head> section.

"Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame" Error

Problem:

When you access iframe content across different origins, the error occurs: "Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame."

Cause:

The error occurs when the iframe attempts to access the DOM information of the embedded page from a different origin.

Solution:

You need to find the appropriate solution to resolve the iframe cross-domain issue based on the actual scenario. A commonly used solution is the postMessage() method.

Problem:

If the FR.doURLPDFPrint() method in the built-methods of finereport.js is called when you embed a report into your own page, a JavaScript error occurs: "$.support.boxModel is null or not an object", as shown in the following figure.

Cause:

The issue is caused by a jQuery version conflict – the version of jQuery you are using differs from that used by finereport.js.

To check the jQuery version, you can press F12, or right-click the page and select Inspect, to open Console in Chrome, and enter the command jQuery.fn.jquery, as shown in the following figure.

Solution:

Place the code that calls finereport.js before jQuery-based scripts to ensure that finereport.js is loaded first.

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>

An error code will be returned if a backend error occurs during system integration. For details about error codes, see Error Code Summary and Solution.

Problem:

The HTML content fails to be displayed after being embedded, and the error occurs: "XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd."

Cause:

The HTTP request failed.

Solution:

Check if the project is served over HTTPS. If so, HTTP requests will fail. You need to ensure that a consistent protocol is used for all requests.

Problem:

The SSO plugin is installed, and SSO is configured successfully in a project. However, when accessing the webpage integration API, you are still redirected to the login page of the decision-making platform.

Cause:

SSO fails because the token attribute is lost when the backend SSO interceptor rewrites the request. You can resolve the issue by enabling token retrieval from cookies.

Solution:

You (the super admin) can modify the configuration via the FINE_CONF_ENTITY Visualization Configuration plugin to have tokens retrieved from cookies for validation on the server, thus fixing SSO failures that occur in backend and cross-domain scenarios when HTTPOnly is enabled.

The settings take effect after you restart the server.

Note:

For details about how to modify field values in FineDB data tables, see FINE_CONF_ENTITY Visualization Configuration.