Integrate a first third party feature with empreinte souffrance

[alexgarel]

We want to integrate an optional feature that will be brought to Open Food Facts users, in opt-in, and taken care by an external project: empreinte souffrance, that tries to bring an indicator about animal suffering, at first on eggs.

The idea is that Open Food Facts does not have to endorse the methodology but let this organization bring information to opt-in users.

This discussion is more to specify the technical solution.

They already build a service with an API that is able to return a knowledge panel for a given product.
The idea is to integrate this to Open Food Facts this way:

• an interface in the food preferences menu enables the user to choose to see "empreinte souffrance" informations (it is clearly marked as provided by a third party)
• if it is enabled, as we display a product page, a javascript web-component made to display knowledge
  panels fetches the knowledge panels on their server and integrate the information into the page.

The external services available would be listed thanks to a json file served by the website. It enables integrating more services in the future.

This is a first experimentation requiring not too much code. The mobile app might also implement this feature.

[alexgarel]

Here is what needs to be done:

On openfoodfacts-webcomponents:

• finish essential elements for the web-component displaying knowledge-panels, see feat: add CSS for knowledge panels openfoodfacts-webcomponents#152

On openfoodfacts-server:

• document the external-sources.json schema (using OpenAPI, see docs/api/ref), which would have following field:

  • source id
  • name + description + icon
  • url where to fetch knowledge panel
  • name of the source of the service
  • url of the website of the organization providing the service
  • section - in which section of the product page to display, might be a new section
  • filters (AND):
    • on a category list
    • on a country list
    • on a language list
  • privacy policy URL
  • scope of the panel: public / members / moderators

• create the first external-sources.json with info for empreinte souffrance

• create the Javascript & ui that enables choosing external services in food preferences (must be marked beta)

• create the javascript that:

  • interpret the preferences settings, the user profile and the filter on category / country / lang to decide if it should display the info
  • eventually add a panel to display the info
  • insert the knowledge panels web component with right parameters to display the info

[alexgarel]

Additional guidelines:

• repository: https://github.com/openfoodfacts/openfoodfacts-server/

• setup: https://openfoodfacts.github.io/openfoodfacts-server/dev/

• JS goes in html/js

• preference panels JS is: html/js/product-preferences.js
  inject in https://github.com/openfoodfacts/openfoodfacts-server/blob/main/templates/web/pages/product/product_page.tt.html

• Maybe we will have to add some product information as JS dict.

• Template written with: https://metacpan.org/dist/Template-Toolkit/view/lib/Template/Manual.pod

• external-sources.json could be in html/resources/files

• talk in #productopener on Slack

[VaiTon]

If we want to allow others to publish KPs we should really ponder about any HTML being included in them, because that's a fairly easy way to conduct an XSS attack

[alexgarel]

@VaiTon right, I forgot to mention that to @IWouldShiverTheWholeNightThrough, we should sanitize the HTML of webcomponents in the webcomponents panels. And Lit as good support for that.

I filed an issue: openfoodfacts/openfoodfacts-webcomponents#257