Narrow vendors disclosed to only the vendors we show in the UI

CHANGELOG.md

@@ -34,6 +34,7 @@ The types of changes are:
 - Added our CMP ID [#4233](https://github.com/ethyca/fides/pull/4233)
 - Allow Admin UI users to turn on Configure Consent flag [#4246](https://github.com/ethyca/fides/pull/4246)
 - Styling improvements for the fides.js consent banners and modals [#4222](https://github.com/ethyca/fides/pull/4222)
+- Vendors disclosed string is now narrowed to only the vendors shown in the UI, not the whole GVL [#4250](https://github.com/ethyca/fides/pull/4250)
 
 ### Fixed
 - TCF overlay can initialize its consent preferences from a cookie [#4124](https://github.com/ethyca/fides/pull/4124)

clients/fides-js/src/lib/tcf.ts

@@ -39,17 +39,22 @@ export const generateTcString = async ({
     tcModel.cmpVersion = CMP_VERSION;
     tcModel.consentScreen = 1; // todo- On which 'screen' consent was captured; this is a CMP proprietary number encoded into the TC string
 
+    // Narrow the GVL to say we've only showed these vendors provided by our experience
+    const vendorIds = [
+      ...(experience.tcf_vendor_consents?.map((v) => +v.id) || []),
+      ...(experience.tcf_vendor_legitimate_interests?.map((v) => +v.id) || []),
+    ];
+    tcModel.gvl.narrowVendorsTo(vendorIds);
+
     if (tcStringPreferences) {
-      if (
-        tcStringPreferences.vendorsConsent &&
-        tcStringPreferences.vendorsConsent.length > 0
-      ) {
-        tcStringPreferences.vendorsConsent.forEach((vendorId) => {
-          if (vendorIsGvl({ id: vendorId }, experience.gvl)) {
-            tcModel.vendorConsents.set(+vendorId);
-          }
-        });
-        tcStringPreferences.vendorsLegint.forEach((vendorId) => {
+      // Set vendors on tcModel
+      tcStringPreferences.vendorsConsent.forEach((vendorId) => {
+        if (vendorIsGvl({ id: vendorId }, experience.gvl)) {
+          tcModel.vendorConsents.set(+vendorId);
+        }
+      });
+      tcStringPreferences.vendorsLegint.forEach((vendorId) => {
+        if (vendorIsGvl({ id: vendorId }, experience.gvl)) {
           const thisVendor = experience.tcf_vendor_legitimate_interests?.filter(
             (v) => v.id === vendorId
           )[0];
@@ -70,39 +75,24 @@ export const generateTcString = async ({
               tcModel.vendorLegitimateInterests.set(+vendorId);
             }
           }
-        });
-      }
+        }
+      });
 
-      // Set purpose consent on tcModel
-      if (
-        tcStringPreferences.purposesConsent &&
-        tcStringPreferences.purposesConsent.length > 0
-      ) {
-        tcStringPreferences.purposesConsent.forEach((purposeId) => {
-          tcModel.purposeConsents.set(+purposeId);
-        });
-      }
-      if (
-        tcStringPreferences.purposesLegint &&
-        tcStringPreferences.purposesLegint.length > 0
-      ) {
-        tcStringPreferences.purposesLegint.forEach((purposeId) => {
-          const id = +purposeId;
-          if (!FORBIDDEN_LEGITIMATE_INTEREST_PURPOSE_IDS.includes(id)) {
-            tcModel.purposeLegitimateInterests.set(id);
-          }
-        });
-      }
+      // Set purposes on tcModel
+      tcStringPreferences.purposesConsent.forEach((purposeId) => {
+        tcModel.purposeConsents.set(+purposeId);
+      });
+      tcStringPreferences.purposesLegint.forEach((purposeId) => {
+        const id = +purposeId;
+        if (!FORBIDDEN_LEGITIMATE_INTEREST_PURPOSE_IDS.includes(id)) {
+          tcModel.purposeLegitimateInterests.set(id);
+        }
+      });
 
       // Set special feature opt-ins on tcModel
-      if (
-        tcStringPreferences.specialFeatures &&
-        tcStringPreferences.specialFeatures.length > 0
-      ) {
-        tcStringPreferences.specialFeatures.forEach((id) => {
-          tcModel.specialFeatureOptins.set(+id);
-        });
-      }
+      tcStringPreferences.specialFeatures.forEach((id) => {
+        tcModel.specialFeatureOptins.set(+id);
+      });
 
       // note that we cannot set consent for special purposes nor features because the IAB policy states
       // the user is not given choice by a CMP.

clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts

@@ -384,6 +384,7 @@ describe("Fides-js TCF", () => {
     });
 
     describe("saving preferences", () => {
+      const expectedVendorsDisclosed = "IABE";
       it("can opt in to all", () => {
         cy.getCookie(CONSENT_COOKIE_NAME).should("not.exist");
         cy.getByTestId("consent-modal").within(() => {
@@ -449,6 +450,11 @@ describe("Fides-js TCF", () => {
           )
             .property(`${SYSTEM_1.id}`)
             .is.eql(true);
+
+          // Confirm vendors_disclosed section
+          expect(
+            cookieKeyConsent.tc_string?.endsWith(`.${expectedVendorsDisclosed}`)
+          ).to.eql(true);
         });
       });
 
@@ -516,6 +522,10 @@ describe("Fides-js TCF", () => {
           )
             .property(`${SYSTEM_1.id}`)
             .is.eql(false);
+          // Confirm vendors_disclosed section
+          expect(
+            cookieKeyConsent.tc_string?.endsWith(`.${expectedVendorsDisclosed}`)
+          ).to.eql(true);
         });
       });
 
@@ -590,6 +600,10 @@ describe("Fides-js TCF", () => {
           expect(
             cookieKeyConsent.tcf_consent.system_consent_preferences
           ).to.eql({});
+          // Confirm vendors_disclosed section
+          expect(
+            cookieKeyConsent.tc_string?.endsWith(`.${expectedVendorsDisclosed}`)
+          ).to.eql(true);
         });
       });
     });