iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

Chrome extension 學習手札系列 第 13

Chrome extension 學習手札 13- 腳本實作 - HTTP自動認證(HTTP Authentication)

  • 分享至 

  • xImage
  •  

今天我們要來時做一個HTTP自動認證的功能,在這之前我們簡單介紹一下

HTTP Authentication

是W3C在HTTP/1.0中定義的認證方式,如果網站的請求是沒有認證過的話,

responses header 就會回傳 WWW-AuthenticateProxy-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參數與資料
所以就算是完成囉!那我們明天見!

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


上一篇
Chrome extension 學習手札 12 - 腳本實作 - 準備&介紹web Request
下一篇
Chrome extension 學習手札 14 - 腳本實作 - 安全性防護網
系列文
Chrome extension 學習手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言