2

I'm developing an Angular6+ solid-app (codebase). The app itself depends on:

"crypto-js": "^3.1.9-1",
"rdflib": "^0.19.0",
"solid-auth-client": "^2.2.6",
"stream": "0.0.2",
"webcrypto": "^0.1.1",
"zone.js": "^0.8.26"

What I'm trying to do is deleting a RDF resource using rdflib.UpdateManager.update():

$rdf.UpdateManager(this.store).update(toBeDeleted, [], (uri, ok, message, response) => {
  if (ok) {
    console.log('DELETED')
  } else {
    console.warn(message)
  }
})

You can find more the JSDoc about the UpdateManager here and an introduction of rdflib.js here.

Now, using Firefox 63.0b12 (64-bit), I keep getting the following error which I think could be related to the fact that accessing to the WebCrypto API should be restricted to secure origins (which is to say https:// pages). The same error is fired when using Opera. 

Unhandled Promise rejection: Cannot find module "../algorithms/RSASSA-PKCS1-v1_5". ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot find module "../algorithms/RSASSA-PKCS1-v1_5".
at webpackEmptyContext (algorithms sync:2)
at SupportedAlgorithms.normalize (SupportedAlgorithms.js:84)
at SubtleCrypto.importKey (SubtleCrypto.js:279)
at RSASSA_PKCS1_v1_5.importKey (RSASSA-PKCS1-v1_5.js:124)
at Function.importKey (JWA.js:113)
at Function.importKey (JWK.js:46)
at Function.issueFor (PoPToken.js:57)
at webid-oidc.js:183
at fetchWithCredentials (authn-fetch.js:63)
at authn-fetch.js:41 Error: Cannot find module "../algorithms/RSASSA-PKCS1-v1_5".
at webpackEmptyContext (http://localhost:4200/main.js:11:10)
at SupportedAlgorithms.normalize (http://localhost:4200/vendor.js:132732:107)
at SubtleCrypto.importKey (http://localhost:4200/vendor.js:132336:51)
at RSASSA_PKCS1_v1_5.importKey (http://localhost:4200/vendor.js:124747:28)
at Function.importKey (http://localhost:4200/vendor.js:125342:34)
at Function.importKey (http://localhost:4200/vendor.js:125411:18)
at Function.issueFor (http://localhost:4200/vendor.js:127189:18)
at http://localhost:4200/vendor.js:185374:44
at fetchWithCredentials (http://localhost:4200/vendor.js:184423:49)
at http://localhost:4200/vendor.js:184401:16

Am I missing a npm dependency? What is the root cause of this issue?

Stanislav Kralin
  • 11,070
  • 4
  • 35
  • 58
sentenza
  • 1,608
  • 3
  • 29
  • 51

2 Answers2

1

I get the same error when calling this code:

import auth from 'solid-auth-client';

// for example in a button click handling, this gives me the error:
auth.logout();

Using yarn, webpack 4 and babel 7

Dependencies:

"@material-ui/core": "^3.2.0",
"rdflib": "^0.19.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

The way the "@trust/webcrypto" module (version 0.9.2) handles dynamic loading of other modules triggers a warning in my build:

WARNING in ./node_modules/@trust/webcrypto/src/algorithms/SupportedAlgorithms.js 84:22-60
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@trust/webcrypto/src/algorithms/index.js
 @ ./node_modules/@trust/webcrypto/src/SubtleCrypto.js
 @ ./node_modules/@trust/webcrypto/src/Crypto.js
 @ ./node_modules/@trust/webcrypto/src/index.js
 @ ./node_modules/@solid/oidc-rp/src/AuthenticationRequest.js
 @ ./node_modules/@solid/oidc-rp/src/RelyingParty.js
 @ ./node_modules/@solid/oidc-rp/src/index.js
 @ ./node_modules/solid-auth-client/lib/webid-oidc.js
 @ ./node_modules/solid-auth-client/lib/solid-auth-client.js
 @ ./node_modules/solid-auth-client/lib/index.js
 @ ./src/main/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 @babel/polyfill ./src/main/index.js

Sounds somewhat related...

hovenko
  • 713
  • 7
  • 15
  • I have reported this as an issue to https://github.com/anvilresearch/webcrypto/issues/79 – hovenko Oct 18 '18 at 18:16
  • However, the module *@trust/webcrypto* is a nodejs module, and is not written to work in a web browser. For instance, it calls on openssl for key generation. Solid libraries for web applications need to use another library than @trust/webcrypto... it seems. – hovenko Oct 18 '18 at 18:17
1

Dmitri Zagidulin answered my issue (and my pull request for what I thought was a workaround) here: https://github.com/anvilresearch/webcrypto/pull/80#issuecomment-431115569

The @trust/webcrypto module is only intended as a NodeJS module on backend. To exclude it from webpack bundling, one replaces it with an external module (provided by the browser) such as this:

externals: {
  '@trust/webcrypto': 'crypto',
  'text-encoding': 'TextEncoder',
}

PS: he also recommented externalizing the text-encoding module, which is also a browser available module.

hovenko
  • 713
  • 7
  • 15
  • Where did you place this `externals` definition? Is it possible to use it in `angular.json`? – sentenza Oct 19 '18 at 07:37
  • I don't know how angular configuration works. Sorry. The configuration I mentioned was for Webpack config file. – hovenko Oct 20 '18 at 19:59