今天我們要來時做一個HTTP自動認證的功能,在這之前我們簡單介紹一下
HTTP Authentication
是W3C在HTTP/1.0中定義的認證方式,如果網站的請求是沒有認證過的話,
responses header 就會回傳 WWW-Authenticate 或 Proxy-Authenticate,裡面的資料格式如下
WWW-Authenticate: <type> realm=<realm>
Proxy-Authenticate: <type> realm=<realm>
type就是認證的方式,通常最簡單的就是Basic,
而realm是區域,定義不同的區域可以讓server設定不同區域或層級的認證,
而client就會依照type進行認證,request headers 會回傳 Authorization
Authorization: <type> <credentials>
最簡單的type就是Basic,它的credentials就是由username以及password組成的,
{username}:{password}
把上述這串直接轉換成base64以後就是我們想要的資料囉!
Authorization: basic dsfk5i19a012j5
那如果有興趣鑽研更多http auth的人可以去官網研究,不過我們今天只要用Basic做測試而已
接下來我們要自己架一個server來認證,因為不好意思一直去戳別人的網站,所以用node來快速建置吧!
首先,搜尋一下node http auth的插件,並且建立一個node資料夾以及server.js,再更改一下變數
node/server.js
// Authentication module.
var http = require("http");
var auth = require('http-auth');
var basic = auth.basic({
realm: "IT help"
}, (username, password, callback) => {
// Custom authentication
// Use callback(error) if you want to throw async error.
callback(username === "tris" && password === "challenge");
}
);
// Creating new HTTP server.
http.createServer(basic, (req, res) => {
res.end(`Welcome to private area - ${req.user}!`);
}).listen(1996);
然後執行
node server
接下來到瀏覽器開啟
http:localhost:1994
就會看到認證請求了
接下來我們要用chrome extension去突破這個認證,所以再拿出我們的empty project出來用吧
這個功能需要先開啟權限,而且要開啟的還有目標網站的網址
manifest.json
"permissions": [
"activeTab",
"webRequest",
"webRequestBlocking",
"*://*localhost:1994/*"
]
並且在使用webRequest監控的時候,background是必須一直開啟狀態
"background" :{
"scripts" :["background/bg.js"],
"persistent" : true
},
大功告成,接下來我們就跳到後台腳本去撰寫功能吧
我們根據API文檔來解析code
chrome.webRequest.onBeforeRequest.addListener(callback, filter, opt_extraInfoSpec);
接下來,那我們直接寫入認證吧
chrome.webRequest.onAuthRequired.addListener(
function(details) {
alert("auth!!!")
},
{ urls: ['http://localhost:1994/*'] }
)
就是這麼簡單,當localhost:1996被認證請求時就會alert訊息,但我們要自動認證所以要使用blocking
chrome.webRequest.onAuthRequired.addListener(
function(details) {
return {
authCredentials:{
username: 'tris',
password: 'challenge'
}
}
},
{ urls: ['http://localhost:1994/*'] },
['blocking']
)
大功告成!接下來就直接打開視窗看看
沒有跳出任何視窗就登入成功了
而且看一下headers裡面也已經有了Authorization參數與資料
所以就算是完成囉!那我們明天見!
註:此範例是把正確帳密帶入才能順利執行,若帳密錯誤的話可能會陷入「自動登入失敗」的無窮迴圈中,使用時請記得執行例外處理與防呆