Filepicker.io Cross-Domain Restrictions [Rails4 + Turbolinks]

Question

I'm having issues with Filepicker.io on my Rails 4 site. Specifically, I am occasionally getting the following JavaScript error message (about 50% of the time) when I try to upload a file via the Filepicker.io widget.

Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "https://salesbeach.com". Protocols, domains, and ports must match.

This happens in both Chrome and Firefox. My assumption is that Filepicker.io should be, but is not, returning the Access-Control-Allow-Origin: * header. However, I have used Filepicker.io on other sites without this issue, and I wonder if Turbolinks could be the culprit.

Diagnostic Information

My JavaScript call is:

filepicker.pickAndStore({mimetypes: mimeTypes},{},function(fpfiles) { ... }

and I load the Filepicker library (in the HTML <head>) via:

(function() {
  $(document).ready(function() {
    $.getScript('//api.filepicker.io/v1/filepicker.js', function() {
      filepicker.setKey('#{MY_API_KEY}');
    });
  })
})();

The <iframe> has the following HTTP request/response (from Chrome debug tools):

Request

Request URL:https://www.filepicker.io/dialog/comm_iframe/
Request Method:GET
Status Code:200 OK
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:www.filepicker.io
Pragma:no-cache
Referer:https://salesbeach.com/playground
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1566.2 Safari/537.36

Response

Response Headers
Connection:keep-alive
Content-Encoding:gzip
Content-Length:857
Content-Type:text/html; charset=utf-8
Date:Fri, 19 Jul 2013 19:23:22 GMT
P3P:CP='IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT'
P3P:CP="OTI DSP COR ADM DEV TAIo PSA PSD IVAi IVDi CONi HIS OUR IND CNT COM INT NAV"
Server:nginx
Vary:Accept-Encoding

Also, I have included a playground that reproduced the bug: Playground Environment

Maybe my answer http://stackoverflow.com/a/18142900 helps? (http://stackoverflow.com/questions/17762697/how-to-get-filepicker-and-turbolinks-to-play-well-together) — stevo, Aug 09 '13 at 08:43

score 2 · Answer 1 · edited May 23 '17 at 12:14

Slightly modified from: filepicker.io Javascript API calls result in unsafe javascript errors

This is a known chrome/webkit issue. This is happening on any cross domain iframe that adds a flash tag to itself through JavaScript (technique used by Ink File Picker). It shouldn't affect functionality and is a result of them trying to use flash detection to see if the webcam picture and video recording options are possible.

Filepicker.io Cross-Domain Restrictions [Rails4 + Turbolinks]

Diagnostic Information

1 Answers1