html2canvas无法截取iframe中的页面，截取为空白？

Question

html2canvas无法截取iframe中的页面，截取为空白

脚本访问iframe中的contentWindow，浏览器报Blocked a frame with origin "http://101.169.201.53:3000" from accessing a cross-origin frame,说明跨域了，但是后台说设置了iframe中的后端Access-Control-Allow-Origin:,Access-Control-Allow-Origin:只是针对接口嘛，设置了还是访问不了iframe中的资源

Answer 1

html2canvas 库确实在处理跨域 iframe 时会遇到问题，因为浏览器的同源策略（Same-Origin Policy）阻止了来自不同源的 iframe 内容的访问。即使你已经在 iframe 加载的页面的服务器端设置了 Access-Control-Allow-Origin: *，这仍然不足以让 html2canvas 或任何客户端脚本直接访问 iframe 的内容。

Access-Control-Allow-Origin 响应头是用来允许跨域 AJAX 请求的，但它不适用于 iframe 的内容脚本（即 iframe 内部的 JavaScript 代码）去访问其父页面的脚本，或者父页面的脚本去访问 iframe 的内容。

为了解决这个问题，你可以尝试以下几种方法：

1. 确保同源：
   如果可能的话，将 iframe 加载的页面与你的主页面设置到相同的源（即相同的协议、域名和端口）。
2. 代理页面：
   在你的服务器上创建一个代理页面，该页面加载 iframe 的内容，并将该页面嵌入到你的主页面中。这样，由于代理页面和你的主页面同源，你可以使用 html2canvas 截取代理页面的内容。
3. 服务器端渲染：
   如果 iframe 的内容是由你的服务器生成的，考虑在服务器端进行渲染，然后将渲染的结果发送到客户端，而不是使用 iframe。
4. PostMessage API：
   如果 iframe 的内容是由你控制的，并且你希望与父页面通信，你可以使用 window.postMessage API。这允许跨域窗口之间进行安全通信。但是，请注意，这不会直接解决 html2canvas 截取 iframe 内容的问题。
5. CORS 代理：
   如果你不能更改 iframe 的源，并且确实需要跨域访问其内容，你可以设置一个 CORS 代理。这通常涉及设置一个中间件服务器，该服务器从 iframe 的源获取内容，并添加适当的 CORS 响应头，然后将内容发送回客户端。但是，请注意，这种方法可能涉及法律和道德问题，特别是如果你正在尝试访问不属于你的内容。
6. 使用其他库或工具：
   有些库或工具可能提供了更高级别的跨域 iframe 内容捕获功能。但是，请注意，任何尝试绕过浏览器安全策略的方法都可能存在风险，并且可能不适用于所有情况。

总之，由于浏览器的同源策略，html2canvas 无法直接截取跨域 iframe 的内容。你需要考虑使用上述方法之一来绕过这个限制。