ike-weblca-html 2.2.20 → 2.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ike-weblca-html",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "description": "weblca-html-header&footer",
   "main": "dist/index.js",
   "engines": {
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "node scripts/dev-server.js",
     "build": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "node tests/run-tests.js",
     "prepublishOnly": "npm run build",
     "release:patch": "npm version patch --no-git-tag-version && npm publish",
     "release:minor": "npm version minor --no-git-tag-version && npm publish",

package/src/IkeWebHeader.js

@@ -2,6 +2,11 @@ import { css, html, LitElement } from 'lit-element'
 import { property } from 'lodash-es'
 import cookies from 'js-cookie'
 import { getResponseErrorMessage, REQUEST_ERROR_EVENT } from './js/requestError'
+import {
+  applyAuthStateToHeader,
+  connectIframeHeaderAuth,
+  navigateWithParentFallback,
+} from './js/HeaderAuthBridge'
 
 /**
  * IkeWebHeader - Web LCA 网站头部组件
@@ -543,6 +548,9 @@ export class IkeWebHeader extends LitElement {
 
   _requestErrorHandler = null
 
+  /** iframe 中与父页面同步登录展示状态的连接 */
+  _iframeAuthConnection = null
+
   /** 未读消息数量 */
   messageCount = 0
 
@@ -579,6 +587,12 @@ export class IkeWebHeader extends LitElement {
       }
     }
     window.addEventListener(REQUEST_ERROR_EVENT, this._requestErrorHandler)
+    this._iframeAuthConnection = connectIframeHeaderAuth({
+      windowObject: window,
+      onAuthState: (authState) => {
+        applyAuthStateToHeader(this, authState)
+      },
+    })
     this.fetchData()
     if (this.isLoggedIn) {
       this.fetchUserSummary()
@@ -595,6 +609,10 @@ export class IkeWebHeader extends LitElement {
     if (this._requestErrorHandler) {
       window.removeEventListener(REQUEST_ERROR_EVENT, this._requestErrorHandler)
     }
+    if (this._iframeAuthConnection) {
+      this._iframeAuthConnection.dispose()
+      this._iframeAuthConnection = null
+    }
     super.disconnectedCallback()
   }
 
@@ -1016,9 +1034,7 @@ export class IkeWebHeader extends LitElement {
 
   _goPersonalCenter(e) {
     if (e) e.stopPropagation()
-    window.location.href = this._replacePlatformDomain(
-      this._getPersonalCenterUrl()
-    )
+    this._navigate(this._replacePlatformDomain(this._getPersonalCenterUrl()))
   }
 
   _logout(e) {
@@ -1028,9 +1044,24 @@ export class IkeWebHeader extends LitElement {
       cookies.remove(key)
       cookies.remove(key, { path: '/' })
     })
+    if (
+      this._iframeAuthConnection &&
+      this._iframeAuthConnection.connected
+    ) {
+      this._iframeAuthConnection.logout()
+      return
+    }
     window.location.reload()
   }
 
+  _navigate(url) {
+    navigateWithParentFallback({
+      windowObject: window,
+      connection: this._iframeAuthConnection,
+      url,
+    })
+  }
+
   render() {
     return html` <div
         class="ike-web-header"
@@ -1469,8 +1500,7 @@ export class IkeWebHeader extends LitElement {
       to = loginUrl
     }
     to = this._replacePlatformDomain(to)
-    window.location.href = to
-    window.parent.postMessage({ type: 'navigate', url: to }, '*')
+    this._navigate(to)
   }
 
   _clickLang(e) {
@@ -1496,14 +1526,12 @@ export class IkeWebHeader extends LitElement {
   _handleLoginClick() {
     if (this.isLoggedIn) {
       // 如果已登录，跳转到首页
-      window.location.href = this._replacePlatformDomain(
-        this._getPersonalCenterUrl()
+      this._navigate(
+        this._replacePlatformDomain(this._getPersonalCenterUrl())
       )
     } else {
       // 如果未登录，跳转到登录页面
-      window.location.href = this._replacePlatformDomain(
-        this._getHeaderLoginUrl()
-      )
+      this._navigate(this._replacePlatformDomain(this._getHeaderLoginUrl()))
     }
   }
 }

package/src/index.js

@@ -1,5 +1,45 @@
-import './IkeWebHeader'
-import './IkeWebFooter'
-import './js/UserAgreement'
-
-export { UserAgreementModal } from './js/UserAgreement'
+import cookies from 'js-cookie'
+import './IkeWebHeader'
+import './IkeWebFooter'
+import './js/UserAgreement'
+import {
+  installParentAuthBridge,
+  readCookieAuthState,
+} from './js/HeaderAuthBridge'
+
+const bridgeInstalledKey = '__ikeWebHeaderAuthBridgeInstalled__'
+
+function clearCurrentSiteSession() {
+  const allCookies = cookies.get() || {}
+  Object.keys(allCookies).forEach((key) => {
+    cookies.remove(key)
+    cookies.remove(key, { path: '/' })
+  })
+
+  try {
+    window.localStorage.clear()
+    window.sessionStorage.clear()
+  } catch (error) {
+    console.error('Error clearing browser storage:', error)
+  }
+}
+
+if (
+  typeof window !== 'undefined' &&
+  window.parent === window &&
+  !window[bridgeInstalledKey]
+) {
+  window[bridgeInstalledKey] = installParentAuthBridge({
+    windowObject: window,
+    getAuthState: () => readCookieAuthState(cookies),
+    onNavigate: (url) => {
+      window.location.href = url
+    },
+    onLogout: () => {
+      clearCurrentSiteSession()
+      window.location.reload()
+    },
+  })
+}
+
+export { UserAgreementModal } from './js/UserAgreement'

package/src/js/HeaderAuthBridge.js

@@ -0,0 +1,374 @@
+export const AUTH_REQUEST = 'ike:header-auth-request'
+export const AUTH_RESPONSE = 'ike:header-auth-response'
+export const NAVIGATE_REQUEST = 'ike:header-navigate-request'
+export const LOGOUT_REQUEST = 'ike:header-logout-request'
+
+const productionDomainSuffixes = [
+  'weblca.net',
+  'efootprint.net',
+  'webcarbon.net',
+  'webgpm.net',
+]
+
+const developmentDomainSuffixes = [
+  'manager.com',
+  'efootprint.com',
+  'webcarbon.com',
+  'webgpm.com',
+]
+
+const userSummaryFields = [
+  'userName',
+  'username',
+  'realName',
+  'name',
+  'nickName',
+  'relationId',
+  'userId',
+  'id',
+  'userCode',
+  'profileImg',
+  'avatar',
+  'headImg',
+  'headUrl',
+  'photo',
+  'accountCount',
+  'groupCount',
+  'datasetCount',
+  'materialCount',
+]
+
+let requestSequence = 0
+
+function matchesDomain(hostname, suffix) {
+  return hostname === suffix || hostname.endsWith(`.${suffix}`)
+}
+
+export function isTrustedPlatformOrigin(origin) {
+  try {
+    const url = new URL(origin)
+    const hostname = url.hostname.toLowerCase()
+    const isLocalHostname =
+      hostname === 'localhost' ||
+      hostname === '127.0.0.1' ||
+      hostname === '::1' ||
+      hostname.startsWith('192.168.10.')
+
+    if (isLocalHostname) {
+      return url.protocol === 'http:' || url.protocol === 'https:'
+    }
+
+    if (
+      productionDomainSuffixes.some((suffix) =>
+        matchesDomain(hostname, suffix)
+      )
+    ) {
+      return url.protocol === 'https:'
+    }
+
+    return (
+      (url.protocol === 'http:' || url.protocol === 'https:') &&
+      developmentDomainSuffixes.some((suffix) =>
+        matchesDomain(hostname, suffix)
+      )
+    )
+  } catch (error) {
+    return false
+  }
+}
+
+export function sanitizeAuthState(authState) {
+  const source = authState && typeof authState === 'object' ? authState : {}
+  const summarySource =
+    source.userSummary && typeof source.userSummary === 'object'
+      ? source.userSummary
+      : {}
+  const userSummary = {}
+
+  userSummaryFields.forEach((field) => {
+    if (summarySource[field] !== undefined) {
+      userSummary[field] = summarySource[field]
+    }
+  })
+
+  return {
+    loggedIn: Boolean(source.loggedIn),
+    userSummary,
+    messageCount: Math.max(0, Number(source.messageCount) || 0),
+  }
+}
+
+export function readCookieAuthState(cookieStore) {
+  if (!cookieStore || typeof cookieStore.get !== 'function') {
+    return sanitizeAuthState({ loggedIn: false })
+  }
+
+  const token = cookieStore.get('token')
+  if (!token) return sanitizeAuthState({ loggedIn: false })
+
+  let userInfo = {}
+  try {
+    const rawUserInfo = cookieStore.get('userInfo')
+    userInfo = rawUserInfo ? JSON.parse(rawUserInfo) : {}
+  } catch (error) {
+    userInfo = {}
+  }
+
+  return sanitizeAuthState({
+    loggedIn: true,
+    userSummary: userInfo,
+    messageCount: userInfo.messageCount,
+  })
+}
+
+export function applyAuthStateToHeader(header, authState) {
+  if (!header) return
+  const state = sanitizeAuthState(authState)
+  const data = state.userSummary
+
+  header.isLoggedIn = state.loggedIn
+  header.userSummary = data
+  header.userName =
+    data.userName ||
+    data.username ||
+    data.realName ||
+    data.name ||
+    data.nickName ||
+    ''
+  header.userId =
+    data.relationId || data.userId || data.id || data.userCode || ''
+  header.userAvatar =
+    data.profileImg ||
+    data.avatar ||
+    data.headImg ||
+    data.headUrl ||
+    data.photo ||
+    ''
+  header.userStats = {
+    account: data.accountCount || 0,
+    group: data.groupCount || 0,
+    database: data.datasetCount || 0,
+    databank: data.materialCount || 0,
+  }
+  header.messageCount = state.messageCount
+
+  if (typeof header.requestUpdate === 'function') header.requestUpdate()
+}
+
+export function isTrustedPlatformUrl(url, baseOrigin) {
+  try {
+    const targetUrl = new URL(url, baseOrigin)
+    return isTrustedPlatformOrigin(targetUrl.origin)
+  } catch (error) {
+    return false
+  }
+}
+
+function createRequestId() {
+  requestSequence += 1
+  return `ike-header-auth-${Date.now()}-${requestSequence}`
+}
+
+function getParentOrigin(windowObject) {
+  try {
+    const ancestorOrigins = windowObject.location.ancestorOrigins
+    if (ancestorOrigins && ancestorOrigins.length > 0) {
+      return new URL(ancestorOrigins[0]).origin
+    }
+    const referrer = windowObject.document && windowObject.document.referrer
+    if (!referrer) return ''
+    return new URL(referrer).origin
+  } catch (error) {
+    return ''
+  }
+}
+
+function isUsableMessageOrigin(origin) {
+  try {
+    const url = new URL(origin)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch (error) {
+    return false
+  }
+}
+
+function getDirectIframe(windowObject, source) {
+  try {
+    const frames = windowObject.document.querySelectorAll('iframe')
+    return Array.from(frames).find((frame) => frame.contentWindow === source)
+  } catch (error) {
+    return undefined
+  }
+}
+
+function isDirectIframeMessage(windowObject, event) {
+  if (!isUsableMessageOrigin(event.origin)) return false
+  const frame = getDirectIframe(windowObject, event.source)
+  if (!frame || !frame.src) return false
+
+  try {
+    const frameOrigin = new URL(
+      frame.src,
+      windowObject.location.href || windowObject.location.origin
+    ).origin
+    return frameOrigin === event.origin
+  } catch (error) {
+    return false
+  }
+}
+
+export function installParentAuthBridge({
+  windowObject,
+  getAuthState,
+  onNavigate,
+  onLogout,
+}) {
+  if (
+    !windowObject ||
+    windowObject.parent !== windowObject ||
+    typeof getAuthState !== 'function'
+  ) {
+    return () => {}
+  }
+
+  const handleMessage = async (event) => {
+    const data = event && event.data
+    if (
+      !event ||
+      !event.source ||
+      typeof event.source.postMessage !== 'function' ||
+      !isDirectIframeMessage(windowObject, event) ||
+      !data
+    ) {
+      return
+    }
+
+    if (data.type === NAVIGATE_REQUEST) {
+      if (
+        typeof onNavigate === 'function' &&
+        typeof data.url === 'string' &&
+        isTrustedPlatformUrl(data.url, windowObject.location.origin)
+      ) {
+        onNavigate(data.url)
+      }
+      return
+    }
+
+    if (data.type === LOGOUT_REQUEST) {
+      if (typeof onLogout === 'function') onLogout()
+      return
+    }
+
+    if (data.type !== AUTH_REQUEST || typeof data.requestId !== 'string') {
+      return
+    }
+
+    let authState
+    try {
+      authState = await getAuthState()
+    } catch (error) {
+      authState = { loggedIn: false }
+    }
+
+    event.source.postMessage(
+      {
+        type: AUTH_RESPONSE,
+        requestId: data.requestId,
+        authState: sanitizeAuthState(authState),
+      },
+      event.origin
+    )
+  }
+
+  windowObject.addEventListener('message', handleMessage)
+  return () => windowObject.removeEventListener('message', handleMessage)
+}
+
+export function connectIframeHeaderAuth({ windowObject, onAuthState }) {
+  if (
+    !windowObject ||
+    windowObject.parent === windowObject ||
+    typeof onAuthState !== 'function'
+  ) {
+    return { connected: false, dispose() {} }
+  }
+
+  const parentOrigin = getParentOrigin(windowObject)
+  if (!isUsableMessageOrigin(parentOrigin)) {
+    return { connected: false, dispose() {} }
+  }
+
+  const requestId = createRequestId()
+  let connected = false
+  const handleMessage = (event) => {
+    const data = event && event.data
+    if (
+      !event ||
+      event.source !== windowObject.parent ||
+      event.origin !== parentOrigin ||
+      !data ||
+      data.type !== AUTH_RESPONSE ||
+      data.requestId !== requestId
+    ) {
+      return
+    }
+
+    connected = true
+    onAuthState(sanitizeAuthState(data.authState))
+  }
+
+  windowObject.addEventListener('message', handleMessage)
+  windowObject.parent.postMessage({ type: AUTH_REQUEST, requestId }, parentOrigin)
+
+  return {
+    get connected() {
+      return connected
+    },
+    parentOrigin,
+    navigate(url) {
+      if (!connected) return false
+      if (!isTrustedPlatformUrl(url, parentOrigin)) return false
+      windowObject.parent.postMessage(
+        { type: NAVIGATE_REQUEST, url },
+        parentOrigin
+      )
+      return true
+    },
+    logout() {
+      if (!connected) return false
+      windowObject.parent.postMessage({ type: LOGOUT_REQUEST }, parentOrigin)
+      return true
+    },
+    dispose() {
+      connected = false
+      windowObject.removeEventListener('message', handleMessage)
+    },
+  }
+}
+
+export function navigateWithParentFallback({
+  windowObject,
+  connection,
+  url,
+}) {
+  if (
+    connection &&
+    connection.connected &&
+    typeof connection.navigate === 'function' &&
+    connection.navigate(url)
+  ) {
+    return 'bridge'
+  }
+
+  windowObject.location.href = url
+  if (
+    windowObject.parent &&
+    windowObject.parent !== windowObject &&
+    typeof windowObject.parent.postMessage === 'function'
+  ) {
+    windowObject.parent.postMessage({ type: 'navigate', url }, '*')
+    return 'legacy'
+  }
+
+  return 'local'
+}