今天我們要來時做一個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);

• callback 回傳函式　- callback如果服務有blocking的話就可以return值
• filter 過濾網站 - 只會監控在過濾清單內的網站，但是網站必須有permissions權限
• opt_extraInfoSpec 選填設定 - 一些額外資訊，例如我們的blocking服務就是需要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參數與資料
所以就算是完成囉！那我們明天見！

註:此範例是把正確帳密帶入才能順利執行，若帳密錯誤的話可能會陷入「自動登入失敗」的無窮迴圈中，使用時請記得執行例外處理與防呆