PeculiarVentures / webcrypto-liner

webcrypto-liner is a polyfill that let's down-level User Agents (like IE/Edge) use libraries that depend on WebCrypto. (Keywords: Javascript, WebCrypto, Shim, Polyfill)
MIT License
148 stars 26 forks source link

Installation/usage? #59

Open lougreenwood opened 5 years ago

lougreenwood commented 5 years ago

Is it possible to use this as a simple es5/6 module and require/import for use in a particular class?

I get the impression that we need to run npm install && npm run build and then link to some generated js file directly in our html?

I'm feeling quite lost at how to get this working, so any help is greatly appreciated :)

microshine commented 5 years ago

webcrypto-liner is a polyfill. It wraps existing global crypto object Window.

pv-webcrypto-tests

<script src="src/promise.js"></script> <!-- Adds Promise to IE -->
<script src="src/webcrypto-liner.min.js"></script>
<script src="src/asmcrypto.js"></script> <!-- RSA/AES implementation -->
<script src="src/elliptic.js"></script> <!-- EC implementation -->

You can use crypto without import/require

window.crypto.subtle.generateKey(alg, true, keyUsage);
// or
crypto.subtle.generateKey(alg, true, keyUsage);
lougreenwood commented 5 years ago

You can use crypto without import/require

Is there a path to use import/require if I want to? If not, can you help me to understand what the use case is for npm installing if the src files need copy/moving into some dir to reference directly from HTML?

Thanks for bearing with me on this :)

microshine commented 5 years ago

webcrypto-liner is TS project. NPM version contains compiled JS files only. You don't need to install TypeScript and other dependencies for compiled files getting

lougreenwood commented 5 years ago

For example, I'm also using https://github.com/samthor/fast-text-encoding to polypill TextEncoder on ie11/Edge.

Usage of this is simple, I simply do a yarn add -D fast-text-encoder and then import 'fast-text-encoding'; in my JS and voila - the polyfill is enabled.

I'm trying to figure out if it's possible to have the same experience here...

lougreenwood commented 5 years ago

@microshine so you're saying all I need to do is yarn add webcrypto-liner and my code will be magically polyfilled? no imports necessary etc?

microshine commented 5 years ago

Do you use any compiler for JS compilation? If yes. Do you have fast-text-encoding code in your bundled file after import 'fast-text-encoding' using?

lougreenwood commented 5 years ago

Yes, my project is built with EmberJS, which builds the app using Broccoli. commonjs modules are made available in my project using ember-auto-import https://github.com/ef4/ember-auto-import.

Yep, it's bundled and the fast-text-encoding polyfill is working in production...

microshine commented 5 years ago

The problem is that package.json uses main: build/index.js, but npm module doesn't have build

Can you try to update webcrypto-liner/package.json and set main: dist/webcrypto-liner.shim.js? There can be problem with https://github.com/PeculiarVentures/webcrypto-liner/blob/master/src/init.ts#L5, you can comment it.

lougreenwood commented 5 years ago

@microshine that seems to have worked - at least my app is no longer throwing an exception when trying to import 'webcrypto-liner';

Let me check an environment where I was previously getting issues because crypto wasn't available...

mc-suchecki commented 5 years ago

@lougreenwood I also expected to import the library in TypeScript like so: import 'webcrypto-liner';

Right now this won't work with the following error: Module not found: Error: Can't resolve 'crypto' in '(...)\node_modules\webcrypto-liner\build'

@microshine would it be possible for you to change main in package.json accordingly?

TJKoury commented 5 years ago

@microshine @YuryStrozhevsky The issue pointed out by @mc-suchecki was a problem in my pull request to PKI.js. Please change the main field.