How to solve Malformed Origin error in Dropbox Javascript Chooser

Question

Dropbox Chooser Error: Malformed origin

I am porting an app from Objective C to Delphi 10.2. The app uses Dropbox to save and retrieve files. The iOS version uses the Dropbox SDK for iOS. I'm trying to use the Dropbox Javascript Chooser in the Delphi version. I'm using the FMX TWebBrowser. I have performed the windows registry edit described in Supporting JavaScript Integration on Windows Platform from the Delphi TWebBrowser doc page.

When I trigger the Javascript Chooser I get the followinwg error:

Uh oh! Seems like this widget is not configured properly. Malformed origin

Here is the Delphi code:

unit DropBox;

interface

uses
  System.SysUtils,
  System.Types,
  System.UITypes,
  System.Classes,
  System.Variants,
  FMX.Types,
  FMX.Controls,
  FMX.Forms,
  FMX.Graphics,
  FMX.Dialogs,
  FMX.StdCtrls,
  FMX.WebBrowser;

type
    TfrmDropBox = class(TForm)
        WebBrowser1: TWebBrowser;
        Button1: TButton;
        procedure FormCreate(Sender: TObject);
        procedure WebBrowser1DidFailLoadWithError(ASender: TObject);
        procedure Button1Click(Sender: TObject);
  end;

var
  frmDropBox: TfrmDropBox;

implementation

{$R *.fmx}

const
  PageHTML =
    '<!DOCTYPE html>' +
    '<html>' +
    '<head>' +
      '<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxx">' +
      '</script>' +
    '</head>' +
    '<body>' +
      '<br><br>' + 
    '<body>' +
    '</html>';

procedure TfrmDropBox.FormCreate(Sender: TObject);
begin
    WebBrowser1.LoadFromStrings(PageHTML, '/');
end;

procedure TfrmDropBox.Button1Click(Sender: TObject);
begin
    WebBrowser1.EvaluateJavaScript('Dropbox.choose({success: function(files){alert(files[0].link)}});');
end;

procedure TfrmDropBox.WebBrowser1DidFailLoadWithError(ASender: TObject);
begin
    ShowMessage('Load failed');
end;

end.

I think it's the same error as in this old SO post: here. I don't know if that solution applies to my case today.

The data-app-key is taken from my app's Dropbox registration and is the same key that the iOS app uses. The only oddity I can see is the URL displayed in the error window appears not to have a value for the link_type parameter.

Thanks in advance for any help in fixing this.

How to solve Malformed Origin error in Dropbox Javascript Chooser

0 Answers0