iframe src 加载失败

原创于 2019-09-11 17:31:32 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#frame-ancestors #iframe src 加载失败

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文解决了一个特定的网页安全问题，即当在http://aaa.com/index.html页面的iframe中尝试加载http://testing.avg.163.com/embedGamePlayer时，由于Content Security Policy(CSP)的frame-ancestors指令限制，导致加载失败。文章详细分析了问题原因，并提供了解决方案，通过在父级页面中添加meta标签，为frame-ancestors政策设置正确的来源。

问题描述

http://testing.avg.163.com/embedGamePlayer 网址在浏览器可以直接打开。
http://aaa.com/index.html 页面 iframe src 里面，无法加载: http://testing.avg.163.com/embedGamePlayer，并且控制台抛出如下错误：

Refused to display “http://testing.avg.163.com/embedGamePlayer” in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors “http://abc.com https://def.com”.

问题原因

http://testing.avg.163.com/embedGamePlayer 的 Response Headers 信息如下：

Content-Security-policy: frame-ancestors http://abc.com http://def.com

frame-ancestors 没有设置允许父级页面域名http://aaa.com，所以在iframe 中无法访问

解决办法

在父级页面加入，意思是为 frame-ancestors政策设置一个或多个来源：

<meta http-equiv="Content-Security-Policy" 
      content="frame-ancestors 'self' 
      https://aaa.com ">