I have a functioning logout button which successfully ends a session established using express server ExpressOIDC/express-session. The OIDC sessions and the user is redirected to the logged out view. The logout button html is shown here:
<form v-if="authenticated" method="POST" action="/logout" id="auth-logout-form" v-cloak>
<span class="user-name">{{userName}}</span>
<input type="submit" value="Logout" />
</form>
I simply want to mimic this function in my code for inactivity logout.
First I tried a simple $.post('logout'). But this produces the following errors:
Access to XMLHttpRequest at 'https://xxxxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=xxxxxxxxx&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F' (redirected from 'https://localhost:3000/logout') from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jquery.min.js:2
GET https://xxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=XXXXXXXXXXXXXXXX&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F net::ERR_FAILED
I then tried this ajax call:
if (this.currSeconds >= 5 && this.authenticated === true) {
// this.logoutOIDC
$.ajax({
url: 'logout',
method: "POST",
headers: {
'Access-Control-Allow-Origin': 'https://localhost:3000/',
},
type: 'dataType',
/* etc */
success: function(jsondata) {
console.log(jsondata)
},
})
}
This produces the same errors.
Of course, "$('#auth-logout-form').trigger('submit')" works great, but it does not seem like the proper approach, and I believe this leaves logout functionality too easily disabled.
The suggestion from Okta was to go ahead and use $('#auth-logout-form').trigger('submit') if I was going to use the middleware. There may be another way, but this method was suitable under the circumstances.
Related
I tried using ajax to fetch my data from database and display it in my blade without refreshing it but when I applied the same steps to fetch different data for the other blade i get this error :
POST http://localhost:8000/barangay/fetch 500 (Internal Server Error)
jquery-3.3.1.js:9600.
Here is the code that needs fixing:
This is my blade:
Here is my ajax script:
Here is my router to fetch the barangays that belonged to the selected city:
Here is my code in my controller to get the data:
and here in here is the output (error :returns nothing):
Laravel uses the CSRF token in post request, so you required to add header in your ajax request something like this:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
for more more details you can use https://laravel.com/docs/5.8/csrf
In addition to checking for the CSRF token as a POST parameter, the VerifyCsrfToken middleware will also check for the X-CSRF-TOKEN request header. You could, for example, store the token in an HTML meta tag:
<meta name="csrf-token" content="{{ csrf_token() }}">
Then, once you have created the meta tag, you can instruct a library like jQuery to automatically add the token to all request headers. This provides simple, convenient CSRF protection for your AJAX based applications:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
By default, the resources/js/bootstrap.js file registers the value
of the csrf-token meta tag with the Axios HTTP library. If you are
not using this library, you will need to manually configure this
behavior for your application.
I am working on a mobile app. I need to fetch some data from WordPress website but the http request always through error Response for preflight has invalid HTTP status code 403
Typescript
this._http.post('http://www.example.com/wp-admin/admin-ajax.php',{
'action' : 'get_votes',
'postId' : 123456
})
.subscribe(data=>{
console.log(data);
},error=>{
console.log(error);
})
jQuery
The same thing is working in jQuery on local server
$.ajax({
url: 'http://www.example.com/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'JSON',
data: {
'action': 'get_votes',
'postId': 123456
},
success: function(result) {
console.log(result);
},
error: function(error) {
console.log(error);
}
});
The cordova-plugin-whitelist is already installed.
config.xml
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
If you are testing with web browser, there you need to allow origin access for web browser. with chrome use plugin and configure it https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
If you are using with real device and it is still not working try to use header('Access-Control-Allow-Origin: *'); with your server side API file.
More Info here.
This is a CORS (cross-domain) issue. Your browser (not Angular) is sending an OPTIONS request before sending the actual POST request. Effectively, your server discards the OPTIONS request as not authenticated (or forbidden in your case). Please read this answer for more info.
Have you tried to set a 'content-type' header as 'application/x-www-form-urlencoded' or 'multipart/form-data'? I think is would result in the browser not to send an OPTIONS request before sending the POST request.
So, even if you solve the first problem (with the lack of OAuth header), you may still not be able to POST, because of the second problem.
You can also try and install the Chrome Allow-Control-Origin extension.
you can use ionic proxy to work arround the CORS problem,
ionic.config.json
"proxies": [
{
"path": "/api",
"proxyUrl": "http://www.example.com/wp-admin/admin-ajax.php"
}
]
and you call it this.http.post("/api")
I'm trying to login from one of my servers to another in order to send cross-origin requests that requires being logged. is it possible?
I have two web servers, A and B. Lets say www.a.com and www.b.com.
B has an API that can be used only if the client is logged in. I need to use that API from A clients.
So, I send from A client an ajax (post) login request to B. B responses with CORS headers, the session cookie and a successful redirection to B's home/index.
But when I make a second ajax request (jsonp request) from A client to B server, this request doesn't send the previous session cookie received, therefore the login request failed.
If I login to www.b.com manually (in a second browser tab), all requests from A to B are successful detected as a logged user, so, the B API works from A.
I think that the session cookie received from my login requests is not being saved to the browser.
This is my login request:
$.post("www.b.com/login", { 'j_username': 'username', 'j_password': 'password' } );
Using:
jqXHR.withCredentials = true;
settings.crossDomain = true;
Response headers:
Access-Control-Allow-Headers:x-requested-with
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Origin:*
...
Location:http://www.b.com/home
...
Set-Cookie:JSESSIONID=tY++VWlMSxTTUkjvyaRelZ0o; Path=/
The cookie received is being saved to www.a.com or to www.b.com? How can I set this cookie to www.b.com from an A client ajax request? I think that is the problem.
As apsillers said, we can't use the wildcard Access-Control-Allow-Origin:*.
But this doesn't solved the problem.
I was setting jqXHR.withCredentials = true; inside a beforeSend handler function.
$.post({
...
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
...
});
And for some reason, this doesn't work. I had to set the use of credentials directly:
$.post({
...
xhrFields: {
withCredentials: true
},
...
});
This code works perfectly !
Thanks you.
There seems to be a problem if you use the SDK login function to login while the user is connected to another network. All the API calls fail and there seems to be no way to get back to the home network to authenticate.
Here is the code required to test this problem:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Yammer Login</title>
<script type="text/javascript" data-app-id="{INSERT APP ID}" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
</head>
<body>
<div id="Envelope">
<div><span id="yammer-login"></span></div>
<div><input type="button" onclick="getUserInfo()" value="Get User Info"></div>
<script>
yam.connect.loginButton('#yammer-login',
function (resp) {
console.log(resp);
});
function getUserInfo() {
yam.platform.request({
url: 'users/current.json',
method: "GET",
success: function (r) { console.log("GOT RESPONSE"); console.log(r); },
error: function (r) { console.log(r.statusText) }
});
}
</script>
</div>
</body>
</html>
If the user is logged into their home network the login code works and you can press the button to get the users information (note javascript origins are correctly configured).
You you go into the yammer interface and select another network it not longer works.
Here is what the console output looks like:
GET https://www.yammer.com/platform/login_status.json?
client_id={Client ID} 403 (Forbidden)
platform_js_sdk.js:26 XHR finished loading: GET "https://www.yammer.com/platform/login_status.json?client_id={ClientID}".
test.php:18 Object {access_token: Object, success: true, status: "connected", authResponse: true}
api.yammer.com/api/v1/users/current.json:1 GET https://api.yammer.com/api/v1/users/current.json
test.php:1 XMLHttpRequest cannot load https://api.yammer.com/api/v1/users/current.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://webserver.com' is therefore not allowed access. The response had HTTP status code 401.
test.php:26 error
api.yammer.com/api/v1/users/current.json:1 GET https://api.yammer.com/api/v1/users/current.json
test.php:1 XMLHttpRequest cannot load https://api.yammer.com/api/v1/users/current.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://webserver.com' is therefore not allowed access. The response had HTTP status code 401.
test.php:26 error
It appears that the login token that is being uses belongs to the other network and therefore access is restricted.
Based on Yammer REST API: How to get access tokens for external networks?
you need to apply to deploy to the Global App Directory. Specify by e-mail to the Biz Dev rep that your app requires Global Access (even without being published in the App Directory). This resolves the issue.
see slide 5 of http://about.yammer.com/assets/yammer-apps-next-steps.ppt
I am working on a web application built using Spring framework. I am getting Invalid CSRF Token error. I see this behavior only in Chrome browser. Following are the steps followed:
Login to the application by providing userName and password
Click on Logout button to logout. The user will be re-directed to the login page
Then, in the login page again try to login. I am getting the below error
Invalid CSRF Token 'd82dfa89-81b1-449e-9ef5-cdd32957e7f3' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.
Spring security configuration:
http.
addFilter(headerAdminFilter).
authorizeRequests().
regexMatchers("/login.*").permitAll().
regexMatchers("/api.*").fullyAuthenticated().
regexMatchers("/jolokia.*").hasRole(ADMINISTRATOR).
regexMatchers("/appadmin.*").hasRole(ADMINISTRATOR).
regexMatchers(".*").fullyAuthenticated().
and().
formLogin().loginPage("/login").successHandler(new RedirectingAuthenticationSuccessHandler()).
and().
exceptionHandling().authenticationEntryPoint(new RestAwareAuthenticationEntryPoint("/login"));
HTML code for Logout button:
<a id="logout-button" ng-click="ac.logout()" href="/login">Log Out</a>
AngularJS code for logout function:
this.logout = function () {
$http.post("/logout");
}
The following javascript snippet fixes stale CSRF token. The idea is to fetch a fresh token when the user tries to submit the login form and update the CSRF value in the form before the form is actually submitted.
$(document).ready(function() {
$("form[method=post]").submit(function(event) {
var form = this;
$.get("csrf-token", function(content) {
$(form).find("input[name=_csrf]").val(content);
form.submit();
});
event.preventDefault();
});
});
You need a /csrf-token mapping on the server side that returns the current CSRF token.