Very badly rendered page when hosted on MyDrive

[Former user]

Hi Nam,

I've set up exactly as you wrote here: http://techualization.blogspot.de/2013/09/introducing-browsepass-keepass-on-web.html

Then I connected mydrive.ch as a disk Z in my Windows 7. All works fine. Then I copied Browserpass files and my admin.kdb (made by KeePass 1.21) to the disk Z. Look: http://take.ms/lUrjP

After that I open https://webdav.mydrive.ch/index.html. All works fine. Then I put "admin.kdb" in the URL filed and my password to this .kdb in the password field.

And Browserpass says: Invalid version. Look: http://take.ms/xI9Ms If I open z:\admin.kdb with local KeePass 1.21, all works fine. This means that KeePass "understands" .kdb file via WebDAV.

May be Browserpass doesn't support old KeePass databases?

How to fix that? Thanks!

[mnv]

Nam,

I found what causes this error. Browsepass is incomatible with 1.x format :). So I've downloaded the latest KeePass and transfered my DB there. Now Browserpass can read my .kdbx file.

But! :)

Look, how it shows my items. This is awful: http://take.ms/51H8k It looks the same in every browser I tryed: Chrome, Opera, IE.

How to fix that? Thanks!

[Nam Nguyen]

That's indeed awful!

The problem might have been due to missing CSS files.

If you use Chrome, open its Developer Tools and browse to BrowsePass again. There will be a bunch of red lines, or 404, or some weird errors in the console log.

Please let me know what exact errors are shown there.

Thanks!

[mnv]

Here they are:

Failed to load resource: the server responded with a status of 404 (Not Found) https://webdav.mydrive.ch/%7B%7BgetDataUrl()%7D%7D Failed to load resource: the server responded with a status of 404 (Not Found) angular.min.js.map:1 GET https://webdav.mydrive.ch/angularjs/1.2.21/angular.min.js.map 404 (Not Found)

I redownloaded the latest version of BrowsePass, and there is no .map file in the 1.2.21 folder: http://take.ms/jO19y

I think this is not good :).

[Nam Nguyen]

.map files are not necessary unless you are debugging the app.

Are those the only errors you've got?

[mnv]

Yes. I've recorder a short video on this, look: https://www.youtube.com/watch?v=nJm9_zZPJfQ

[Nam Nguyen]

Let me guess: you open the page first, then open the Developer Tools?

Please reload the page (still with the Developer Tools open), you might see some other errors.

[mnv]

Yes, exactly. But there is no additional errors when I followed your instructions.

Here is the video: http://youtu.be/wZ_OkXLEeJE

salsa20.js:291 done index.html:43 GET https://webdav.mydrive.ch/angularjs/1.2.21/angular.min.js.map 404 (Not Found) favicon.ico:1 GET https://webdav.mydrive.ch/favicon.ico 404 (Not Found) %7B%7BgetDataUrl()%7D%7D:1 GET https://webdav.mydrive.ch/%7B%7BgetDataUrl()%7D%7D 404 (Not Found)

By the way. What is that: https://webdav.mydrive.ch/%7B%7BgetDataUrl()%7D%7D ?

May be, this is the cause?

[Nam Nguyen]

@mnvbox thanks for the patience.

To be honest, now I do not know what could cause such horrible rendering. I had thought that some resources were missing but apparently that was not the case for you. The .map and .ico files are not important. Neither is the problem with "getDataUrl".

To confirm the issue, I have just tried setting up BrowsePass on MyDrive again and there were some additional errors that I found::

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://webdav.mydrive.ch/browsepass/bootstrap/3.2.0/css/bootstrap.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://webdav.mydrive.ch/browsepass/bootstrap/3.2.0/css/bootstrap-theme.min.css".

I tried on Firefox too, with same problem::

The stylesheet https://webdav.mydrive.ch/browsepass/bootstrap/3.2.0/css/bootstrap-theme.min.css was not loaded because its MIME type, "text/plain", is not "text/css".
The stylesheet https://webdav.mydrive.ch/browsepass/bootstrap/3.2.0/css/bootstrap.min.css was not loaded because its MIME type, "text/plain", is not "text/css".

In conclusion, there is nothing I could do now. This is an issue at the hosting provider side. I will update my blog post to point readers to this issue. Thanks so much for reporting the problem and being patience with me.

But all is not lost. You could easily host BrowsePass on Google Drive. I have had good success. The steps to do that is:

1. Unpack BrowsePass ZIP file to a folder in Google Drive.
2. Right click on that folder, select "Share...".

3. Copy the share URL. For example, it could have this form::

   https://drive.google.com/folderview?id=0B87sRTiHhVvQfms4ZENZcGJJRktDSU1HaEMxcBxrcoNwYsMeLVVsWVhtQ3VmQUlZd2VMZ1k&usp=sharing

4. Take note of the ID, which is 0B87sRTiHhVvQfms4ZENZcGJJRktDSU1HaEMxcBxrcoNwYsMeLVVsWVhtQ3VmQUlZd2VMZ1k in that example.

5. Browse to http://www.googledrive.com/host/<ID>. In this example, that would be http://www.googledrive.com/host/0B87sRTiHhVvQfms4ZENZcGJJRktDSU1HaEMxcBxrcoNwYsMeLVVsWVhtQ3VmQUlZd2VMZ1k

I hope you will find it convenient.

[Nam Nguyen]

I meant to say WontFix.

[mnv]

Nam, it works just fine in Opera! Thanks!

This is almost what I need: online access to my password database. It is not up to date, of course, but I don't create new entries every day :). So I'll update the .kdbx file on the Google Drive periodically. Thanks again!

By the way, can I use Browsepass on my own hosting? My hosting does not support WebDAV. Will it work just the same way as on Google Drive?

Also I googled for WebDAV hostings and found these: http://www.quora.com/What-is-the-best-free-webDAV-service

Is it hard for you to investigate wich one of those WebDAV-featured hostings works good with Browsepass? Thanks!

[mnv]

I forgot.

It would be nice if Browsepass at WebDAV-featured hosting will be accessable the same way as it works at MyDrive.ch. Something like https://webdav.blablahost.com/browsepass.

[Nam Nguyen]

Nick, you can certainly use BrowsePass in your own hosting. WebDAV is not required.

The reason for WebDAV is that you can use KeePass to directly read, and write your KDBX file with WebDAV. WebDAV is not necessary for BrowsePass.

[mnv]

Aha! Thanks.

However, I'd like to find hosting with WebDAV, which doesn't forces me to download index.html. Swissdisk.com, for instance, doesn't allow to open index.html in the browser :(.

May be you know one more WebDAV hosting like MyDrive.ch?..

[mnv]

Nam,

I've found the solution. It works just great. Here it is.

1. I use KeePass 2.x portable on my Windows 7. It stores password databse in the D:\Dropbox\Public\browsepass\database.kdbx.

2. As you see, I put your BrowserPass in the public Dropbox folder, so I can access BrowserPass folder over the net by entering URL like that: https://dl.dropboxusercontent.com/u/<MY-DROPBOX-ID>/browsepass/index.html. Dropbox handles MIME as well as MyDrive.ch, and just opens index.html instead of downloading it.

3. However, this URL is unrememberable. That's why I use my own domain (say, domain.com) at my own hosting. I've created a "keepass" subdomain, so there is an URL like this: http://keepass.domain.com. I configured my FTP client for that domain.

4. Then I put three files at this hosting: .htaccess, .htpasswd, index.html. Now, when I enter "keepass.domain.com" in the browser, I've to enter my credentials. Then it opens index.html. Index.html is very simple, it shows "https://dl.dropboxusercontent.com/u/<MY-DROPBOX-ID>/browsepass/index.html" via IFRAME.

That's it.

So, I have password protected website, and when I pass the authentication, I see https'ed BrowserPass' content. And my database is stored locally and is up to date since Dropbox app works in the background.

Here are few articles I used to create this solution:

1. How to host website on Google Drive (with IFRAME workaround too): http://www.labnol.org/internet/host-website-on-google-drive/28178/
2. 4 Ways to Host Your Website on Dropbox (with redirect feature too): http://www.maketecheasier.com/4-ways-to-host-your-website-on-dropbox
3. Password protection with .htaccess: http://www.htaccesstools.com/articles/password-protection/
4. How to find the full path to a file using PHP: http://www.htaccesstools.com/articles/full-path-to-file-using-php/
5. .htpasswd generator: http://www.htaccesstools.com/htpasswd-generator/

I also left your Google Drive version as is. I just created another subdomain - keepass1.domain.com - and made an IFRAME-redirect to the "http://www.googledrive.com/host/<VERY-LONG-GOOGLE-DRIVE-ID>" in the my registrar's control panel.

Now I have two versions of BrowsePass: first is Dropbox-based (password protected via index.html my own hosting and up to date via Windows Dropbox app), second is Google Drive-based (no password and not up to date). I will use Dropbox version, and let Google Drive version just for a case.

And I've set up your Chrome extension at my Chromebook, and it works great (of course, with not-up-to-date database at the Google Drive).

I think, you might put this into the BrowsePass manual. If you want.

Thanks a lot for great software, Nam!

[Nam Nguyen]

Hello Nick. Thank you so much for sharing your setup. I am glad that you've found BrowsePass useful.