上一篇文章這個高顏值的開源第三方網易雲音樂播放器你值得擁有介紹了一個開源的第三方網易雲音樂播放器，這篇文章我們來詳細瞭解一下其中使用到的網易雲音樂api專案NeteaseCloudMusicApi的實現原理。
NeteaseCloudMusicApi使用Node.js開發，主要用到的框架和庫有兩個，一個Web應用開發框架Express，一個請求庫Axios，這兩個大家應該都很熟了就不過多介紹了。
建立express應用
專案的入口檔案為/app.js：
async function start() {
require('./server').serveNcmApi({
checkVersion: true,
})
}
start()呼叫了/server.js檔案的serveNcmApi方法，讓我們轉到這個檔案，serveNcmApi方法簡化後如下：
async function serveNcmApi(options) {
const port = Number(options.port || process.env.PORT || '3000')
const host = options.host || process.env.HOST || ''
const app = await consturctServer(options.moduleDefs)
const appExt = app
appExt.server = app.listen(port, host, () => {
console.log(`server running @ http://${host ? host : 'localhost'}:${port}`)
})
return appExt
}主要是啟動監聽指定埠，所以建立應用的主要邏輯在consturctServer方法：
async function consturctServer(moduleDefs) {
// 建立一個應用
const app = express()
// 設定為true，則客戶端的IP地址被理解為X-Forwarded-*報頭中最左邊的條目
app.set('trust proxy', true)
/**
* 配置CORS & 預檢請求
*/
app.use((req, res, next) => {
if (req.path !== '/' && !req.path.includes('.')) {
res.set({
'Access-Control-Allow-Credentials': true, // 跨域情況下，允許客戶端攜帶驗證資訊，比如cookie，同時，前端傳送請求時也需要設定withCredentials: true
'Access-Control-Allow-Origin': req.headers.origin || '*', // 允許跨域請求的域名，設定為*代表允許所有域名
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', // 用於給預檢請求(options)列出服務端允許的自定義標頭，如果前端傳送的請求中包含自定義的請求標頭，且該標頭不包含在Access-Control-Allow-Headers中，那麼該請求無法成功發起
'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS', // 設定跨域請求允許的請求方法理想
'Content-Type': 'application/json; charset=utf-8', // 設定響應資料的型別及編碼
})
}
// OPTIONS為預檢請求，複雜請求會在傳送真正的請求前先傳送一個預檢請求，獲取伺服器支援的Access-Control-Allow-xxx相關資訊，判斷後續是否有必要再傳送真正的請求，返回狀態碼204代表請求成功，但是沒有內容
req.method === 'OPTIONS' ? res.status(204).end() : next()
})
// ...
}首先建立了一個Express應用，然後設定為信任代理，在Express裡獲取ip一般是通過req.ip和req.ips，trust proxy預設值為false，這種情況下req.ips值是空的，當設定為true時，req.ip的值會從請求頭X-Forwarded-For上取最左側的一個值，req.ips則會包含X-Forwarded-For頭部的所有ip地址。
X-Forwarded-For頭部的格式如下：
X-Forwarded-For: client1, proxy1, proxy2值通過一個 逗號+空格 把多個ip地址區分開，最左邊的client1是最原始客戶端的ip地址，代理伺服器每成功收到一個請求，就把請求來源ip地址新增到右邊。
以上面為例，這個請求通過了兩臺代理伺服器：proxy1和proxy2。請求由client1發出，此時XFF是空的，到了proxy1時，proxy1把client1新增到XFF中，之後請求發往proxy2，通過proxy2的時候，proxy1被新增到XFF中，之後請求發往最終伺服器，到達後proxy2被新增到XFF中。
但是偽造這個欄位非常容易，所以當代理不可信時，這個欄位也不一定可靠，不過正常情況下XFF中最後一個ip地址肯定是最後一個代理伺服器的ip地址，這個會比較可靠。
隨後設定了跨域響應頭，這裡的設定就是允許不同域名的網站也能請求成功的關鍵所在。
繼續：
async function consturctServer(moduleDefs) {
// ...
/**
* 解析Cookie
*/
app.use((req, _, next) => {
req.cookies = {}
//;(req.headers.cookie || '').split(/\s*;\s*/).forEach((pair) => { // Polynomial regular expression //
// 從請求頭中讀取cookie，cookie格式為：name=value;name2=value2...，所以先根據;切割為陣列
;(req.headers.cookie || '').split(/;\s+|(?<!\s)\s+$/g).forEach((pair) => {
let crack = pair.indexOf('=')
// 沒有值的直接跳過
if (crack < 1 || crack == pair.length - 1) return
// 將cookie儲存到cookies物件上
req.cookies[decode(pair.slice(0, crack)).trim()] = decode(
pair.slice(crack + 1),
).trim()
})
next()
})
/**
* 請求體解析和檔案上傳處理
*/
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(fileUpload())
/**
* 將public目錄下的檔案作為靜態檔案提供
*/
app.use(express.static(path.join(__dirname, 'public')))
/**
* 快取請求，兩分鐘內同樣的請求會從快取裡讀取資料，不會向網易雲音樂伺服器傳送請求
*/
app.use(cache('2 minutes', (_, res) => res.statusCode === 200))
// ...
}接下來註冊了一些中介軟體，用來解析cookie、處理請求體等，另外還做了介面快取，防止太頻繁請求網易雲音樂伺服器導致被封掉。
繼續：
async function consturctServer(moduleDefs) {
// ...
/**
* 特殊路由
*/
const special = {
'daily_signin.js': '/daily_signin',
'fm_trash.js': '/fm_trash',
'personal_fm.js': '/personal_fm',
}
/**
* 載入/module目錄下的所有模組，每個模組對應一個介面
*/
const moduleDefinitions =
moduleDefs ||
(await getModulesDefinitions(path.join(__dirname, 'module'), special))
// ...
}接下來載入了/module目錄下所有的模組：
每個模組代表一個對網易雲音樂介面的請求，比如獲取專輯詳情的album_detail.js：
模組載入方法getModulesDefinitions如下：
async function getModulesDefinitions(
modulesPath,
specificRoute,
doRequire = true,
) {
const files = await fs.promises.readdir(modulesPath)
const parseRoute = (fileName) =>
specificRoute && fileName in specificRoute
? specificRoute[fileName]
: `/${fileName.replace(/\.js$/i, '').replace(/_/g, '/')}`
// 遍歷目錄下的所有檔案
const modules = files
.reverse()
.filter((file) => file.endsWith('.js'))// 過濾出js檔案
.map((file) => {
const identifier = file.split('.').shift()// 模組標識
const route = parseRoute(file)// 模組對應的路由
const modulePath = path.join(modulesPath, file)// 模組路徑
const module = doRequire ? require(modulePath) : modulePath// 載入模組
return { identifier, route, module }
})
return modules
}以剛才的album_detail.js模組為例，返回的資料如下：
{
identifier: 'album_detail',
route: '/album/detail',
module: () => {/*模組內容*/}
}接下來就是註冊路由：
async function consturctServer(moduleDefs) {
// ...
for (const moduleDef of moduleDefinitions) {
// 註冊路由
app.use(moduleDef.route, async (req, res) => {
// cookie也可以從查詢引數、請求體上傳來
;[req.query, req.body].forEach((item) => {
if (typeof item.cookie === 'string') {
// 將cookie字串轉換成json型別
item.cookie = cookieToJson(decode(item.cookie))
}
})
// 把cookie、查詢引數、請求頭、檔案都整合到一起，作為引數傳給每個模組
let query = Object.assign(
{},
{ cookie: req.cookies },
req.query,
req.body,
req.files,
)
try {
// 執行模組方法，即發起對網易雲音樂介面的請求
const moduleResponse = await moduleDef.module(query, (...params) => {
// 引數注入客戶端IP
const obj = [...params]
// 處理ip，為了實現IPv4-IPv6互通，IPv4地址前會增加::ffff:
let ip = req.ip
if (ip.substr(0, 7) == '::ffff:') {
ip = ip.substr(7)
}
obj[3] = {
...obj[3],
ip,
}
return request(...obj)
})
// 請求成功後，獲取響應中的cookie，並且通過Set-Cookie響應頭來將這個cookie設定到前端瀏覽器上
const cookies = moduleResponse.cookie
if (Array.isArray(cookies) && cookies.length > 0) {
if (req.protocol === 'https') {
// 去掉跨域請求cookie的SameSite限制，這個屬性用來限制第三方Cookie，從而減少安全風險
res.append(
'Set-Cookie',
cookies.map((cookie) => {
return cookie + '; SameSite=None; Secure'
}),
)
} else {
res.append('Set-Cookie', cookies)
}
}
// 回覆請求
res.status(moduleResponse.status).send(moduleResponse.body)
} catch (moduleResponse) {
// 請求失敗處理
// 沒有響應體，返回404
if (!moduleResponse.body) {
res.status(404).send({
code: 404,
data: null,
msg: 'Not Found',
})
return
}
// 301代表呼叫了需要登入的介面，但是並沒有登入
if (moduleResponse.body.code == '301')
moduleResponse.body.msg = '需要登入'
res.append('Set-Cookie', moduleResponse.cookie)
res.status(moduleResponse.status).send(moduleResponse.body)
}
})
}
return app
}邏輯很清晰，將每個模組都註冊成一個路由，接收到對應的請求後，將cookie、查詢引數、請求體等都傳給對應的模組，然後請求網易雲音樂的介面，如果請求成功了，那麼處理一下網易雲音樂介面返回的cookie，最後將資料都返回給前端即可，如果介面失敗了，那麼也進行對應的處理。
其中從請求的查詢引數和請求體裡獲取cookie可能不是很好理解，因為cookie一般是從請求體裡帶過來，這麼做應該主要是為了支援在Node.js裡呼叫：
請求成功後，返回的資料裡如果存在cookie，那麼會進行一些處理，首先如果是https的請求，那麼會設定SameSite=None; Secure，SameSite是Cookie中的一個屬性，用來限制第三方Cookie，從而減少安全風險。Chrome 51 開始新增這個屬性，用來防止CSRF攻擊和使用者追蹤，有三個可選值：strict/lax/none，預設為lax，比如在域名為https://123.com的頁面裡呼叫https://456.com域名的介面，預設情況下除了導航到123網址的get請求除外，其他請求都不會攜帶123域名的cookie，如果設定為strict更嚴格，完全不會攜帶cookie，所以這個專案為了方便跨域呼叫，設定為none，不進行限制，設定為none的同時需要設定Secure屬性。
最後通過Set-Cookie響應頭將cookie寫入前端的瀏覽器即可。
傳送請求
接下來看一下上面涉及到傳送請求所使用的request方法，這個方法在/util/request.js檔案，首先引入了一些模組：
const encrypt = require('./crypto')
const axios = require('axios')
const PacProxyAgent = require('pac-proxy-agent')
const http = require('http')
const https = require('https')
const tunnel = require('tunnel')
const { URLSearchParams, URL } = require('url')
const config = require('../util/config.json')
// ...然後就是具體傳送請求的方法createRequest，這個方法也挺長的，我們慢慢來看：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
let headers = { 'User-Agent': chooseUserAgent(options.ua) }
// ...
})
}函式會返回一個Promise，首先定義了一個請求頭物件，並新增了User-Agent頭，這個頭部會儲存瀏覽器型別、版本號、渲染引擎，以及作業系統、版本、CPU型別等資訊，標準格式為：
瀏覽器標識 (作業系統標識; 加密等級標識; 瀏覽器語言) 渲染引擎標識 版本資訊不用多說，偽造這個頭顯然是用來欺騙伺服器，讓它認為這個請求是來自瀏覽器，而不是同樣也來自服務端。
預設寫死了幾個User-Agent頭部隨機進行選擇：
const chooseUserAgent = (ua = false) => {
const userAgentList = {
mobile: [
'Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1',
'Mozilla/5.0 (Linux; Android 9; PCT-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.64 HuaweiBrowser/10.0.3.311 Mobile Safari/537.36',
// ...
],
pc: [
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0',
'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0',
// ...
],
}
let realUserAgentList =
userAgentList[ua] || userAgentList.mobile.concat(userAgentList.pc)
return ['mobile', 'pc', false].indexOf(ua) > -1
? realUserAgentList[Math.floor(Math.random() * realUserAgentList.length)]
: ua
}繼續看：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
// ...
// 如果是post請求，修改編碼格式
if (method.toUpperCase() === 'POST')
headers['Content-Type'] = 'application/x-www-form-urlencoded'
// 偽造Referer頭
if (url.includes('music.163.com'))
headers['Referer'] = 'https://music.163.com'
// 設定ip頭部
let ip = options.realIP || options.ip || ''
if (ip) {
headers['X-Real-IP'] = ip
headers['X-Forwarded-For'] = ip
}
// ...
})
}繼續設定了幾個頭部欄位，Axios預設的編碼格式為json，而POST請求一般都會使用application/x-www-form-urlencoded編碼格式。
Referer頭代表傳送請求時所在頁面的url，比如在https://123.com頁面內呼叫https://456.com介面，Referer頭會設定為https://123.com，這個頭部一般用來防盜鏈。所以偽造這個頭部也是為了欺騙伺服器這個請求是來自它們自己的頁面。
接下來設定了兩個ip頭部，realIP需要前端手動傳遞：
繼續：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
// ...
// 設定cookie
if (typeof options.cookie === 'object') {
if (!options.cookie.MUSIC_U) {
// 遊客
if (!options.cookie.MUSIC_A) {
options.cookie.MUSIC_A = config.anonymous_token
}
}
headers['Cookie'] = Object.keys(options.cookie)
.map(
(key) =>
encodeURIComponent(key) +
'=' +
encodeURIComponent(options.cookie[key]),
)
.join('; ')
} else if (options.cookie) {
headers['Cookie'] = options.cookie
}
// ...
})
}接下來設定cookie，分兩種型別，一種是物件型別，這種情況cookie一般來源於查詢引數或者請求體，另一種為字串，這個就是正常情況下請求頭帶過來的。MUSIC_U應該就是登入後的cookie了，MUSIC_A應該是一個token，未登入情況下呼叫某些介面可能報錯，所以會設定一個遊客token：
繼續：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
// ...
if (options.crypto === 'weapi') {
let csrfToken = (headers['Cookie'] || '').match(/_csrf=([^(;|$)]+)/)
data.csrf_token = csrfToken ? csrfToken[1] : ''
data = encrypt.weapi(data)
url = url.replace(/\w*api/, 'weapi')
} else if (options.crypto === 'linuxapi') {
data = encrypt.linuxapi({
method: method,
url: url.replace(/\w*api/, 'api'),
params: data,
})
headers['User-Agent'] =
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36'
url = 'https://music.163.com/api/linux/forward'
} else if (options.crypto === 'eapi') {
const cookie = options.cookie || {}
const csrfToken = cookie['__csrf'] || ''
const header = {
osver: cookie.osver, //系統版本
deviceId: cookie.deviceId, //encrypt.base64.encode(imei + '\t02:00:00:00:00:00\t5106025eb79a5247\t70ffbaac7')
appver: cookie.appver || '8.7.01', // app版本
versioncode: cookie.versioncode || '140', //版本號
mobilename: cookie.mobilename, //裝置model
buildver: cookie.buildver || Date.now().toString().substr(0, 10),
resolution: cookie.resolution || '1920x1080', //裝置解析度
__csrf: csrfToken,
os: cookie.os || 'android',
channel: cookie.channel,
requestId: `${Date.now()}_${Math.floor(Math.random() * 1000)
.toString()
.padStart(4, '0')}`,
}
if (cookie.MUSIC_U) header['MUSIC_U'] = cookie.MUSIC_U
if (cookie.MUSIC_A) header['MUSIC_A'] = cookie.MUSIC_A
headers['Cookie'] = Object.keys(header)
.map(
(key) =>
encodeURIComponent(key) + '=' + encodeURIComponent(header[key]),
)
.join('; ')
data.header = header
data = encrypt.eapi(options.url, data)
url = url.replace(/\w*api/, 'eapi')
}
// ...
})
}這一段程式碼會比較難理解，筆者也沒有看懂，反正大致呢這個專案使用了四種型別網易雲音樂的介面：weapi、linuxapi、eapi、api，比如：
https://music.163.com/weapi/vipmall/albumproduct/detail
https://music.163.com/eapi/activate/initProfile
https://music.163.com/api/album/detail/dynamic每種型別的介面請求引數、加密方式都不一樣，所以需要分開單獨處理：
比如weapi：
let csrfToken = (headers['Cookie'] || '').match(/_csrf=([^(;|$)]+)/)
data.csrf_token = csrfToken ? csrfToken[1] : ''
data = encrypt.weapi(data)
url = url.replace(/\w*api/, 'weapi')將cookie中的_csrf值取出加到請求資料中，然後加密資料：
const weapi = (object) => {
const text = JSON.stringify(object)
const secretKey = crypto
.randomBytes(16)
.map((n) => base62.charAt(n % 62).charCodeAt())
return {
params: aesEncrypt(
Buffer.from(
aesEncrypt(Buffer.from(text), 'cbc', presetKey, iv).toString('base64'),
),
'cbc',
secretKey,
iv,
).toString('base64'),
encSecKey: rsaEncrypt(secretKey.reverse(), publicKey).toString('hex'),
}
}檢視其他加密演算法：crypto.js。
至於這些是怎麼知道的呢，要麼就是網易雲音樂內部人士（基本不可能），要麼就是進行逆向了，比如網頁版的介面，開啟控制檯，傳送請求，找到在原始碼中的位置， 打斷點，檢視請求資料結構，閱讀壓縮或混淆後的原始碼慢慢進行嘗試，總之，向這些大佬致敬。
繼續：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
// ...
// 響應的資料結構
const answer = { status: 500, body: {}, cookie: [] }
// 請求配置
let settings = {
method: method,
url: url,
headers: headers,
data: new URLSearchParams(data).toString(),
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
}
if (options.crypto === 'eapi') settings.encoding = null
// 配置代理
if (options.proxy) {
if (options.proxy.indexOf('pac') > -1) {
settings.httpAgent = new PacProxyAgent(options.proxy)
settings.httpsAgent = new PacProxyAgent(options.proxy)
} else {
const purl = new URL(options.proxy)
if (purl.hostname) {
const agent = tunnel.httpsOverHttp({
proxy: {
host: purl.hostname,
port: purl.port || 80,
},
})
settings.httpsAgent = agent
settings.httpAgent = agent
settings.proxy = false
} else {
console.error('代理配置無效,不使用代理')
}
}
} else {
settings.proxy = false
}
if (options.crypto === 'eapi') {
settings = {
...settings,
responseType: 'arraybuffer',
}
}
// ...
})
}這裡主要是定義了響應的資料結構、定義了請求的配置資料，以及針對eapi做了一些特殊處理，最主要是代理的相關配置。
Agent是Node.js的HTTP模組中的一個類，負責管理http客戶端連線的永續性和重用。 它維護一個給定主機和埠的待處理請求佇列，為每個請求重用單個套接字連線，直到佇列為空，此時套接字要麼被銷燬，要麼放入池中，在池裡會被再次用於請求到相同的主機和埠，總之就是省去了每次發起http請求時需要重新建立套接字的時間，提高效率。
pac指代理自動配置，其實就是包含了一個javascript函式的文字檔案，這個函式會決定是直接連線還是通過某個代理連線，比直接寫死一個代理方便一點，當然需要配置的options.proxy是這個檔案的遠端地址，格式為：'pac+【pac檔案地址】+'。pac-proxy-agent模組會提供一個http.Agent實現，它會根據指定的PAC代理檔案判斷使用哪個HTTP、HTTPS 或SOCKS代理，或者是直接連線。
至於為什麼要使用tunnel模組，筆者搜尋了一番還是沒有搞懂，可能是解決http協議的介面請求網易雲音樂的https協議介面失敗的問題？知道的朋友可以評論區解釋一下~
最後：
const createRequest = (method, url, data = {}, options) => {
return new Promise((resolve, reject) => {
// ...
axios(settings)
.then((res) => {
const body = res.data
// 將響應的set-cookie頭中的cookie取出，直接儲存到響應物件上
answer.cookie = (res.headers['set-cookie'] || []).map((x) =>
x.replace(/\s*Domain=[^(;|$)]+;*/, ''),// 去掉域名限制
)
try {
// eapi返回的資料也是加密的，需要解密
if (options.crypto === 'eapi') {
answer.body = JSON.parse(encrypt.decrypt(body).toString())
} else {
answer.body = body
}
answer.status = answer.body.code || res.status
// 統一這些狀態碼為200，都代表成功
if (
[201, 302, 400, 502, 800, 801, 802, 803].indexOf(answer.body.code) > -1
) {
// 特殊狀態碼
answer.status = 200
}
} catch (e) {
try {
answer.body = JSON.parse(body.toString())
} catch (err) {
answer.body = body
}
answer.status = res.status
}
answer.status =
100 < answer.status && answer.status < 600 ? answer.status : 400
// 狀態碼200代表成功，其他都代表失敗
if (answer.status === 200) resolve(answer)
else reject(answer)
})
.catch((err) => {
answer.status = 502
answer.body = { code: 502, msg: err }
reject(answer)
})
})
}最後一步就是使用Axios傳送請求了，處理了一下響應的cookie，儲存到響應物件上，方便後續使用，另外處理了一些狀態碼，可以看到try-catch的使用比較多，至於為什麼呢，估計要多嘗試來能知道到底哪裡會出錯了，有興趣的可以自行嘗試。
總結
本文通過原始碼角度瞭解了一下NeteaseCloudMusicApi專案的實現原理，可以看到整個流程是比較簡單的。無非就是一個請求代理，難的在於找出這些介面，並且逆向分析出每個介面的引數，加密方法，解密方法。最後也提醒一下，這個專案僅供學習使用，請勿從事商業行為或進行破壞版權行為~