feat(experience): harden logto signature against css overrides (#7920)

Author: wangsijie

packages/experience/src/components/LogtoSignature/index.tsx

@@ -1,5 +1,5 @@
 import { Theme } from '@logto/schemas';
-import { useContext } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 import LogtoLogtoDark from '@/assets/icons/logto-logo-dark.svg?react';
@@ -13,6 +13,68 @@ const logtoUrl = `https://logto.io/?${new URLSearchParams({
   utm_medium: 'powered_by',
 }).toString()}`;
 
+const guardStyleSelector = 'style[data-logto-signature-guard="true"]';
+
+const signatureGuardStyle = `
+[data-logto-signature-container="secured"][data-logto-signature-container="secured"] {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"] {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  font: var(--font-label-2) !important;
+  font-weight: normal !important;
+  color: var(--color-neutral-variant-60) !important;
+  padding: 4px 8px !important;
+  text-decoration: none !important;
+  opacity: 75% !important;
+  direction: ltr !important;
+  position: relative !important;
+  inset: auto !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  pointer-events: auto !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"]:is(:hover, :active, :focus-visible) {
+  opacity: 100% !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"] [data-logto-signature-icon="static"] {
+  display: block !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"] [data-logto-signature-icon="highlight"] {
+  display: none !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"]:is(:hover, :active, :focus-visible)
+  [data-logto-signature-icon="static"] {
+  display: none !important;
+}
+
+[data-logto-signature="secured"][data-logto-signature="secured"]:is(:hover, :active, :focus-visible)
+  [data-logto-signature-icon="highlight"] {
+  display: block !important;
+}
+
+[data-logto-signature-text] {
+  margin-inline-end: 4px !important;
+}
+
+body.mobile [data-logto-signature="secured"][data-logto-signature="secured"] {
+  color: var(--color-neutral-variant-80) !important;
+  font: var(--font-label-3) !important;
+}
+`;
+
 type Props = {
   readonly className?: string;
 };
@@ -21,18 +83,107 @@ const LogtoSignature = ({ className }: Props) => {
   const { theme } = useContext(PageContext);
   const LogtoLogo = theme === Theme.Light ? LogtoLogoLight : LogtoLogtoDark;
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const anchorRef = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const { current: container } = containerRef;
+    const { current: anchor } = anchorRef;
+
+    if (!anchor) {
+      return;
+    }
+
+    const ensureGuardStyle = (): { created: boolean; element: HTMLStyleElement } => {
+      const existing = document.head.querySelector<HTMLStyleElement>(guardStyleSelector);
+
+      if (existing) {
+        return { created: false, element: existing };
+      }
+
+      const createdElement = document.createElement('style');
+      Reflect.set(createdElement.dataset, 'logtoSignatureGuard', 'true');
+      createdElement.append(signatureGuardStyle);
+      document.head.append(createdElement);
+
+      return { created: true, element: createdElement };
+    };
+
+    const { created, element: guardStyleElement } = ensureGuardStyle();
+
+    const enforceIntegrity = () => {
+      if (container) {
+        container.removeAttribute('hidden');
+        container.style.setProperty('display', 'block', 'important');
+        container.style.setProperty('visibility', 'visible', 'important');
+        container.style.setProperty('opacity', '1', 'important');
+        container.style.setProperty('position', 'static', 'important');
+      }
+
+      anchor.removeAttribute('hidden');
+
+      if (styles.signature && !anchor.classList.contains(styles.signature)) {
+        anchor.classList.add(styles.signature);
+      }
+
+      anchor.style.removeProperty('display');
+      anchor.style.removeProperty('visibility');
+      anchor.style.removeProperty('opacity');
+      anchor.style.removeProperty('position');
+      anchor.style.removeProperty('left');
+      anchor.style.removeProperty('right');
+      anchor.style.removeProperty('top');
+      anchor.style.removeProperty('bottom');
+      anchor.style.removeProperty('transform');
+    };
+
+    enforceIntegrity();
+
+    const observer = new MutationObserver(() => {
+      enforceIntegrity();
+    });
+
+    observer.observe(anchor, { attributes: true, attributeFilter: ['class', 'style', 'hidden'] });
+
+    if (container) {
+      observer.observe(container, {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'hidden'],
+      });
+    }
+
+    const intervalId = window.setInterval(enforceIntegrity, 2000);
+
+    return () => {
+      observer.disconnect();
+      window.clearInterval(intervalId);
+
+      if (created) {
+        guardStyleElement.remove();
+      }
+    };
+  }, [className]);
+
   return (
-    <div className={className}>
+    <div ref={containerRef} className={className} data-logto-signature-container="secured">
       <a
-        className={styles.signature}
+        ref={anchorRef}
         aria-label="Powered By Logto"
+        className={styles.signature}
+        data-logto-signature="secured"
         href={logtoUrl.toString()}
-        target="_blank"
         rel="noopener"
+        target="_blank"
       >
-        <span className={styles.text}>Powered by</span>
-        <LogtoLogoShadow className={styles.staticIcon} />
-        <LogtoLogo className={styles.highlightIcon} />
+        <span data-logto-signature-text className={styles.text}>
+          Powered by
+        </span>
+        <LogtoLogoShadow data-logto-signature-icon="static" className={styles.staticIcon} />
+        <LogtoLogo data-logto-signature-icon="highlight" className={styles.highlightIcon} />
       </a>
     </div>
   );