personalization dedicated to the particular surface

shandilya3 commented 10 months ago

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

[X] I have signed the Adobe Open Source CLA.
[X] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[X] I have read the CONTRIBUTING document.
[X] I have added tests to cover my changes.
[ ] All new and existing tests passed.

shandilya3 commented 10 months ago

As we discussed yesterday, rather than filter out the irrelevant propositions ( which totally works), i'd like this sample to change so that the response JSON object is correctly serialized. The ruleset items should not impact the hybrid sample (i don't think). This sample needs to illustrate how to correctly serialize an edge response and provide it to alloy using applyResponse. The problem is that response does not seeem to be properly serialized/escaped when putting it into the HTML.

One other addition to make as part of this PR is to set the data property to include the in-app-response-format. This will tell XAS to use the new response format. Which very well may resolve this issue altogether 🤞 .

Set data on the event to...
{
  "__adobe": {
    "ajo": {
      "in-app-response-format": 2
    }
  }
}

{
  "__adobe": {
    "ajo": {
      "in-app-response-format": 2
    }
  }
}

Above code snippet addition didn't help, had to sanitize the html data. DOMPurify takes string full of dirty HTML and it returns a string with clean HTML.

jasonwaters commented 10 months ago

@shandilya3

please remove jsdom and dompurify. We don't need to rely on these third party libs for this.

The work required for this is to get crystal clear on what characters are not being properly escaped. I decided to do a little more due diligence while writing up this comment. here is what i learned.

There are four things that must be done when embedding html within a JSON object ( see here to read more about it).

the thing we are not doing from that article is: Escape the forward slash in HTML end tags.

this 👇

<div>Hello World!</div><script></script>

should be 👇

<div>Hello World!<\/div><script><\/script>

when properly escaped like this the JSON strings are parsed properly by browsers.

So, in server.js where the applyResponseParam is set to JSON.stringify({...}) you can pass that string into a new function to escape it using something like stringvalue.replace(/\//g, "\\/").

I also noticed that the in-app response looked the same regardless of setting in-app-response-format or not. After chatting with William le, i learned that implementationDetails must be set. In other words, so long as implementationDetails is set to something, in-app-response-format defaults to 2. so it does not need to be set. So, you can remove where you set in-app-response-format to 2 and instead set implementationDetails to something like this:

      implementationDetails: {
        name: "server-side",
      },

Finally, although we can (and should) solve the escaping of forward slashes in this sample repo, I think you also need to find out why the forward slash was not escaped in the first place and ensure it gets escaped properly server side. Maybe it's in XAS?

shandilya3 commented 9 months ago

sample is working as expected.

adobe / alloy-samples