Fetch API not sending session cookies when used inside a Chrome Extension

Question

I'm trying to make a Chrome Extension which scrapes some details from Pull Requests on Github using the Fetch API, and then displays them elsewhere. I'm running into some problems when I try to use this with a non-public repository on Github. I believe this is related to CSRF protection, and the rules that govern Chrome extensions having access to session cookies.

I have the following in my extension's manifest.json:

"content_scripts": [{
    "matches": [
        "*://github.com/*/*/pulls"
    ],
    "js": ["script/underscore-1.8.3.min.js", "script/content.js"]
}],
"permissions": [
    "tabs",
    "activeTab",
    "*://github.com/*",
    "webNavigation"
]

But when I run the following from within my script/content.js:

fetch('/redacted/redacted/pull/4549', {credentials: 'same-origin'}).then((response) => {
    return response.text();
}).then((text) => {
    // do cool stuff
})

This produces a 404 response from Github. Inspecting this request with Chrome Inspector's network tab, I can see it is not sending my GitHub session header with the request.

If I make the very same request using the Javascript prompt in the Inspector, I can see a 200 response, and I can see that it is sending my session cookies.

My understanding was that specifying the Github domain in my manifest.json would mean my extension would have access to my session data in my content scripts, is this not correct? What should I be doing to make a valid request to this protected content?

Erasmo

I have this issue as well, fetch simply don't send cookies even with credentials: 'same-origin', while XHR just send everything, seems like a bug to me. – Dufour

Answer 1

According to Chrome blog, to include cookies you need credentials: 'include' instead of credentials: 'same-origin'.

Dufour

While using credentials: 'include' is indeed the correct solution, the blog post you cite in no way backs you up; it doesn't even mention Chrome extensions or credentials: 'same-origin' (which is a valid option in the init parameter of a fetch() call, but just won't work in the context of a Chrome extension). The real reason you need credentials: 'include' is that Chrome extensions execute in a notional window whose URL is on the chrome-extension:// scheme, and therefore definitely not on the same origin as any real domain you might want to make a fetch request to. – Isar

I'm still not able to send the cookies even after setting credentials: 'include'. I've read tons of SO questions, but to no luck. – Laing

I have the same problem while doing this from a Chrome extension. It works with the same Firefox extension, so I am fairly sure that all CORS-Headers are set correctly. @PythonEnthusiast, did you meanwhile find a solution for this? – Monolatry

any luck with the solution? – Humanly

Answer 2

1. "permissions" in manifest may contain only known permission strings. In order to let it call GitHub, use "host_permissions" instead:

...
"permissions": [
    "tabs",
    "activeTab",
    "webNavigation"
],
"host_permissions: [
    "*://github.com/*",
]

2. 'same-origin' is the default value for credentials property, it can be omitted. This value restricts sending cookies and authentication HTTP headers to domains other than the calling script origin. Chrome extension origin looks like chrome-extension://abcxyz.. and won't send even GitHub cookies to the GitHub. Instead you need credentials: 'include'. This is true for an extension that overrides a Chrome URL, not sure about others.

Multiversity

Answer 3

Specifying github in the permissions only gives access to the host, its there to limit damage if the extension/app is compromised by malware (source).

Its not indicated in the content script documentation that session data can be retrieved in content scripts, just their DOMs. I think it would be better if you use and incorporate the official Github API in the chrome extension project you're creating.

Dorthydortmund