如何替换CSP frame-ancestors拒绝连接时的默认提示页？

由于frame-ancestors是浏览器层面的强制限制，一旦触发，浏览器会直接阻止页面加载，无法执行页面内的JavaScript代码，因此无法直接替换默认提示。要实现自定义提示，需要调整策略，结合JavaScript检测和CSP兜底：

方案一：JavaScript前置检测 + CSP兜底 #

1. 调整CSP指令：
   保留frame-ancestors的安全限制，同时允许内联脚本执行（确保检测代码能优先运行），配置如下：

   Content-Security-Policy: frame-ancestors 'self' https://example.com/; script-src 'self' 'unsafe-inline';
   

2. 插入前置检测代码：
   在HTML的<head>最顶部插入以下代码，保证页面加载时最先执行检测逻辑：

   <script>
     // 定义允许嵌入的域名列表
     const allowedDomains = ['example.com', 'mysite.com'];
     // 判断是否被嵌入到外部页面
     if (window.top !== window.self) {
       try {
         // 获取父页面的域名
         const parentDomain = new URL(window.top.location.href).hostname;
         // 校验域名是否在允许列表内
         if (!allowedDomains.includes(parentDomain)) {
           // 替换页面内容为自定义提示
           document.documentElement.innerHTML = `
             <div style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f5f5f5; font-family: sans-serif;">
               <h2>抱歉，本页面无法在此环境嵌入</h2>
               <p>请点击<a href="${window.location.href}" target="_blank" style="color: #2563eb;">这里</a>访问原页面查看内容</p>
             </div>
           `;
         }
       } catch (e) {
         // 跨域无法获取父页面域名时，直接判定为非法嵌入
         document.documentElement.innerHTML = `
           <div style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f5f5f5; font-family: sans-serif;">
             <h2>抱歉，本页面无法在此环境嵌入</h2>
             <p>请点击<a href="${window.location.href}" target="_blank" style="color: #2563eb;">这里</a>访问原页面查看内容</p>
           </div>
         `;
       }
     }
   </script>
   

3. 保留CSP兜底防护：
   仍保留frame-ancestors指令，当用户禁用JavaScript时，浏览器会直接阻止非法嵌入，虽然会显示默认提示，但保证了基础安全性。

方案二：使用中间检测跳转页 #

如果不想修改主页面的CSP规则，可以创建一个专门的嵌入检测页面（如embed-check.html）：

1. 中间页逻辑：
   在embed-check.html中加入与方案一相同的检测代码，检测到合法嵌入时跳转到真实页面；非法嵌入时显示自定义提示。
2. 指定嵌入路径：
   告知合作方嵌入https://mysite.com/embed-check.html而非真实页面。
3. 保护真实页面：
   真实页面的CSP保持frame-ancestors 'self' https://example.com/ https://mysite.com/;，确保只有中间页能嵌入真实页面。

注意事项 #

• 跨域场景下，JavaScript无法获取父页面域名（会触发跨域错误），此时直接判定为非法嵌入即可。
• 自定义提示的样式、文案可根据需求自由修改，比如添加品牌标识、联系信息等。

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