kontent-ai / smart-link

Kontent.ai Smart Link SDK can be used to automatically inject smart links to Kontent.ai according to manually specified HTML data attributes on your website. It also lets you connect your website with Web Spotlight (for faster editing and preview of your content).
MIT License
9 stars 4 forks source link

SDK Does not support multiple delivery URLs #83

Open mattnield opened 2 years ago

mattnield commented 2 years ago

Brief bug description

What went wrong? When developing an application with multiple URLs endpoints for the web, we need the ability to use SmartLink on different domains. In my scenario, I'm using an Azure Function to determine which URL should be used to preview content based primarily on the collection that the content belongs to. This performs a 302 redirect to the correct URL.

The issue then arises that Smark Link forces the origin and the preview URL to match. If they do not, an error is raised and the SmartLink SDK will not render. This is not compatible with the omnichannel narrative and ties Kontent to only being capable of supporting a single web application.

Repro steps

  1. Set a preview URL for a content type to link to an Azure Function (or another API endpoint) that will redirect to another domain containing the application.
  2. Configure preview mode and SmartLink in the target web application
  3. View page in web spotlight
  4. View error in console - SmartLink does not render.

Expected behavior

SmartLink should open regardless of the different origin.

Test environment

Additional context

Other use cases here/scenarios are being able to provide a customer support portal, consumer-facing and B2B web application from the same project in Kontent.

If the concern/reason for this restriction is related to security, I'd rather make a 'secret' available in my applications that can be validated that the current implementation or the ability to add preview URL aliases. Simply preventing it (and also not documenting that limitation as far as I can see) is making working with Web Spotlight less of a delight than it could/should be :)

Screenshots

Add links to screenshots, if possible. image

My preview URL for the above image looks like this: https://gr-schedule.azurewebsites.net/api/gr-preview-url?secret=1234&cn={Codename}&col={Collection}&l={Lang}&url={URLSlug}

vladbulyukhin commented 2 years ago

Hi Matt, thanks for reporting an issue :)

This error message is, in fact, not related to the implementation of the Smart Link SDK. For security reasons, Kontent checks the origin of all incoming iframe messages and compares it with the provided preview URLs. Web Spotlight is not the only place where we use that check, for example, the origin of custom element messages is checked too.

A possible workaround to this approach would be to initialize the SDK in another iframe on your website, where the website itself would act as a middleware for exchanging messages between Kontent and the SDK iframe. This is further described in a separate issue in the SDK's repository: https://github.com/Kentico/kontent-smart-link/issues/16

We will try to find a solution to your problem (and we will consider adding some kind of secret to communication).

melbourne2991 commented 2 years ago

Hi @vladbulyukhin the issue we are experiencing is almost identical to what Matt posted.

I was looking to get a bit more clarity on what the workaround implementation might look like. In terms of your proposed solution, would I be correct in that the content of the "proxy" iframe would need to be hosted on the same domain as the original preview url?

vladbulyukhin commented 2 years ago

Hi @melbourne2991

The important thing is for the URL of the first iframe to match the preview URL set in the project settings in Kontent. The content of the internal iframe can then be hosted on a different domain.

nested-iframe drawio

melbourne2991 commented 2 years ago

Understood, thanks @vladbulyukhin