any cordova application is just a native web view and a www folder that contains the entire functionality in HTML javascript and css, so the app is entirely exposed, how can i make it as difficult as possible for anybody to read the app source code?
Yes you can. There is a cordova-plugin to crypt the html, js, and css files. You find it here: Cordova crypt file plugin
You are really concerned about it my advice is use a professional service to protect your code. E.g. Jscrambler
I found it, the problem with angular when got minified is that minification breaks dependency injection.
one solution is to use the string injection based syntax that maps every injected parameter to a string that never gets affected by minification.
example:
angular.module('app', []).controller(['$scope', function($scope) {
//code
}]);
another solution, is to use ngAnnotate i prefer to use it with gulp task runner
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var concat = require('gulp-concat');
var uglify= require('gulp-uglify');
gulp.task('task1', function () {
return gulp.src('src/js/*.js')
.pipe(concat('bundle.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway it´s a great protection.
I advise to use babili library (https://github.com/babel/babili)
and form your app so that distribution using electron is made from obfuscated code not from source.
For example package.json contains scripts like this:
"main": "release/app.js",
"scripts": {
"debug": "node ./node_modules/electron/cli.js ./app/app.js",
"build": "./node_modules/.bin/babili app -d release -D",
"test": "./node_modules/.bin/electron ./release/app.js",
"pack": "./node_modules/.bin/build --dir --ia32"
}
.babelrc
{
"presets": ["es2015"]
}
BTW babel supports also ES6/7 obfuscation
Related
I have code editor (CodeMirror v6) inside my ReactJS app and want to format code post edit with prettier. How to run prettier in browser?
Looking for something like:
prettier.format(code)
That's what found out after some test and fails:
There is Standalone package of prettier which does not require anything from NodeJs.
It has some limitations:
It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.
https://prettier.io/docs/en/browser.html
Also inside prettier.format selected plugins and parser must be set manually.
Inside index.html, add standalone prettier + babel parser, which is enough to run prettier from a global variable:
// JS script, should be run after <script> tags load
const formatted = prettier.format("console.log( 'ok')", {
parser: "babel",
plugins: prettierPlugins,
});
console.log(formatted);
<!-- HTML -->
<script src="https://unpkg.com/prettier#2.6.2/standalone.js"></script>
<script src="https://unpkg.com/prettier#2.6.2/parser-babel.js"></script>
prettierPlugins was also exposed from these script tags, it is not my custom code.
I'm using Create React App and I would like to use a JS library that isn't available via npm. How would I go about integrating that into my app? I think I can simply add a script tag for it in public/index.html for development purposes but I'm guessing that won't include it in the final build code. Any suggestions would be welcome.
You can add your script to the public folder and include it in the public/index.html file.
<script type="text/javascript" src="%PUBLIC_URL%/my-script.js"></script>
I found a nodejs module that I would love to be able to include in my Angular app. I read around and saw that I can do this by running browserify on it. After doing this, I have referenced the new file in my html, but I don't know what to do after that. Where do I need to reference it to get it in angular scope? Here is the github repo I want to be able to access
https://github.com/whatadewitt/yfsapi
After I browserify the files in the node_modules folder, I have one big js file. The usage for this in Node is
var YahooFantasy = require('yahoo-fantasy');
// you can get an application key/secret by creating a new application on Yahoo!
var yf = new YahooFantasy(
Y!APPLICATION_KEY,
Y!APPLICATION_SECRET
);
It seems it needs a require here, but isn't that the whole reason I ran browserify in the first place? What am I missing here?
From the Browserify website:
Browsers don't have the require method defined, but Node.js does. With
Browserify you can write code that uses require in the same way that
you would use it in Node.
The point of Browserify is to give you a module system in the browser and to allow you to require files. It's incredibly useful and allows you to easily include Node modules and modularize your own app.
To use the Node module you're referencing in an Angular app, you would do basically exactly what the demo shows in either a controller or service. Personally, I'd probably recommend creating a service that wraps the Node module and exposes methods to interact with the Yahoo Fantasy servers; I probably wouldn't put it on $scope unless you absolutely had to for some reason.
Here's some pseudo-ish code:
var yf = require('yahoo-fantasy');
function YFantasyService (<dependencies>) {
this.someMethod = function () {
return yf.doStuff();
}
}
YFantasyService.$inject = [<dependencies>];
module.exports = YFantasyService;
Register your service (this is how my app is structured...there are plenty of other ways to write and register services but you get the idea):
angular.module('YFantasyApp', [<dependencies>])
.service('YFantasyService', require('./YFantasyService'));
Then inject it into other services and controllers and do whatever you want with it.
If you want to build a bundle that contains yahoo-fantasy - so that you can use it with minimal changes to your existing code - you can use the Browserify API:
var browserify = require("browserify");
browserify()
.require("yahoo-fantasy", { expose: "yahoo-fantasy" })
.bundle()
.pipe(process.stdout);
That will generate a bundle that contains yahoo-fantasy module and all of its dependencies and will expose a global require function that you can call to access said module:
<!doctype html>
<html>
<head>
<title>so-40120643</title>
</head>
<body>
<script src="./bundle.js"></script>
<script>
console.log(require("yahoo-fantasy"));
</script>
</body>
</html>
If you want to use a different name for the global require function, you can use Browserify's externalRequireName option.
I am totally new to React JS or any given server-side technology. And now, I want to learn how to develop in React JS.
Introduction
I started with React JS tutorials on official website. Now, I am trying to import React toolbox or any other third-party component into my JSX code. But, I am facing the problem of uncaught exception error: require not defined.
When I searched about it, I came to know about various build mechanisms(browserify, webpack, gulp), to which I was totally new(again). After reading about these, and seeing some examples, I was able to let my browser compile require() statements written in my .jsx files.
Problem
What I am trying to do is:
Write a .html file.
Start it via my server.js file.
Add a <script> tag in it, which will inject my .jsx code into my .html file.
The examples that I have seen so far (1, 2, and some other...) load a .js file in the beginning and write their .html code in .jsx files (render() function).
Question
Is it possible to load a .html file from server.js and use .jsx from a <script> tag in that .html file? Something like this:
<html>
.
.
<body>
<div id="container"></div>
<script src="path_to_reactjs_file"></script>
</body>
</html>
I am sorry if this sounds like totally dumb question, but because of being totally new to this technology, I am not able to understand how I should go about it.
Any help would be appreciated.
Sounds like there might be an issue with file name extensions, Browserify only understands .js and .json extensions, unless you tell it otherwise.
$ browserify --extension jsx src/main.js > bundle.js
Babel with the right transforms will automatically do this for you as part of its module transpilation.
$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js
Note that this assumes your entry point has a .js file extension, if it was .jsx you'd have to set the extension type.
This config can be simplified by adding the config to your package.json
{
babel: {
presets: [ 'es2015', 'react' ]
}
},
{
browserify: {
transform: 'babelify'
}
}
Without bundling, you can not include jsx to html directly, but you can create components without jsx syntax (use plain js) and it will work.
first thing to note...
Browser can understand only HTML, CSS and plain javascript.
If you are providing JSX to browser, it fails to parse it. So you need to use a package bundler such as webpack. this converts all your JSX, typescript, Sass files into javascript(bundle.js) file. You can give this bundle.js file in the .html file
Using gulpjs and bower, Id like to start with the bower.json file to call on what package dependencies I want (ideally start the build with html 5 boilerplate, then backbone). Since the whole point of using gulp is for easy project management I would like to understand how to auto insert the scripts in to my project (pulling from the bower_components dir) and add the path to my head tags, I assume this is a responsibility gulp should be handling, in the link below I am under the impression grunt does provide this functionality, so if grunt can gulp should be able to.
This tut seems to cover everything I am looking for, except it is using gruntjs with the plugin "grunt-bowercopy" http://simonsmith.io/managing-bower-components-with-grunt/
So does anyone know how to get gulp and bower to play nicely. It would be cool to download the html 5 boilerplate, then for my javascript include backbone/jquery as well as some css like fontawesome and such with one command bower update, and have it insert the script tags in my header, and pull the main files I need into my project (this would kill a lot of tedious work). I assume grunt does handle this specifically with the "grunt-bowercopy" plugin, so essentially I am looking for a plugin "gulp-bowercopy" or something that provides this?
I still have a lot to learn about gulp/grunt and how to really leverage them, but this seems like an awesome tool to have.
essentially I am looking for a plugin "gulp-bowercopy" or something that provides this
You should then consider looking into either:
gulp-bower
or gulp-bower-files
as they likely provide the same functionality as grunt-bowercopy.
You can just use wiredep directly like the gulp Yeoman generator does. Here's a code sample from the gulpfile.js.
var wiredep = require('wiredep').stream;
gulp.task('wiredep', function () {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/bower_components/'
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/'
}))
.pipe(gulp.dest('app'));
});