MWPW-165767 Apply ContentSquare data masking attribute to BACOM Accou…

…nt Menu fields (#3494) * Added data-cs-mask on elements that contain sensitive information * Added data-cs-mask to the the outermost feds-profile element
adobecom · Jan 23, 2025 · ae939e3 · ae939e3
1 parent 20c69b3
commit ae939e3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/libs/blocks/global-navigation/features/profile/dropdown.js b/libs/blocks/global-navigation/features/profile/dropdown.js
@@ -102,6 +102,7 @@ class ProfileDropdown {
     // the email had some special logic as well;
     // for MVP, we took a simpler approach ("Some very long name, very l...")
     this.avatarElem = toFragment`<img
+      data-cs-mask
       class="feds-profile-img"
       src="${this.avatar}"
       tabindex="0"
@@ -117,8 +118,8 @@ class ProfileDropdown {
         >
           ${this.avatarElem}
           <div class="feds-profile-details">
-            <p class="feds-profile-name">${this.profileData.displayName}</p>
-            <p class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
+            <p data-cs-mask class="feds-profile-name">${this.profileData.displayName}</p>
+            <p data-cs-mask class="feds-profile-email">${this.decorateEmail(this.profileData.email)}</p>
             <p class="feds-profile-account">${this.placeholders.viewAccount}</p>
           </div>
         </a>

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -218,14 +218,15 @@ const decorateProfileTrigger = async ({ avatar }) => {
 
   const buttonElem = toFragment`
     <button
+      data-cs-mask
       class="feds-profile-button"
       aria-expanded="false"
       aria-controls="feds-profile-menu"
       aria-label="${label}"
       daa-ll="Account"
       aria-haspopup="true"
     >
-      <img class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
+      <img data-cs-mask class="feds-profile-img" src="${avatar}" alt="${profileAvatar}"></img>
     </button>
   `;
 
@@ -301,7 +302,7 @@ class Gnav {
     this.blocks = {
       profile: {
         rawElem: this.content.querySelector('.profile'),
-        decoratedElem: toFragment`<div class="feds-profile"></div>`,
+        decoratedElem: toFragment`<div data-cs-mask class="feds-profile"></div>`,
       },
       search: { config: { icon: CONFIG.icons.search } },
       breadcrumbs: { wrapper: '' },