External Content: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
 
(40 intermediate revisions by 2 users not shown)
Line 1: Line 1:
With the External Content presentation object you can show content from some other website or web portal. The External Content presentation object uses html's iframe element to embed the websites. Using the External Content presentation object enables integrating multiple Web applications into a single UI.
External Content component shows content from another webpage in the dashboards. For example Microsoft Sharepoint or other content management systems can be integrated into QPR ProcessAnalyzer. The External Content component uses the HTML ''iframe'' element to embed the website.


== Properties Tab ==
The properties of the External Content component can be opened when the dashboard is in the Add component mode.
The following properties can be set on the Properties tab:
* '''Name''': Name of the External Content presentation object.
* '''Description''': Description for the External Content presentation object.
* '''External Content URL''': The URL of the external page you want to embed in QPR MobileDashboard. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port as QPR MobileDashboard.


== Accessing context variables in the external content webpage ==
== External Content URL ==
Session [[Context#Effective_Context_and_Context_Inheritance|context variables]] can be get and set in the external content webpage using following javascript functions:
'''External content URL''' defines the URL of the external page you want to embed. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port.
* '''getSessionVariable(variableName)''' where variableName is the name of the read session context variable
* '''setSessionVariable(variableName, variableValue)''' where variableName is the name of the set session context variable and variableValue is its value (the value must be string)


Following code example shows how the context variables can be set and get through the '''window.parent''' object:
== Passing Variables in Url==
<pre>
You can pass context variable values in the iframe url using the variable tags. The variables can be configured on the Variables tab of the External Component properties. Example:
window.parent.setSessionVariable("variable1", "value1");
var variable1 = window.parent.getSessionVariable("variable1");
</pre>
 
The external webpage must be referenced using the same server name and port, so that these javascript functions can be accessed. This is because of web browsers security features ([https://en.wikipedia.org/wiki/Same-origin_policy same origin policy]).


There is a test page available with the QPR MobileDashboard installation where the functioning of these variables can be tested: '''http(s)://SERVERNAME:8080/mobiledash/examples/test.html'''
'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/<#variableName></nowiki>'''


These functions read only the session context - not the external presentation object's effective context. To access the external presentation object's effective context, you can pass context variable values in the iFrame url using the '''{#variableName}''' syntax. Example:
* When an effective dashboard variable value is changed, the external page url changes to reflect the up-to-date variable values. If the changed variable tag appears after the anchor (#) in the url, the web page is not reloaded.
* If there is an equals sign (=) immediately before the tag, the value is url component encoded, because it's assumed to be a url parameter value. Otherwise, no encoding is applied and the variable value is placed to the url as such.
* Variables can contain any type of data and the values are converted to strings when placed in the url. If the url has a tag and the corresponding variable does not exist, the tag is replaced with an empty value.


'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#?variable1={#variable1}&variable2={#variable2}</nowiki>'''
== Content-Security-Policy Restrictions==
By default, only websites from the same origin than QPR ProcessAnalyzer can be embedded. This is restricted by the Content-Security-Policy (CSP) HTTP header's ''child-src'' and ''frame-src'' directives.


If the variable references appear after the hash mark (#), the external web page is not refreshed when the context variables values change. In the external web page, url changes can be monitored through '''onhashchange''' javascript event of the '''window''' object. The following example registers a function that is called when the url changes:
Example CSP to allow embedding the https://www.google.com website to QPR ProcessAnalyzer:
<pre>
<pre>
window.onhashchange = function() {
default-src 'none';script-src 'self';style-src 'self' 'unsafe-inline';img-src 'self' data: blob:;connect-src 'self';font-src 'self' data:;manifest-src 'self';child-src 'self' https://www.google.com/;frame-src 'self' https://www.google.com/;object-src 'none';frame-ancestors 'self'; form-action 'none';base-uri 'none';worker-src blob:; upgrade-insecure-requests;
  var iFrameUrl = window.location.href;
  var listOfParameters = iFrameUrl.substr(iFrameUrl.indexOf("#") + 1));
}
</pre>
</pre>


== Web browser security considerations ==
More information how to change the CSP setting in [[QPR_ProcessAnalyzer_Security_Hardening#HTTP_Response_Headers|Security Hardening]].
Some websites prevent themselves to be embedded into other websites using iFrame. In those cases, the external content presentation object will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame" (in Internet Explorer). The way to workaround the issue is to have '''X-Frame-Options''' HTTP response header changed in the embedded website (more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
{{MDBTutorialExternalContent}}


[[Category: QPR MobileDashboard]]
== Web Browser Security Considerations ==
Some websites prevent themselves to be embedded into other websites using iframe. In those cases, the component will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame". The way to workaround the issue is to have '''X-Frame-Options''' HTTP response header changed in the embedded website (more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).

Latest revision as of 23:51, 3 April 2026

External Content component shows content from another webpage in the dashboards. For example Microsoft Sharepoint or other content management systems can be integrated into QPR ProcessAnalyzer. The External Content component uses the HTML iframe element to embed the website.

The properties of the External Content component can be opened when the dashboard is in the Add component mode.

External Content URL

External content URL defines the URL of the external page you want to embed. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port.

Passing Variables in Url

You can pass context variable values in the iframe url using the variable tags. The variables can be configured on the Variables tab of the External Component properties. Example:

http(s)://SERVERNAME/ExternalPresentationObjects/<#variableName>

  • When an effective dashboard variable value is changed, the external page url changes to reflect the up-to-date variable values. If the changed variable tag appears after the anchor (#) in the url, the web page is not reloaded.
  • If there is an equals sign (=) immediately before the tag, the value is url component encoded, because it's assumed to be a url parameter value. Otherwise, no encoding is applied and the variable value is placed to the url as such.
  • Variables can contain any type of data and the values are converted to strings when placed in the url. If the url has a tag and the corresponding variable does not exist, the tag is replaced with an empty value.

Content-Security-Policy Restrictions

By default, only websites from the same origin than QPR ProcessAnalyzer can be embedded. This is restricted by the Content-Security-Policy (CSP) HTTP header's child-src and frame-src directives.

Example CSP to allow embedding the https://www.google.com website to QPR ProcessAnalyzer: 

default-src 'none';script-src 'self';style-src 'self' 'unsafe-inline';img-src 'self' data: blob:;connect-src 'self';font-src 'self' data:;manifest-src 'self';child-src 'self' https://www.google.com/;frame-src 'self' https://www.google.com/;object-src 'none';frame-ancestors 'self'; form-action 'none';base-uri 'none';worker-src blob:; upgrade-insecure-requests;

More information how to change the CSP setting in Security Hardening.

Web Browser Security Considerations

Some websites prevent themselves to be embedded into other websites using iframe. In those cases, the component will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame". The way to workaround the issue is to have X-Frame-Options HTTP response header changed in the embedded website (more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).

Retrieved from "https://wiki.onqpr.com/pa/index.php?title=External_Content&oldid=28000"