Angular + Node.js HTTP & HTTPS (SSL)

Question

I want to use https for the post requests in my payment view. I stumbled over diff tutorials and now my setup is the following (and I still don't get it running):

Certificates

I generated certificates for my development environment using this tutorial: http://greengeckodesign.com/blog/2013/06/15/creating-an-ssl-certificate-for-node-dot-js/

Node.js

I followed answer #2 to setup the http and https server in node: Listen on HTTP and HTTPS for a single express app

It looks like that:

environment = require('./config/config.js')()

express  = require('express')
bodyParser = require('body-parser')
app      = express()
portHTTP     = process.env.PORT || 61361
portHTTPS = 3030
mongoose = require('mongoose')
morgan       = require('morgan')
http = require('http')
https = require('https')
socket = require('socket.io')

#SSL Server
fs = require('fs')
sslOptions = {
  key: fs.readFileSync(__dirname + '/config/ssl/server.key'),
  cert: fs.readFileSync(__dirname + '/config/ssl/server.crt'),
  ca: fs.readFileSync(__dirname + '/config/ssl/ca.crt'),
  requestCert: true,
  rejectUnauthorized: false
}

#Database
configDB = require('./config/database.js')(environment)
mongoose.connect(configDB.url,{auth:{authdb:configDB.authdb}}, (err)->
  if (err)
    console.log(err)
)
db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', () ->
  console.log "Database established"
)

#Express Application
app.use(morgan('dev'))# log every request to the console
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

rootPath = __dirname + '/../../'
app.use('/bower_components', express.static(rootPath + 'bower_components'))
app.use('/partials', express.static(__dirname + '/../partials'))

# Routes
require('./node/routes.js')(app, db) # load our routes and pass in our app and fully configured passport

# Launch the application
https.createServer(sslOptions,app).listen(portHTTPS, () ->
  console.log("Secure Express server listening on port #{portHTTPS}")
)
http.createServer(app).listen(portHTTP)
io = socket.listen(https)

#app.listen(portHTTP)
console.log('Unsecure Express server listening on port #{portHTTP} environment: #{environment}')

Angularjs

I installed the angular module: https://github.com/btford/angular-socket-io

And added it to my index.coffee

angular.module "app", [lots of dependencies, 'btford.socket-io', 'myCodeService']
  .config ($stateProvider, $urlRouterProvider) ->
    ...states...
  .factory('mySocket', (socketFactory) ->
    return socketFactory({
      ioSocket: io.connect('https://localhost:3030/',{secure: true})
      #ioSocket: io.connect('https://cdn.socket.io/socket.io-1.3.4.js',{secure: true})
    })
  )

I added the two script tags into my index.html

<script src="../bower_components/angular-socket-io/socket.js"></script>
<script src="http://localhost:3030/socket.io/socket.io.js"></script>

Gulp Setup

And I serve in gulp with nodemon and browsersync

gulp.task('serve',['watch'], function(cb){
  var called = false;
  return nodemon({
    script: paths.tmp + '/serve/server.js',
    watch: [paths.src + '/node', paths.src + '/config'],
    ext: 'coffee',
    tasks: ['templateCache', 'partials_tmp'],
    env: { 'NODE_ENV': 'development' } ,
    nodeArgs: ['--debug=9999']
  })
  ....

 function browserSyncInit(files, browser) {
  browser = browser === undefined ? 'default' : browser;
  browserSync.instance = browserSync.init(files, {
    startPath: '/#/',
    browser: browser,
    proxy: "http://localhost:61361"
  });
}

I get an empty response from socket.io and I don't see anything in my browser which bugs me to accept the certificate.

There is an https option for browsersync but I don't really know how to split the traffic/ or if this is done automatically in node.js.

score 2 · Accepted Answer · answered Apr 14 '15 at 14:34

2

io = socket.listen(https) is incorrect. You should be passing the server instance, not the https module:

// ...
var srv = https.createServer(sslOptions,app);
srv.listen(portHTTPS, () ->
  console.log("Secure Express server listening on port #{portHTTPS}")
)
io = socket.listen(srv);
// ...

Also your <script> src that points to socket.io.js should be https and not http.

answered Apr 14 '15 at 14:34

mscdex

104,356
15
192
153

Ok thx that solved the biggest problem. Now I can either access all the routes with http://localhost:3000 or with https://localhost:3030. What is a good practice to do the routing? Resolve s.th. like this: http://stackoverflow.com/questions/282444/how-can-i-use-javascript-on-the-client-side-to-detect-if-the-page-was-encrypted on a route and redirect otherwise to the https version within angularjs? – Andi Giga Apr 14 '15 at 14:50
Or listening for state changes: `$rootScope.$on "$stateChangeStart", (event, toState, toParams, fromState, fromParams) -> #After login send user to share if toState.name is "payment" and !isSecure() event.preventDefault() $state.go "home" true` – Andi Giga Apr 14 '15 at 14:54
You might consider opening a new question about that as it appears to be unrelated to the original problem. – mscdex Apr 14 '15 at 15:08

score 1 · Answer 2 · answered Apr 14 '15 at 15:16

To split the routing in the front end this can be used:

.run ($rootScope, $window, authUserService) ->
    #Listens for state changes and redirects User if he is not logged in
    $rootScope.$on "$stateChangeStart", (event, toState, toParams, fromState, fromParams) ->
      #After login send user to share
      if toState.name is "payment" and !authUserService.isSecure()
        event.preventDefault()
        $window.location.href='https://localhost:3030/#/spenden'
        true

Angular + Node.js HTTP & HTTPS (SSL)

Certificates

Node.js

Angularjs

Gulp Setup

2 Answers2