External Link Previews

OTRS supports link previews via several features aimed at integrating externally provided content. By having contextual information in the right place, agent’s daily work can be made much more streamlined and straightforward.

Article Meta Filters

Article content can be automatically scanned and relevant information extracted with the help of meta filters.

For example, let’s configure extraction of CVE codes from article preview in the ticket detail view and display direct links to external pages with more information.

1. Go to the System Configuration in the administrator interface, and enable the AgentFrontend::TicketDetailView::ArticleMeta master switch for the article meta feature.

2. Search for the setting AgentFrontend::TicketDetailView::ArticleMetaFilters###0002-Custom and enable it.

3. Edit the setting, and set its value to the following YAML configuration:

   ---
   - Label: CVE Details
     Name: cvedetails
     Target: _blank
     URL: https://www.cvedetails.com/cve/<MATCH1>-<MATCH2>-<MATCH3>
     URLPreview: https://www.cvedetails.com/cve/<MATCH1>-<MATCH2>-<MATCH3>
     RegExp:
     - (CVE|CAN)\-(\d{3,4})\-(\d{2,})
     Active: 1
   

4. To configure the Content Security Policy, search for the setting WebApp::Server::AdditionalOrigins.

5. Add the following origin under the frame-src key, in order to allow these web pages for embedding in the OTRS application:

   https://www.cvedetails.com
   

   

   Additional Origins for Content Security Policy

6. Deploy the modified system configuration.

To test the feature, you will now need a ticket article that contains at least one valid CVE identifier in its text, for example CVE-2019-1290.

Article Meta Preview

A button will be shown below the preview area in the Communication Stream or Communication Compact widget, which leads to the external page. Hovering over this button will show a preview popover with the scaled down content of the same page.

Dynamic Field Value

A dynamic field can be configured to show a link preview based on its value. The value can be used as whole or part of the link in question.

The following example use a dynamic field named Field1. Please make sure that you replace it with the actual name of your dynamic field.

1. Configure the dynamic field to show a link based on its value via Link for preview setting. Please see the setting reference for more information.

   You can use the following value for testing:

   https://example.com/handle?query=[% Data.Field1 | uri %]
   

2. Configure the display of the dynamic field value in ticket detail view, for example in the Properties widget. Please see the relevant guide for more information.

3. Search for the setting WebApp::Server::AdditionalOrigins in the System Configuration.

4. Add the following origin under the frame-src key, in order to allow these web pages for embedding in the OTRS application:

   https://example.com
   

   

   Additional Origins for Content Security Policy

5. Deploy the modified system configuration.

To test the feature, you will now need a ticket with a value set for the dynamic field in question. To set this field via a ticket action, please see the relevant guide for more information.

Dynamic Field Link Preview

If defined, the ticket dynamic field value will be shown as a property card in the Properties widget, in form of a button which leads to the configured link. Hovering over this button will show a preview popover with the scaled down content of the same page.

Troubleshooting

In case you can not see the preview of the configured link, please note that target web servers might have a configuration in place that prevents them from being embedded in external pages. This is indicated by following or similar errors in the browser console:

Load denied by X-Frame-Options: “SAMEORIGIN” from “site”, site does not permit cross-origin framing from “site”.

Firefox prevented this page from loading in this context because the page has an X-Frame-Options policy that disallows it.

The blocking is normally done via the X-Frame-Options response header which can be set to the prevent the preview on the browser level. If you have the control of the target web server configuration, you might be able to relax this restriction by including the OTRS domain name in the list of allowed origins, or lift the restriction all together.

For more information, please take a look at X-Frame-Options page in the Mozilla Developer Network.

Alternatively, the newer frame-ancestors directive of the Content Security Policy header can be used to block embedding of the target server. This is indicated by following or similar error in the browser console:

Refused to display 'https://example.com/...' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

For more information, please take a look at CSP: frame-ancestors page in the Mozilla Developer Network.