I'm building an Electron app (with Ionic) to digitally sign PDFs with p12 certificates using node-signpdf (https://www.npmjs.com/package/node-signpdf). I've had problems which I solved by using require ('electron').remote for example for fs.
I've also installed the same node version in my OS (MacOS Catalina) as the same one that electron is using (Node v12.4.0).
The problem is that one of the NPM dependencies uses crypto and it shows as undefined with the next error:
HomePage.html:39 ERROR TypeError: _crypto.randomBytes is not a function
at Object.ctx.seedFileSync (prng.js:340)
at _reseedSync (prng.js:210)
at Object.ctx.generateSync (prng.js:163)
at Object.ctx.generate (prng.js:80)
at Object.ctx.getBytes (random.js:92)
at _modPow (rsa.js:431)
at Object.push../node_modules/node-forge/lib/rsa.js.pki.rsa.encrypt (rsa.js:501)
at Object.key.sign (rsa.js:1245)
at addSignerInfos (pkcs7.js:534)
at Object.sign (pkcs7.js:377)
What I can see is that node-signpdf uses node-forge as a dependency, and node-forge loads crypto inside prng.js this way:
var _crypto = null;
if(forge.util.isNodejs && !forge.options.usePureJavaScript &&
!process.versions['node-webkit']) {
_crypto = require('crypto');
}
I've tried changing that part of the code to use crypto-js or browserfy-crypto (this last one doesn't even build and hasn't been updated in years), but I keep getting the error shown above.
EDIT 1:
This is how I'm implementing the signature in my service:
public signFile(pathToFile: string, pathToCert: string): void {
const fs = (<any>window).require('fs');
let certBuffer = fs.readFileSync(pathToCert);
let fileBuffer = fs.readFileSync(pathToFile);
fileBuffer = plainAddPlaceholder({
pdfBuffer: fileBuffer,
reason: 'I have reviewed it.',
signatureLength: 1612,
});
const signedPdf = signer.sign(fileBuffer, certBuffer, {passphrase: 'qwertyui'});
}
The code adds the placeholder to add the signature, the problem comes in signer.sign
EDIT 2:
When I run the app if I type in console: require ('crypto') I see the methods, so it looks like it's loaded in the global scope, the problem seems to be in the NPM dependency of node-forge.
EDIT 3:
I've changed require('crypto') to window.require('crypto') and started working. But I think I'll have to make postinstall script to modify it.
Is there a better way?
-
How can I make this crypto thing work? I ran out of ideas. Maybe you can spare some?
Thanks for your time!
Related
I maintain a package called react-querybuilder that generates unique identifiers using crypto.getRandomValues().
When used in the browser, this is not a problem as crypto is available pretty much everywhere now. But react-querybuilder can be used on the server for query processing (including generating IDs) as well as server-side rendering, which means the crypto package must either be polyfilled with crypto-browserify or loaded manually (something like globalThis.crypto = require('node:crypto')).
Some build setups require the polyfill even if they don't do SSR, e.g. Create React App v5 since it uses Webpack v5 (which doesn't automatically include polyfills like v4 did). CRA v4 doesn't have the issue.
How can I write the package to use window.crypto when running in the browser, but load node:crypto and use that instead when running on the server? Ideally the setup would avoid requiring anything extra of the end user (polyfills, config, etc.).
This is the current implementation at time of writing (comments removed):
let cryptoModule = globalThis.crypto;
if (!cryptoModule && typeof require === "function") {
cryptoModule = require("crypto").webcrypto;
}
const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
const position19vals = ["8", "9", "a", "b"];
const re = /[xy]/g;
const container = new Uint32Array(32);
export const generateID = () => {
cryptoModule.getRandomValues(container);
let i = -1;
return template.replaceAll(re, (char) => {
i++;
return char === "y"
? position19vals[container[i] % 4]
: (container[i] % 16).toString(16);
});
};
FWIW, I'm not opposed to having separate builds for client and server if that makes it easier to implement (for me and the end user, but mostly the end user).
I'm creating a blog, using this 'Web Dev Simplified' tutorial:
https://www.youtube.com/watch?v=1NrHkjlWVhM
I've copied the code from git hub https://github.com/WebDevSimplified/Markdown-Blog, installed the node modules and linked it to my mongodb database online.
Node Modules include;
express, mongoose, ejs, --save-dev nodemon, slugify, method-override, dompurify, jsdom.
The database was working and I could save articles, until I added the last part about sanitizing HTML and converting markdown to HTML, this is when the 'TypeError: marked is not a function' comes up, and the save button ceases to work.
Seems a once understood function is now not understood because of a more recent node module dependency, either the dompurify library or jsdom. I'm really out of my depth here! please help!
From Marked Documentation:
https://marked.js.org/#demo
Node JS
import { marked } from 'marked';
// or const { marked } = require('marked');
const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');
Your Code:
if (this.markdown) {
this.sanitizedHtml = dompurify.sanitize(marked(this.markdown))
}
try this:
if (this.markdown) {
this.sanitizedHtml = dompurify.sanitize(marked.parse(this.markdown))
}
its work for me
In my case:
const { marked } = require('marked');
instead of
const marked = require('marked')
...
this.sanitizedHTML = dompurify.sanitize(marked.parse(this.markdown))
Per node example documentation at https://marked.js.org/#demo
I'm trying to build some tests for my bot dialogs. I'm using the same test code (and modified test data) with two different bots with the identical dialog names. As such, the test.js file is the same for both bots. However, when I try to run my tests via Mocha on the second bot, I am getting an Error: DialogSet.add(): Invalid dialog being added. message for each test. This does not happen with my first bot. I even tried replacing the dialog file in the second bot with the one from the (working) first, and I still got the same error. As such I can't find anything different between the bots. I even replaced all of the files in question (the test, the test data/conversation, and the dialog itself) with the files from the first bot and still got the same error. Lastly, all botbuilder packages and other dependencies are the same version between the bots. I'm at a loss here...anyone have any ideas?
Here is the dialog that is being called. I left out the actual dialog steps but that shouldn't be relevant to the issue since all of the Dialog add activity happens in the constructor.
const { TextPrompt, ChoicePrompt, ConfirmPrompt, ChoiceFactory, ComponentDialog, WaterfallDialog, DialogSet, DialogTurnStatus } = require('botbuilder-dialogs');
const { VistaServiceHelper } = require('../helpers/vistaServiceHelper');
const { TrackingServiceHelper } = require('../helpers/trackingServiceHelper');
const { CosmosDbStorage } = require('botbuilder-azure');
const LINE_PROMPT = 'linePrompt';
const ORDER_PROMPT = 'orderPrompt';
const CRITERIA_PROMPT = 'criteriaPrompt';
const SEARCH_CRITERIA = ['GO', 'PO'];
const WATERFALL_DIALOG = 'waterfallDialog';
const CONFIRM_PROMPT = 'confirmPrompt';
// Static texts
const escalateMessage = `Escalation message here`
const msDay = 86400000;
class viewOrderDialog extends ComponentDialog {
constructor(dialogId, userDialogStateAccessor, userState) {
super(dialogId);
this.addDialog(new ChoicePrompt(CRITERIA_PROMPT));
this.addDialog(new TextPrompt(ORDER_PROMPT));
this.addDialog(new TextPrompt(LINE_PROMPT, this.validateLineNumber));
this.addDialog(new ConfirmPrompt(CONFIRM_PROMPT));
this.addDialog(new WaterfallDialog(WATERFALL_DIALOG, [
this.requestOrderNumber.bind(this),
this.selectSearchCriteria.bind(this),
this.displayLineItems.bind(this),
this.displayLineStatus.bind(this),
this.loopStep.bind(this)
]));
this.initialDialogId = WATERFALL_DIALOG;
this.integrationLog = new CosmosDbStorage({
serviceEndpoint: process.env.ACTUAL_SERVICE_ENDPOINT,
authKey: process.env.ACTUAL_AUTH_KEY,
databaseId: process.env.DATABASE,
collectionId: 'integration-logs'
});
this.queryData = {};
} // End constructor
I was able to fix this by deleting the botbuilder-testing folder inside the project's node_modules folder and rerunning npm install botbuilder-testing (even though I had already confirmed version in package.json and package-lock.json were showing latest version and had run npm install and npm update).
It appears this did stem from some sort of versioning issue and for whatever reason, only completely deleting the folder and reinstalling fixed it.
You may want to also verify the version of botbuilder inside your package.json file, because all of this packages must be at the same version
Ex:
"botbuilder": "~4.10.3",
"botbuilder-ai": "~4.10.3",
"botbuilder-dialogs": "~4.10.3",
"botbuilder-testing": "~4.10.3",
I Believe the accepted answer does not work in all cases . the correct answer would be to have the same botbuilder and botbuilder-testing versions .
I had the same problem and putting the same versions (or at least not putting a botbuilder-testing version above botbuilder worked)
Example
Here are example versions that work together :
"botbuilder": "~4.13.6",
"botbuilder-dialogs": "~4.13.6",
"botbuilder-testing": "^4.13.6",
I've written a plug-in for Webpack that takes my generated React component, renders it in Node, and then inserts it into the generated HTML document.
This used to work fine in Webpack 3. To upgrade it to Webpack 4, I replaced
compiler.plugin("after-emit", compilation => {
with
compiler.hooks.afterEmit.tap('prerender-plugin', (compilation) => {
which, as far as I can see, should be sufficient.
In the plug-in, I ask Webpack for the path to my generated bundle and then require that, roughly as follows:
const assetHash = Object.keys(compilation.assets).filter(asset => /app(.*).js/.test(asset))[0];
const appFilePath = compilation.assets[assetHash].existsAt;
// The `.default` is needed because it's an ES2015 module
const App = require(appFilePath).default;
However, I then all of a sudden hit errors like the following as a result of the require:
ReferenceError: window is not defined
at Object.<anonymous> (/home/vincent/Workspace/Flockademic/stacks/frontend/dist/app.da5512cf55a3c4446086.js:1:286)
...
The offending code seems to be some standard Webpack top matter:
!function(e,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i();else if("function"==typeof define&&define.amd)define([],i);else{var a=i();for(var o in a)("object"==typeof exports?exports:e)[o]=a[o]}}(window,function(){return function(e){var i={};function a(o){if
(Note that this sample is up to the supposedly-offending column. As you can see, window is not actually referred to on column 286.)
I'm not that familiar with Webpack, and documentation on plug-ins relatively scarce, so any pointers on how to get closer to solving this are very much welcome/
Add this at your root .js file will probably work.
if (typeof window === 'undefined') {
global.window = {};
}
When I use pulp build -O -t html/main.js and then pulp build -O -I test -m Test.Main -t html/testmain.js (i.e. building main and test) I get two different js output. In the former case, the format is
// Generated by psc-bundle 0.8.2.0
var PS = { };
(function(exports) {
// Generated by psc version 0.8.2.0
"use strict";
var Prelude = require("../Prelude");
var Control_Monad_Eff = require("../Control.Monad.Eff");
exports["main"] = main;
})(PS["Main"] = PS["Main"] || {});
PS["Main"].main();
Please note the require. In the latter case, the require is not in place at all
// Generated by psc-bundle 0.8.2.0
var PS = { };
(function(exports) {
/* global exports */
"use strict";
exports.concatArray = function (xs) {
return function (ys) {
return xs.concat(ys);
};
};
exports.showNumberImpl = function (n) {
/* jshint bitwise: false */
return n === (n | 0) ? n + ".0" : n.toString();
};
})(PS["Prelude"] = PS["Prelude"] || {});
(function(exports) {
// Generated by psc version 0.8.2.0
"use strict";
var $foreign = PS["Prelude"];
var Semigroupoid = function (compose) {
this.compose = compose;
};
Both examples are shorten, but the point is that require is used in the first time, while not used in the second time.
The issue is that I am not able to run the version using require in the browser due to this error
ReferenceError: require is not defined
When I included require.js into page, I got this error
Error: Module name "../Prelude" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
Thus my question is, what can be done to run the first case in browser.
My guess would be that this comes from running builds with different --require-path options; once with the old default, which was an empty string, and once with ../. This would lead to psc-bundle not realising it needed to include Prelude and Control.Monad.Eff properly in the first case. psc-bundle should replace those require calls with references to the other modules, so that the code works in browsers.
There are a few different ways this can happen, and the compiler has been updated now in a way that should make the probability of this happening again much lower, so I wouldn't spend too much time worrying about exactly how this has occurred.
If none of the above makes any sense to you, don't worry; I think you just need to do the following to fix this:
Update to the latest version of psc (0.8.3 changed the --require-path default to ../, so any version after 0.8.3 should do, but you will want the latest version in most cases)
Delete your output directory
Compile everything again.
You probably need to use the --browserify option to build the first case for the browser.