javascript - Angular + Node(Express) + SSL 集成

Question

这是我第一次部署 ssl。我有在 localhost:4000 运行的 express Node 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 代理，因为我将在标准端口 443 上部署 Angular 网络服务器。

我无法理解一些事情:-

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

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

需要任何帮助吗？

Answer 1

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

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

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

这意味着您的前端服务来自:https://frontend.example.com 并且您的后端从 https://backend.example.com 获得服务(您可以将 url 更改为任何您想要的，所以类似 https://example.com 或 https://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 证书提供服务。