Fine Uploader - 没有从加载的 iframe 收到有效消息，仅限 IE9答案

【问题标题】：Fine Uploader - No valid message received from loaded iframe, IE9 onlyFine Uploader - 没有从加载的 iframe 收到有效消息，仅限 IE9
【发布时间】：2015-09-25 10:28:29
【问题描述】：

在尝试使用 IE9 和 FineUploader 4.2.2 上传时，在现有实现中遇到“没有从加载的 iframe 收到有效消息”错误，similar issues with IE8 与我的代码未正确设置 uuid 有关，已成功解决。

这些修复仍然存在； IE8 有效，您可以跟踪从帖子到响应的 UUID（如下所示），FineUploader 仍然适用于 IE8、IE11、Chrome 和 Firefox。没有 IE10 参考点。

可以在 IE9 v9.0.8112.16421 上复制该问题（来自Modern.ie 的股票 Win7 IE9 VM）

在手动选择文件后，F12 开发人员工具会捕获两个请求 - 图像被 POST 到我的处理程序，该处理程序返回一个成功响应，然后是“iframe.xss.response.js”的 GET，它成功了。

打开调试设置以防它提供更多洞察力，净化结果包括在下面 - 去除了一些内部变量，但未经编辑，标头是从 F12 开发人员工具粘贴的，因此可能看起来有点奇怪。

想象一下，我只是遗漏了一些简单的东西，但在以后的版本中修复了一个已知问题的可能性很小。

2010 年 2 月更新

针对 FineUploader v5.3.2 进行了测试，仍然遇到由“registerPostMessageCallback”记录的相同错误（第 5001 行，fine-uploader.js），在“corsMessageReceiver.receiveMessage”中放置了一个断点，但没有到达。

向“iframe.xss.response.js”添加了一些警报，并且 if (match) {...} 的测试失败，但 document.body.innerHTML 肯定有内容。

请求

Request POST /Upload HTTP/1.1
Accept  text/html, application/xhtml+xml, */*
Accept-Language en-GB
User-Agent  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Content-Type    multipart/form-data; boundary=---------------------------7df14d340118
Accept-Encoding gzip, deflate
Content-Length  781830
Connection  Keep-Alive
Cache-Control   no-cache

-----------------------------7df14d340118
Content-Disposition: form-data; name="qquuid"

5489a37c-1cde-4c32-9faa-f9c2532b9ba1
-----------------------------7df14d340118
Content-Disposition: form-data; name="qqfilename"

Koala.jpg
-----------------------------7df14d340118
Content-Disposition: form-data; name="qqfile"; filename="Koala.jpg"
Content-Type: image/jpeg

<Binary File Data Not Shown>
---------------------------7df14d340118--

回应

Response    HTTP/1.1 200 OK
Cache-Control   private
Content-Type    text/html; charset=utf-8
Server  Microsoft-IIS/7.5
Access-Control-Allow-Origin *
Access-Control-Allow-Methods    GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers    Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials    false
Date    Fri, 25 Sep 2015 10:16:03 GMT
Content-Length  268

{
  "pageList": [],
  "name": "Koala.jpg",
  "newUuid": "2930",
  "size": 762,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "uuid": "5489a37c-1cde-4c32-9faa-f9c2532b9ba1"
}<script src="/js/fineuploader-4.2.2/iframe.xss.response.js"></script>

控制台

LOG: [FineUploader 4.2.2] Detected valid file button click event on file 'Koala.jpg', ID: 0. 
LOG: [FineUploader 4.2.2] Retrying upload for 'Koala.jpg' (id: 0)... 
LOG: [FineUploader 4.2.2] Sending upload request for 0 
LOG: [FineUploader 4.2.2] Received iframe load event for CORS upload request (iframe name 0_2523c193-b1ad-4ff4-bf71-59608e848560) 
[FineUploader 4.2.2] No valid message received from loaded iframe for iframe name 0_2523c193-b1ad-4ff4-bf71-59608e848560 
LOG: [FineUploader 4.2.2] iframe loaded

【问题讨论】：

Fine Uploader 期望一条消息从包含服务器响应的 iframe 传递到包含 Fine Uploader 实例的浏览上下文。 iframe.xss.response.js 文件负责这一点。似乎没有发送该消息。我不知道 Fine Uploader 有任何问题，但您使用的是相当旧的版本。无论哪种方式，您都需要设置一些断点并找出为什么没有从 iframe.xss.response.js 传递消息。
谢谢。我假设这里的消息是脚本标记之前的 JSON？ “iframe.xss.response.js”是否需要托管在与原始请求相同的域中？
文件的托管位置无关紧要。
更新了我的原始帖子以反映当前版本的测试，但知道什么可能导致 iframe.xss.response 中的 `if (match) {...}` 测试.js 失败？
如果正则表达式无法匹配，则服务器返回的响应/页面的内容存在问题。如果您仔细查看正在检查的页面的确切内容，您可能会找到答案。

标签： javascript internet-explorer-9 fine-uploader

【解决方案1】：

已解决。问题是由于处理程序的 JSON 响应中的换行符和“iframe.xss.response.js”使用了不期望换行符的正则表达式。

这里有两种可能的解决方案；

避免在处理程序的 JSON 响应中包含换行符；如果不存在换行符，则正则表达式不会失败。
修改正则表达式，使模式可以匹配换行符。

在 iframe.xss.response.js 中搜索以下行；

var match = /(\{.*\})/.exec(document.body.innerHTML);

如果您不熟悉正则表达式，这将匹配大括号内的零个或多个字符块，但“字符”不包含换行符，因此如果您的 JSON 包含它们，则无法返回匹配项。

将行更新为如下所示可以正确运行捕获。

var match = /(\{(.|\r|\n)*\})/.exec(document.body.innerHTML);

此模式将匹配大括号内的零个或多个字符 + 换行符（cr 和 lf）块 - 使用 IE8 和 IE9 测试，没有任何明显问题。

【讨论】：