【KO】前端面试三

84. 单点登录是什么，具体流程是什么【腾讯一面】

• 单点登录（SSO，Single Sign - On）概念：
  • 在多个相互信任的应用系统中，用户只需登录一次，即可访问所有信任的应用系统，无需重复登录。比如企业内部有办公系统、人事系统、财务系统等，通过 SSO ，员工登录一次就能访问这些系统。
• 具体流程（以常见的基于令牌的 SSO 为例）：

1. 用户访问应用系统：用户首次访问某个应用系统（如系统 A ），系统 A 发现用户未登录，将用户重定向到 SSO 认证中心，并带上自身的回调地址（如 https://sso.com?redirect_uri=https://appA.com/callback ）。
2. SSO 认证中心认证：
   • 若用户未在 SSO 认证中心登录，展示登录页面，用户输入用户名和密码进行登录。
   • 若用户已在 SSO 认证中心登录（可能是之前访问过其他信任应用 ），则直接进入下一步。
3. 发放令牌：SSO 认证中心生成一个令牌（如 JWT ，包含用户身份信息、有效期等 ），将令牌通过重定向的方式带回给应用系统 A（或者通过 cookie 、localStorage 等方式传递，不同实现有差异 ），同时记录该令牌已发放。
4. 应用系统校验令牌：应用系统 A 拿到令牌后，向 SSO 认证中心发送请求，校验令牌的合法性（如检查签名、有效期 ）。校验通过后，认为用户已登录，为用户建立会话，用户可正常访问应用系统 A 的资源。
5. 访问其他应用系统：当用户访问另一个信任的应用系统 B 时，应用系统 B 发现用户未登录，同样重定向到 SSO 认证中心。SSO 认证中心发现用户已有有效令牌，直接将令牌传递给应用系统 B ，应用系统 B 校验令牌后，为用户建立会话，用户无需再次输入密码即可访问应用系统 B 。

85. web 网页如何禁止别人移除水印【百度一面】

• 前端层面（增加移除难度，但无法完全阻止，需配合后端等手段）：
  1. 动态生成水印：
     • 使用 canvas 生成水印，将水印绘制到页面的 canvas 或 div（通过 background - image 等方式 ）中，并且定时检查水印是否存在。如果检测到水印被移除，重新生成水印。例如：

function createWatermark() {const watermark = document.createElement('div');watermark.style.position = 'fixed';watermark.style.top = '50%';watermark.style.left = '50%';watermark.style.pointerEvents = 'none';watermark.style.opacity = '0.2';watermark.innerHTML = '水印内容';document.body.appendChild(watermark);setInterval(() => {if (!document.body.contains(watermark)) {createWatermark();}}, 1000);
}
createWatermark();

2. 利用 MutationObserver：监听 DOM 变化，当检测到水印元素被删除或修改时，立即恢复水印。例如：

const targetNode = document.body;
const config = { childList: true, subtree: true };
const callback = function (mutationsList) {for (const mutation of mutationsList) {if (mutation.type === 'childList') {// 检查水印是否被移除，若移除则重新添加const watermark = document.querySelector('[data - watermark]');if (!watermark) {createWatermark(); }