拡張機能でContent-Security-Policyを回避したい (VivaldiでGoogle翻訳を使いたい)

動機

• vivaldi搭載の翻訳では精度が良くないのでGoogle翻訳を使いたい
• ページにGoogle翻訳スクリプトを埋め込む方式の拡張機能だとGithubなどのページではContent-Security-Policy(CSP)が設定されておりそのスクリプトが実行できない
• CSPはHTTPヘッダで制御されているのでヘッダを書き換えればCSPは無効化できる
• ヘッダの書き換えは拡張機能で行える

方法

• 今回、ヘッダの書き換えは既存の翻訳拡張機能を改造することで行う
• 改造したい拡張機能のフォルダを「パッケージ化されていない拡張機能を読み込む」で読み込む
• 下記のように manifest.json の background に scripts として background.js を指定する permissions に webRequest , webRequestBlocking を追加する

manifest.json

{
// ...
   "background": {
      "scripts": ["background.js"]
   },
// ...
   "permissions": [ "tabs", "http://*/", "https://*/", "contextMenus", "webRequest", "webRequestBlocking" ],
// ...
}

• background.js にヘッダを削除する js を追記する

background.js

// ...
chrome.webRequest.onHeadersReceived.addListener(function(detail){
	const headers = detail.responseHeaders.filter(e => e.name !== "content-security-policy")
	return {responseHeaders: headers}
}, {urls: ["<all_urls>"]}, ["blocking", "responseHeaders"])

• このjsでヘッダ内のcontent-security-policyを消して読み込むことができる
• 2つ目の引数のオブジェクトのプロパティ urls には <all_urls> で全てのページが対象になる
• これを行うことでXSSなどの攻撃に対するセキュリティレベルが低下するので注意(urlsで都度指定するのが良い)

参考ページ

Chrome 拡張機能で CSP を無視させる