如何限制iframe源页面仅在AMP页面中使用？两种方案可行性探讨

嘿，这个问题问得很实用！我来帮你拆解下这两个方案的可行性，以及最优的解决思路：

方案一：X-Frame-Options #

这个方案的思路没问题，但存在致命的兼容性缺陷：其中的ALLOW-FROM指令在绝大多数现代移动浏览器中已经不被支持了，主流浏览器早已废弃了这个选项。如果你的用户群体主要来自移动端，这个方案根本没法达到预期的限制效果，所以不推荐使用。

方案二：CSP的frame-ancestors #

这绝对是更优的选择！frame-ancestors是内容安全策略（CSP）中专门用来限制哪些页面可以嵌入当前资源的指令，它的浏览器支持度比X-Frame-Options的ALLOW-FROM好太多，几乎覆盖了所有现代移动端和桌面端浏览器。

针对你的AMP场景，你只需要在iframe对应的目标页面的HTTP响应头中设置类似这样的规则：

Content-Security-Policy: frame-ancestors 'self' https://你的域名.com https://*.ampproject.org;

这里的'self'允许同源页面嵌入，https://你的域名.com指定你自己的域名，https://*.ampproject.org覆盖AMP官方的缓存域名，这样就能确保你的页面只能被自己的域名以及AMP官方页面嵌入了。

总结 #

直接放弃方案一，采用方案二的CSP frame-ancestors是最可靠的实现方式，既能满足你的需求，又能保证广泛的浏览器兼容性。

内容的提问来源于stack exchange，提问作者M.Shetty