Skip to main content

Embedded: FAQs

What are the differences between the Permission Settings and Filter Display Settings?

We do understand that there is confusion between Permission Settings and Filter Display Settings since you can use Filter Display Settings to hard-set certain values to your dashboard viewers and function the same as permission.

Here is the general rule of thumb to help you decide which one to use:

  • Permission Settings should be used if you want to enforce data access restriction on your embedded analytics viewers so that they can only view a subset of your data. Generally, you'd want to configure this by default as a security best practice.
  • Filter Display Settings should be used to as a convenience method to set up new default values for your embedded dasboard. It helps you override existing dashboard filters' default values, as well as hide the filters of choice. Note that although we do not provide the UI for the embedded viewers to modify this settings' values, it is still possible for them to tamper with these values on their ends.

The differences between the two settings are summarized below.

Permission SettingsFilter Display Settings
PurposeData Access Control                                    Override filter values or hide filters for aesthetics purposes
Data Restriction LevelDataset level (Strict)UI only (Can be tampered)

Let's demonstrate their key differences by inspecting a dashboard with multiple country values as shown in the example below. If you set the Permission Setting for country_name to Vietnam, your country filter will only show the value Vietnam. It will return no value if you try to change the filter value to another value other than Vietnam.

By contrast, if you pick Filter Display Settings to restrict access, clever users can tamper with the country_name and are able to access unauthorized data from other countries.

Filter vs Permission

Why so complicated, all this JWT and extra code?

Our Embedded feature is designed for use cases where our clients want to embed a dashboard into their own application, where when each of their customers log in they will see different data, i.e a restaurant ordering SaaS system will use Holistics Embedded to provide analytics to their individual restaurant customers, where each restaurant only sees data related to their own restaurant.

Since cross-customer data security is important, there is a need for the extra work required to ensure encryption is properly set up.

In short, the additional coding effort is there to ensure:

  • Multi-tenancy data permission: Making sure each of your customers will see data related to themselves only.
  • The URL will expire at some point in the future, preventing anyone having access to the URL to pull the data.

I cannot embed Holistics within my localhost site

Symptoms: You are trying to embed a Holistics dashboard in your localhost, but receive the following error

  • Chrome: holistics.io refused to connect
  • Firefox: website will not allow Firefox to display the page reference

Explanation: Holistics has a CSP (Content Security Policy) rule that only allows embedding Holistics dashboards in HTTPS websites. This is to ensure your data security.

Solution: Run your localhost site with HTTPS.
We at Holistics understand that this is a bit of a hassle, so we are working on a better solution to improve your developer experience.

InvalidAuthenticityToken error

Sometimes you'll receive this error: ActionController::InvalidAuthenticityToken

There are 2 reasons

  • Make sure your site has https
  • Enable 3rd-party cookies in your browsers

Access denied for localStorage

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document

If you have an issue showing the embed, please check browser's console log for the error:

  1. Please open Chrome settings, type "third" in the search box, click the Content Settings button and view the fourth item under Cookies.
  2. Make sure that the option Block third-party cookies and site data is unchecked.

If this setting is checked, third-party scripts cookies are disallowed and access to localStorage may result in thrown SecurityError exceptions.

I saw a blank page when try to use the embedded frame at my local PC

Due to our security policy, using HTTPS is enforced to prevent token leakage that might lead to your data leakage. It could be the case that your local environment doesn't set up HTTPS.

To solve this problem, please embed the iframe inside a webpage that is served with HTTPS.

Would the embedded dashboards be mobile-friendly (responsive) when viewed outside of Holistics?

Yes. You can view our release note here: New Feature: Mobile Responsive View

I received an error: "To protect your security, us.holistics.io will not allow Firefox Developer Edition to display the page if another site has embedded it. To see this page, you need to open it in a new window."

Currently, Holistics Embedded Analytics can only be embedded within HTTPS sites to ensure your data security. Therefore, please prepend your address with https:// or open the embedded dashboard in a new window.

Why can't I copy values from my embedded dashboard?

This is the default behavior of Holistics, but you can easily configure the embedding code to allow users to copy from your embedded dashboard.

Since Holistics needs to render the dashboards in your websites, there are some default rules applied to prevent Holistics from taking controls of your websites, and "copying" is one of the rules. These rules are implicitly specified by Web Standards to make the web safer.

To enable copying, you need to add allow="clipboard-read" to the embedded HTML code of the embedded iframe. Considering the example here, the HTML iframe with copying enabled should look like this:

<iframe
src="https://secure.holistics.io/embed/<%= embed_code %>?_token=<%= token %>"
style="width: 100%; height: 600px;"
allow="clipboard-read"
frameborder="0"
allowfullscreen
>
</iframe>

Let us know what you think about this document :)