如何阻止他人将我的Web App嵌入移动应用？

1. 检测并阻止WebView嵌入 #

移动应用通常使用WebView而非普通iframe加载网页，因此常规的iframe阻止策略无效。可以通过环境特征检测来识别WebView并限制访问：

• 检查User-Agent标识：WebView的User-Agent会带有专属特征，比如Android端包含WebView，iOS端包含UIWebView或WKWebView。可通过前端JS或后端逻辑判断：
  前端示例代码：

  const userAgent = navigator.userAgent.toLowerCase();
  const isUnauthorizedWebView = /webview|uiwebview|wkwebview/.test(userAgent) && 
                               !userAgent.includes('chrome') && 
                               !userAgent.includes('safari');
  if (isUnauthorizedWebView) {
      document.body.innerHTML = '<div style="text-align:center; margin-top:50px;"><h1>禁止在第三方应用内打开</h1></div>';
      // 或直接跳转至提示页
      // window.location.href = '/access-denied';
  }
  

  后端可在请求处理时校验User-Agent，不符合则返回403 Forbidden或提示页面。

• 检测浏览器专属API：普通浏览器会提供WebView没有的全局对象，比如Chrome的window.chrome、Safari的window.safari。通过这些对象判断环境：

  const isLegitimateBrowser = window.chrome || (window.safari && navigator.userAgent.includes('Safari'));
  if (!isLegitimateBrowser) {
      // 判定为非信任环境，执行限制逻辑
      document.body.style.display = 'none';
      alert('该应用仅支持在官方浏览器中打开');
  }
  

2. 强化HTTP安全响应头 #

尽管iframe限制对WebView无效，仍需配置以下头来覆盖所有嵌入场景：

• X-Frame-Options：设置为DENY禁止所有iframe嵌入，或SAMEORIGIN仅允许同源嵌入。以Nginx为例：

  add_header X-Frame-Options "DENY";
  

• Content-Security-Policy (CSP)：通过frame-ancestors指令严格控制嵌入来源，示例：

  add_header Content-Security-Policy "frame-ancestors 'none';";
  

  该指令会阻止所有iframe、WebView等方式的嵌入（部分旧版本WebView可能不支持，但能覆盖大部分场景）。

3. 同源与请求验证 #

• 校验Referer头：后端检查请求的Referer字段，仅允许来自自身域名或可信来源的请求。注意：Referer可能被篡改或缺失，仅作为辅助验证手段。
• 自定义令牌验证：在前端页面加载时，生成或读取本地存储的专属令牌（如localStorage中的验证串），后续接口请求携带该令牌，后端校验令牌有效性。非法WebView环境通常无法获取合法令牌，以此拦截请求。

4. 动态内容保护 #

• 延迟加载核心内容：页面初始仅加载基础框架，完成环境验证后再渲染核心业务内容。
• 定期环境检测：设置定时器，每隔一段时间重新校验环境，若检测到非法WebView，立即替换页面内容或跳转至提示页。

内容的提问来源于stack exchange，提问作者Agbeniga Ambali