Question

我正在开发可添加到多个网站的iframe小部件。我正在使用以下必需的CSP标头提供小部件的html

let widget = (req, res, next) => {
   if(!req.headers.referer){
      return res.status(404).send(); //file is meant to be loaded as iframe only
   }
   let ancestor = Url.parse(req.headers.referer);
   ancestor = ancestor.protocol+"//"+ancestor.host+(ancestor.port?":"+ancestor.port:"") + "/";
   res.set("X-Frame-Options", "ALLOW-FROM " + ancestor );
   res.set("Content-Security-Policy", "frame-ancestors "+ancestor);
   res.sendFile(__dirname + "/widget.html");
};

当我加载两个拥有相同iframe的不同网站时，第二个打开的网站显示CSP错误

Refused to display 'https://my.website.com/widget' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors <first_loaded_website>".

第二个加载的网站的帧祖先CSP标头被浏览器解释为第一个网站。但是我已经检查了开发工具的“网络”选项卡。在两个网站上都收到了正确的标头，

X-Frame-Options: ALLOW-FROM https://<requesting_website>/

这真是令人困惑。我究竟做错了什么？我已经在Chrome和Firefox上对此进行了测试

在两个单独的网站上加载时，iframe小部件抛出CSP错误

0 个答案: