JSONを要求するエッジエクステンションが機能しません

Question

私はEdgeエクステンションで作業しています。外部のウェブサイトからJSONをリクエストする必要があります。次の例は、stackoverflow.comで正常に動作しますが、必要な場所でsteamcommunity.com/id/に失敗します。ここで

私が持っているファイルは、次のとおりです（ローカルファイルから）

jQueryの

manifest.jsonを：

{ 
    "author": "me", 
    "name": "Get JSON", 
    "description": "get json", 
    "version": "0.1", 
    "manifest_version": 2, 
    "content_scripts": [ 
    { 
     "matches": [ 
     "*://steamcommunity.com/id/*", 
     "*://stackoverflow.com/*" 
     ], 
     "js": ["jquery.min.js", "myscript.js"] 
    } 
    ] 
} 

myscript.js：

var url = 'https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json'; 

$.getJSON(url, function(data) { 
    console.log(data); 
}); 

私が言ったように、この例ではStackoverflowでは正常に動作しますが、Steamでは失敗します。
これは私がスチームのウェブサイトに表示されるエラーです：

CSP14312: Resource violated directive 'connect-src 'self' http://steamcommunity.com https://steamcommunity.com https://api.steampowered.com/ http://localhost:27060 http://store.steampowered.com/ https://store.steampowered.com/' in Content-Security-Policy: https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json. Resource will be blocked. 

編集：私はまた、Google ChromeのChromeの拡張機能を使用している場合、この正確な例が正常に動作することを、追加する必要があります。

ご迷惑をおかけして申し訳ございません。

Answer 1

Microsoft Edgeは、ChromeとFirefoxとは異なり、拡張機能のWebサイトCSPルールを無視しません。

未解決の問題については、https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11320214/を参照してください。

自分自身でテストした唯一の実行可能な回避策は、幸運なことにEdgeでサポートされているbrowser.webRequest.onHeadersReceivedを使用して、オンザフライでCSP応答ヘッダーを変更することです。

注：このコードはまた、より詳細に問題を説明し、この素晴らしい記事、から適応されました：https://transitory.technology/browser-extensions-and-csp-headers/

コードは、各CSPヘッダとディレクティブの許可URLへのあなたの拡張機能を追加し、それがで実行されなければなりません背景ページはpersistentと設定する必要があります。

manifest.jsonには、webRequestとwebRequestBlockingの権限を必ず追加してください。

const cspHeaderNames = [ 
    'content-security-policy', 
    'content-security-policy-report-only', 
    'x-webkit-csp' 
]; 

// @see https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives 
const cspSources = [ 
    'connect-src', 
    'default-src', 
    'font-src', 
    'frame-src', 
    'img-src', 
    'media-src', 
    'object-src', 
    'script-src', 
    'style-src', 
    'child-src', 
    'form-action', 
]; 

const url = browser.extension.getURL("").slice(0, -1); // (remove trailing "/") 

browser.webRequest.onHeadersReceived.addListener(details => { 
    details.responseHeaders.forEach(header => { 
    const isCspHeader = cspHeaderNames.indexOf(header.name.toLowerCase()) >= 0; 
    if (isCspHeader) { 
     let newValue = header.value; 
     cspSources.forEach(source => { 
     newValue = newValue.replace(source, source + ' ' + url); 
     }); 
     header.value = newValue; 
    } 
    }); 
    return { 
    responseHeaders: details.responseHeaders 
    }; 
}, { 
    urls: ['<all_urls>'], 
    types: ['main_frame', "sub_frame"], 
}, ["blocking", "responseHeaders"]);