前言
前端很多情況需要用啓動web服務器,而爲了保證數據的安全性,都需要用Https
對傳輸的數據進行加密傳輸,而且有些web-view
只允許https
通過訪問,所以學習怎麼配置https
也成爲大前端不可以少的功課之一。下面本妹子將先簡單介紹下 Https
,再依次介紹怎麼在Node
、webpack-dev-server
和nginx
這三個最常見的前端web服務器下配置Https
,以及關於證書的擴展乾貨。
Https簡介
Https
協議的主要作用可以分爲兩點:
1.建立一個信息安全通道,來保證數據傳輸的安全;
2.確認網站的真實性;
而https
的加密方式主要是非對稱加密,所以會有一對密鑰,分別是一個公鑰(證書)和私鑰。
瀏覽器allen訪問的時候,客戶端會接受這個證書,並利用這個證書裏的公鑰對數據加密,加密後,服務端tony用自己的私鑰解密就行了。
Web服務一般使用OpenSSL
工具提供的密碼庫,生成PEM、KEY、CRT等格式的證書文件。
其中.crt
後綴一般存放證書,.key
後綴一般存放私鑰,.pem
後綴的可以同時存放把CA證書和密鑰。
生成證書和密鑰
可以直接用命令生成
#使用以下命令生成一個證書密鑰對 key.pem 和 cert.pem,它將有效期約10年(準確地說是3650天)
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.key -out cert.crt
#或者直接生成到一個pem文件中
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem
可以用selfsigned
插件生成
const selfsigned = require('selfsigned');
var selfsigned = require('selfsigned');
var attrs = [{ name: 'commonName', value: 'contoso.com' }];
//有效期約10年
var pems = selfsigned.generate(attrs, { days: 3650 });
fs.writeFileSync('all.pem', pems.private + pems.cert, { encoding: 'utf-8' });
node配置https
用openssl生成all.pem
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem
在同目錄編寫app.js
,並運行node app.js
,啓動node
服務監聽88
端口
var https = require('https');
const fs = require('fs');
const path = require('path');
const options = {
key: fs.readFileSync(path.resolve(__dirname, './all.pem')),//密鑰
cert: fs.readFileSync(path.resolve(__dirname, './all.pem'))//證書
};
https.createServer(options, (request, response)=> {
// 發送 HTTP 頭部
// HTTP 狀態值: 200 : OK
// 內容類型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 發送響應數據 "Hello World"
response.end('Hello World\n');
}).listen(88);
// 終端打印如下信息
console.log('Server running at https://127.0.0.1:88/');
具體代碼可查看https://github.com/raoenhui/node-https.git
web-dev-server 配置https
web-dev-server配置很簡單,只要將https
選項設成true
即可。
module.exports = {
devServer: {
https: true
}
};
web-dev-server原理
server.js裏面判斷如果沒有證書和密鑰,則用selfsigned
生成,並放在ssl目錄中的server.pem
文件下,默認生成有效期爲30
天。
const certPath = path.join(__dirname, '../ssl/server.pem');
let certExists = fs.existsSync(certPath);
...
if (!certExists) {
log('Generating SSL Certificate');
const attrs = [{ name: 'commonName', value: 'localhost' }];
const pems = selfsigned.generate(attrs, {
algorithm: 'sha256',
days: 30,
keySize: 2048,
extensions: [...]
});
fs.writeFileSync(certPath, pems.private + pems.cert, { encoding: 'utf-8' });
}
fakeCert = fs.readFileSync(certPath);
啓動服務的時候引用證書和密鑰
options.https.key = options.https.key || fakeCert;
options.https.cert = options.https.cert || fakeCert;
...
this.listeningApp = spdy.createServer(options.https, app);
Nginx 配置https
# 進入nginx目錄
cd nginx
# 在key文件夾中用openssl生成
mkdir key && cd key && openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout all.pem -out all.pem
# HTTPS server
#
server {
listen 443 ssl;
server_name localhost;
#證書路徑
ssl_certificate key/all.pem;
ssl_certificate_key key/all.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root /HD/mycode/test;
index index.html index.htm;
}
}
知識擴展
其他證書格式
上面本妹子所講的是對於前端比較常見的web服務器,而其實還有很多種服務器它們的證書格式是不一樣的,而且可以互相轉換,具體如下圖所示
CA
CA全稱爲Certificate Authority 證書授權中心。上面本妹子是自己生成證書,這個證書在互聯網上是認爲不安全的。只有通過CA機構下發的證書,瀏覽器和電腦纔會認爲是可靠安全的。
其中證書也有很多分類,可以向CA申請不同類型的證書。下面舉例幾種常見證書類型的區別
還可以用SSL證書在線檢測工具,檢測網站證書詳細信息。
https://www.chinassl.net/ssltools/ssl-checker.html
如www.jd.com
相關鏈接
Happy coding .. :)