I’m currently porting an addon from the jetpack to the WebExtension API. I need to continuously update a browser action (toolbar button) with data (e.g. set its badge text).
For this, I would like to do a request from a background script in my extension to an API of the page, which is accessible when the user is logged in (i.e. a cookie is set). What I did so far:
I gave myself host permissions, which is mentioned to be necessary for request from content scripts.
However, content scripts are for injecting JS into pages the user visits.
I created a background script that uses fetch to do a request to the API.
However, when queried from the background script, the API tells me that nobody is logged in, while I can access it with the browser flawlessly.
This is the relevant part of the manifest.json:
{
"background": {
"scripts": ["background.js"]
},
"permissions": [
"*://subdomain.domain.com/*"
]
}
How can I have a continuously running background script that can use the user’s cookie to access this API?
Firefox has stricter cors restrictions for cookies. I solved this by doing the api call from a content-script injected on the page with the same domain. That api call generated an auth token that was used for api calls from the background page, and enabling cors on backend for requests containing token in auth header.
You'll need to supply the credentials option in the arguments to fetch()
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Related
I am using authcodeflow with PKCE.
Using OIDC js library in the frontend, making calls to adfs getting an auth code and then calling my backend api. The backend api which calls adfs server get the access token and the backend api returns the token as a cookie to the frontend. I can see the cookie in response headers. but That cookie is not stored in browser and not getting added for subsequent requests. I have tried with samesite with all modes -> Lax, None,Strict and not setting.
Is this an issue with OIDC js library or is it blocking the cookies to store in browser?
Update:
Below are the observation with my analysis
Since the OIdc-client-js does not have an option to set flag "withCredentials" to true for the requests. There are no cookies send in the request and response cookies are ignored for the cross origin requests.This changes are marked as enhancement and still not completed in thier github repo.
https://github.com/IdentityModel/oidc-client-js/issues/1062
Is there any way to achieve with this library? or any other libraries for OIDC js
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
So you are issuing a cookie from an API domain that is a sibling of the WEB domain:
web.mycompany.com
api.mycompany.com
Cookie domain = .mycompany.com
POSSIBLE CAUSES FOR COOKIE BEING DROPPED
Maybe it is the withCredentials flag or maybe due to a lack of user gesture, since the user has not done anything explicit to navigate to api.mycompany.com, such as a browser navigation or clicking a link?
FORCING WITHCREDENTIALS
You can override the prototype like this in order to add the withCredentials property. This is a little hacky but you could limit usage based on the URL and it should let you know whether setting withCredentials resolves your problem:
let open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
open.apply(this, arguments);
this.withCredentials = true;
}
PROXYING VIA WEB DOMAIN WILL HAVE FEWER COOKIE ISSUES
In my blog post I do something similar to proxy messages containing a refresh token. I use the web's exact domain though, rather than using an API subdomain. This will never be impacted by browser restrictions.
so I am trying to request an authorization code from smartsheet using postman.
I created a new app on my smartsheet with the following url:
app url: https://localhost:3000/
redirect url: https://localhost:3000/callback
so I tried to use the
GET https://app.smartsheet.com/b/authorize
and input my client id, scope, repsonse_type, and state in postman
the result says there is an error and it did not direct me to a page where I am able to allow authorization.
I am expecting something similar to what the website says (http://smartsheet-platform.github.io/api-docs/#access-levels). I am not sure which part I did was wrong, I am wrong home for this volunteer work hence I do not have an appropriate url. I don't know if it's my urls that are causing the problem or there's something else.
thank you guys in advance
If you are building out the Smartsheet OAuth flow you will need to have a hosted environment where you can have requests sent and be able to open a page in a browser to authenticate to the Smartsheet account and select the Allow button to confirm the access token should be created and returned to your application.
For development purposes you can use a service like ngrok to create a publicly available URL for your localhost which will allow you to send and receive the necessary data from Smartsheet in your development environment.
Authorization tokens cannot be generated from the API - you must do them from the website. From the API documentation:
Click the "Account" button in the upper-right corner of the Smartsheet screen, and then click "Personal Settings".
Click the "API Access" tab.
Click the "Generate new access token" button to obtain an access token.
In my api, I have a /users endpoint which currently shows (eg address) details of all users currently registered. This needs to be accessed by the (Ember) application (eg to view a user shipping address) but for obvious reasons I can't allow anyone to be able to view the data (whether that be via the browsable api or as plain JSON if we restrict a view to just use the JSONRenderer). I don't think I can use authentication and permissions, since the application needs to log a user in from the front end app (I am using token based authentication) in the first instance. If I use authentication on the user view in Django for instance, I am unable to login from Ember.
Am I missing something?
UPDATE
Hi, I wanted to come back on this.
For authentication on the Ember side I'm using Ember Simple Auth and token based authentication in Django. All is working fine - I can log into the Ember app, and have access to the token.
What I need to be able to do is to access the user; for this I followed the code sample here https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md
I have tested the token based authentication in Postman, using the token for my logged in user - and can access the /users endpoint. (This is returning all users - what I want is for only the user for whom I have the token to be returned but that's for later!).
The question is how to do I pass the (token) header in any Ember requests, eg
this.store.findAll('user') .... etc
This is clearly not happening currently, and I'm not sure how to fix this.
UPDATE
Fixed it. Turns out that the authorize function in my application adapter was not setting the headers, so have changed the code to set the headers explicitly:
authorize(xhr) {
let { access_token } = this.get('session.data.authenticated');
if (isPresent(access_token)) {
xhr.setRequestHeader('Authorization', `Token ${access_token}`);
}
},
headers: computed('session.data.authenticated.token', function () {
const headers = {};
if (this.session.isAuthenticated) {
headers['Authorization'] = `Token ${this.session.data.authenticated.token}`
}
return headers;
})
Ember is framework for creating SPAs. These run in the browser. So for Ember to get the data, you have to send the data to the browser.
The browser is completely under the control of the user. The browser is software that works for them, not for the owner of the website.
Any data you send to the browser, the user can access. Full stop.
If you want to limit which bits of the data the user can read from the API, then you need to write the logic to apply those limits server-side and not depend on the client-side Ember code to filter out the bits you don't want the user to see.
I don't think I can use authentication and permissions, since the application needs to log a user in from the front end app (I am using token based authentication) in the first instance. If I use authentication on the user view in Django for instance, I am unable to login from Ember.
This doesn't really make sense.
Generally, this should happen:
The user enters some credentials into the Ember app
The ember app sends them to an authentication endpoint on the server
The server returns a token
The ember app stores the token
The ember app sends the token when it makes the request for data from the API
The server uses the token to determine which data to send back from the API
I'm writing an Android app which will authenticate itself using OAuth2 to a Web server under my control.
I'm using Apache Amber on the client side, and oauth2app with Django on the server side.
From the client, I can generate an authorization request, and start a browser Activity that goes to a page asking whether to allow the client access, and after answering in the affirmative, redirects to a page with a "code" parameter.
But how do I get the "code" back to my client, in order to make the subsequent access_token request?
Do I need to bypass the browser entirely? How would that work?
I believe you have a couple of choices here.
The redirect_uri parameter will indicate to the server where it should send the code.
From the ouath2app docs:
If a request is authorized, Authorizer:grant_response() will serialize an object into a JSON response will return a redirect response to the client’s redirect_uri with information on the authorization code passed as query string parameters (response_type CODE) or access token passed as URI fragments.
So armed with that:
If that value is a location on your server, then your mobile browser is going to get the value as part of the redirect. Specifically, you're trying to read the URI fragments in the redirect. I believe this is the intended usage for an application like yours. This blog post seems to have code that might be relevant, under the section "Retrieving the access token".
Alternatively, as you pointed out, you could send the token to a different handler on your server, and then pass it back to your client. It must the callback URL defined in the service.
I found a different blog post, specific to OAuth 2:
http://blog.doityourselfandroid.com/2011/08/06/oauth-2-0-flow-android/
The trick is to fire up a new Activity whose content is provided by a WebView (rather than a layout). You can attach a handler to the WebView that's called on the redirect to the page containing the "code" parameter.
Some of the specifics in the blog post concern Google APIs, but so far my experiments suggest that it will work in my situation.
In my App I need to communicate with my Django website. Some resources require authentication so I need user login.
But this does not happen in a browser or a web view. I need to use Object-C to issue a login request and handle the response - basically to store the session ID I guess.
On the web server side, how should I do this in Django? To have a stand-alone view for that and return JSON maybe? How can I get the newly generated session ID though?
I wouldn't get the session ID. I believe logging in a user is more geared toward a web interface. I would create an API that serves the resources you need in your app. http://en.wikipedia.org/wiki/Representational_state_transfer Authentication would probably be best suited for a private/public key pair or some other similar popular api authentication system.
You don't need to make any changes to your authentication system, save for maybe making sure the login form is usable on the smaller screen. Cookies work the same on iOS as they do on the web. You can display a modal UIWebView with your login form. After the user logs in, presumably you are setting a session cookie. If you make a subsequent request to the domain the cookie matches, the cookie should be sent along. You want to look into the HTTP 'Accept' header field, which specifies the content type the client expects to receive. In your controller (view?), you'll want to check the 'Accept' header, and return the appropriate content type, probably 'application/json' (or a custom type for your API).