【问题标题】:Angular + Node(Express) + SSL integrationAngular + Node(Express) + SSL 集成
【发布时间】:2016-06-29 23:20:52
【问题描述】:

这是我第一次部署 ssl。我有在 localhost:4000 运行的 express 节点 js 模块。我已经生成了自签名证书并安装在服务器中并且它正在工作。现在,我的 angularjs 前端在 localhost:3000 运行(我使用 http-server 运行 angular 代码)。

为了让我的观点更清楚,这是服务器端的代码:-

// Import node js modules
var https = require('https')
var fs = require('fs')
var express = require('express')

// Load App configuration
var config = require('./config/config')

// Database Integration Here(mongodb)

// Initialize the express app
var app = express()

// App express Configuration

// parse application/json
app.use(bodyParser.json())

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true}))

app.use(cors())

app.set('serverHost', config.server.host)
app.set('serverPort', config.server.port)
app.set('serverUrl', config.server.url)

// Initializing various app modules

// Initialize the components

//Initialize the route(controller)

// Start the app with a given port no and mode
var env = process.env.NODE_ENV || 'development'

var httpsOptions = {
  key: fs.readFileSync(__dirname + '/cert/server.key'),
  cert: fs.readFileSync(__dirname + '/cert/server.crt')
}

https.createServer(httpsOptions, app).listen(app.get('serverPort'), function () {
  // Server and mode info
  console.log('The homerungurus backend running on server: '
              + app.get('serverHost')
              + ' and the port is: '
              + app.get('serverPort'))

  console.log("The mode is: " + env)
})

如您所见,我已在服务器中安装了证书。 我不需要 http-proxy,因为我会在标准端口 443 上部署 Angular 网络服务器。

我无法理解一些事情:-

  1. 如何在我的 Angular 模块中启用和设置 ssl 证书,以便 express 和 angular 可以通过 ssl 进行通信。
  2. 如何在浏览器中显示我的后端 express 节点的证书?

我希望我的观点更清楚了。

任何帮助表示赞赏?

【问题讨论】:

  • 请提供更多代码以便我们为您提供帮助:MCVE
  • @AGE 我添加了更多内容。希望这就足够了。

标签: javascript angularjs node.js ssl express


【解决方案1】:

好的,我们从哪里开始...

您有一个在端口 4000 上运行的后端(express node js)和一个在端口 3000 上运行的前端(带有 http-server 的 angularjs),因此您基本上有两个独立的网络服务器在运行。当您说您在服务器上“安装”了 ssl 证书时,我假设您将它放在某个目录中,但实际上并未安装在您的一台服务器上。

您有多种选择来部署您的代码以及您的 SSL 证书。最好的方法是通过 url 将前端与后端分开。

这意味着您的前端从以下位置获得服务:https://frontend.example.com 并且您的后端从https://backend.example.com 获得服务(您可以将网址更改为您想要的任何内容,因此https://example.comhttps://www.example.com 之类的也可以)

据我所知,如果您的前端有 https://,那么您的后端也需要 https://,否则您将遇到浏览器安全策略的问题。您可能还需要寻找同源策略,并在您的服务器上允许https://frontend.example.com 可以访问https://backend.example.com,但如果需要,请打开一个新票:D

用户会看到来自https://frontend.example.com的绿色符号

我假设您知道如何更改后端 url,因此您的 Angular 代码将使用 https://backend.example.com 而不是 http://localhost:4000

现在要在端口 443(这是 https 的默认端口,如果您说 https://...但不指定端口,则始终使用该端口)为您现有的服务器提供服务,您需要一个 http 代理。

作为 http 代理(你可以用谷歌搜索反向代理),你可以使用 apache 或 nginx,两者都很常见。

那里有几个教程,如何设置特定于操作系统的 nginx / apache,但我相信你会管理。不要忘记为 apache 安装 mod_ssl 和 mod_http_proxy mod(我不记得 nginx 是否也需要特定的东西)

Apache 反向代理的典型配置如下所示:

<VirtualHost *:80>
    # this part redirects all traffic from normal http to https
    ServerName frontend.example.com
    ServerSignature Off

    RewriteEngine on
    RewriteCond %{HTTPS} !=on
    RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [NE,R,L]
</VirtualHost>

<virtualhost *:443>
    # this is the actual part with some security enhancements
    ServerName frontend.example.com
    ServerAdmin webmaster@localhost

    # be carefull with HSTS, it might break your setup if you
    # do not know what you do. If you are not sure, do not
    # comment the next line in
    # Header always add Strict-Transport-Security "max-age=15768000"

    # Enable SSL
    SSLEngine on
    # only strong encryption ciphers
    # for reference https://community.qualys.com/blogs/securitylabs/2013/08/05/configuring-apache-nginx-and-openssl-for-forward-secrecy
    # and no RC4 according to https://community.qualys.com/blogs/securitylabs/2013/03/19/rc4-in-tls-is-broken-now-what
    SSLProtocol all -SSLv2 -SSLv3
    SSLHonorCipherOrder on
    SSLCipherSuite "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4"
    SSLCompression Off
    SSLCertificateFile /path/to/cert.pem
    SSLCertificateKeyFile /path/to/privkey.pem
    # this next line is not needed if you have a self signed cert
    SSLCertificateChainFile /path/to/chain.pem

    ServerSignature Off

    RequestHeader set X-FORWARDED-PROTOCOL https
    RequestHeader set X-Forwarded-Ssl on

    ProxyPreserveHost On

    # Ensure that encoded slashes are not decoded but left in their encoded state.
    # http://doc.gitlab.com/ce/api/projects.html#get-single-project
    AllowEncodedSlashes NoDecode

    <Location />
        # New authorization commands for apache 2.4 and up
        # http://httpd.apache.org/docs/2.4/upgrading.html#access
        Require all granted

        ProxyPassReverse http://127.0.0.1:3000
        ProxyPassReverse http://frontend.example.com/
    </Location>

    #apache equivalent of nginx try files
    # http://serverfault.com/questions/290784/what-is-apaches-equivalent-of-nginxs-try-files
    # http://stackoverflow.com/questions/10954516/apache2-proxypass-for-rails-app-gitlab
    RewriteEngine on
    RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
    RewriteRule .* http://127.0.0.1:3000%{REQUEST_URI} [P,QSA]
    RequestHeader set X_FORWARDED_PROTO 'https'

您将需要完全相同的两次,对于如上所示的前端和后端,您将端口 3000 替换为 4000,将 frontend.example.com 替换为 backend.example.com。

我希望这对您有所帮助。它并不完整,但它应该给你一个提示,如何在一个 http 代理后面设置你的两个 http 服务器来为你的 ssl 证书提供服务。

【讨论】:

  • 感谢您的回复。看了很多遍你的评论,我终于明白了。非常感谢。 :D
【解决方案2】:

@chickahoona 的上述评论绰绰有余。我的解决方案如下:-

  1. 我删除了 http-server 并将 nginx 用于我的前端,因为我想要 html5 模式,为此我需要重写 url。
  2. 我使用 nginx 作为代理服务器而不是 apache。

就是这样,其他一切都与@chickahoona 指出的相同。

【讨论】:

    猜你喜欢
    • 2017-01-02
    • 1970-01-01
    • 1970-01-01
    • 2014-09-28
    • 2018-04-23
    • 1970-01-01
    • 1970-01-01
    • 2018-09-02
    • 2017-04-03
    相关资源
    最近更新 更多