Cosmsodb: Error: Browser does not support cryptography functions

[middiu]

• Package Name: @azure/cosmos
• Package Version: >= 3.7.0
• Operating system: All
• [ x] typescript
  • version: 3

Describe the bug Once the package is updated to >= 3.7.0 I get the following error: Error: Browser does not support cryptography functions

Everything is working fine with version 3.6.3

To Reproduce Steps to reproduce the behavior:

1. install @azure/cosmos >= 3.7.0 and create a test page

[ghost]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @southpolesteve, @zfoster

[zfoster]

i'll look into this, we made some changes indirectly related to browser

[zfoster]

@middiu There was a bug in version 3.7.0, can you try 3.7.1 or a later version?

https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/cosmosdb/cosmos/CHANGELOG.md#371-2020-06-12

[zfoster]

Let me know if you still have issues, I'm unable to reproduce

[middiu]

@zfoster i tried with any version above 3.7.0 but the only working version for me is 3.6.3

This is my entire package.json

{
  "name": "xyzapp",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@azure/cosmos": "3.6.3",
    "@microsoft/applicationinsights-react-js": "^3.0.1",
    "@microsoft/applicationinsights-web": "^2.5.6",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/fingerprintjs2": "^2.0.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-responsive": "^8.0.2",
    "axios": "^0.19.2",
    "fingerprintjs2": "^2.1.0",
    "formik": "^2.1.4",
    "formik-office-ui-fabric-react": "^1.0.0",
    "lscache": "^1.3.0",
    "moment": "^2.24.0",
    "office-ui-fabric-react": "^7.105.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-ga": "^2.7.0",
    "react-google-recaptcha-v3": "^1.4.1",
    "react-responsive": "^8.1.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3",
    "uuid": "^7.0.2",
    "yup": "^0.28.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/yup": "^0.26.33",
    "debug": "^4.1.1"
  }
}

and node version is v12.19.0

This how I initiate my Cosmosdb client:

        let cosmosClientOption = {};

        let cosmosdbendpoint: string = '';
        let restokens: any = {};
        response.data.cosmosdbTokens.forEach(token => {
          restokens[token.resourceId] = token.token;
          cosmosdbendpoint = token.endpoint;
        });
        cosmosClientOption = {
          resourceTokens: restokens,
          endpoint: cosmosdbendpoint,
          connectionPolicy: {
            enableEndpointDiscovery: false
          }
        };

        this._dbclient = new CosmosClient(cosmosClientOption);

        log('Setting up the database...');

        this._db = this._dbclient.database(DatabaseId);

do you need any other info that could help you to reproduce the problem?

Cheers

[zfoster]

which browser are you using @middiu ?

[middiu]

Google Chrome.

I'll try with others and I will let you know in 10 mins.

[middiu]

just installed 3.9.2 version and tried with:

last version of Firefox, last version of Edge, last version of Brave.

Same problem with all.

I'm working on a Mac with macOs Catalina, 10.15.7

[zfoster]

@middiu I'm still unable to reproduce. I created a fresh create-react-app and installed the 3.9.3, 3.6.3 and 3.7.0 versions of the SDK. I also configured the client initialization to resemble the code you've pasted, but the app still loads successfully and I can log a queried container to the console.

We throw the error you're seeing in the case where we don't have a crypto library to use. https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/cosmosdb/cosmos/src/utils/globalCrypto.ts#L13 Do you by chance have something going on in your setup that would remove that from the build or somehow prevent that global from being present?

[middiu]

Thanks @zfoster,

nothing that I can think of would "remove" crypto from build.

In my package-lock.json/yarn.lock I can see crypto-browserify "^3.11.0" installed as dependency, this is the only "crypto" keyword I can find if I do a search.

I do not have any custom gulp script or webpack extension.

Are you using the same node version I'm using? v12.19.0

[middiu]

I think I found the issue @zfoster

this is what I see if I type window.crypto in the console when the error is raised. Apparently crypto.subtle property is undefined.

Reading from chromium page, crypto.subtle is supposed to be undefined in insecure contexts https://www.chromium.org/blink/webcrypto

and yes, I'm not using HTTPS on my local development machine.

does it mean that from 3.7.0 we must use HTTPS for local development as well?

[zfoster]

That's right @middiu, we require https locally since we depend on those methods. I'm going to update the error message to better recommend using https locally since that's likely to be the case if this is failing

[middiu]

@zfoster I can confirm that after switching to HTTPS everything is working fine.

it's a good idea to update the error message, I have the feeling I'm not the only one using HTTP on localhost :)

Thanks for the support!