I am writing the backend flow of SAML2 integration, using Okta as an IDP (Identity Provider) and myself as a SP (Service Provider).
I am using python 3.5 and flask, and writing the flow with Onelogin's library - python3-saml using this manual https://github.com/onelogin/python3-saml.
When executing the command auth.login, which redirects me to Okta, I get the following error:
Failed to load https://dev-766941.oktapreview.com/app/<domain_name>dev766941_<domain_name>_1/exkfytpisliPsvo8w0h7/sso/saml?RelayState=https%3A%2F%2Ftest.<domain_name>.com%2Fapi%2Fauth%2Flogin%2Fsaml%2F&SAMLRequest=fVNdj9owEHy%2FXxHlHRxzaQgWIFHoBxKFCGgf%2BoJ8zuawLrFTrwPcv68duMJJPaJIUdazs7Oz6yHyqqzZpLF7tYY%2FDaB9CIJTVSpk7dEobIximqNEpngFyKxgm8mPBet1I1YbbbXQZfgu6X4ORwRjpVY%2BaT4bhavll8Xq23y5ix6fkjjOCxrlRT8q0gF9TIrCBdKU9wc0Sfo07cVx4hN%2FgUHHMQodZUuE2MBcoeXKumBE0w6N3LulEYsjRj%2F99qiZ608qbtvMvbU1MkJyOHT6STKIaVe%2FWF4bOEg4doWuCK9rwk0l0WHOkF37u6METi%2FFq60lljLDg06P0b5PEDXxDvha2cWbz1LlUj3fN%2BXpDEL2fbvNOtlqs%2FUUkzerplphU4HZgDlIAT%2FXi6t863rq9bqtrla0Uy0JdxMlpX6WinCBJBw7uiAYenGs9cqMPyaowPKcW06G5DbhSlGzpWthPst0KcVrG%2FfPV20qbj%2FulHZpG5F5p2ihrFFYg5CFhDz8RzMpS32cGuAWRqE1DYQBeVf8sqmQt3vrzLFwssFUVzU3Ev1s4cSFvTR9bfwWPi3dIq6hGN%2FdVcGEx7lw5j5HbXI%2FVhCu9tZwJ14bezHpv%2BRn1eSO7PHD2%2FHtJRz%2FBQ%3D%3D: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://test.<domain_name>.com' is therefore not allowed access.
I added https://test.domain_name.com to the "Trusted Origins" in my okta settings page using this manual https://developer.okta.com/docs/api/getting_started/enabling_cors and it didn't help ( I tried adding to CORS and to Redirect and also each one separately).
I also tried to add https://developer.okta.com to the "Trusted Origins" and it also didn't help.
One last thing I tried was adding the header Access-Control-Allow-Origin to the request, but it didn't add the header to the Okta request but to the request I have in my code (meaning, it added the header to the request that calls a function, auth.login, that internally calls to Okta instead to the request to Okta).
I would be very happy for any suggestions.
Related
I am developing an Outlook taskpane add-in in Angular and when the user clicks on the add-in button, i want to use Client Credential Flow to call a Protected Web API.
I tried using normal httpClient and do a POST request like below
let body=new HttpParams();
body=body.set("grant_type","client_credentials");
body=body.set("client_id","xxxxxxx");
body=body.set("client_secret","xxxxxx");
body=body.set("scope","https://xxxxxx/.default");
const url="https://login.microsoftonline.com/xxxxx/oauth2/v2.0/token";
this.httpClient.post(url,body)
I am getting the CORS error like below
Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxxx/oauth2/v2.0/token' from origin 'https://xxxx.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..
Is there any way to resolve this error ? Tried to use MSAL as well here, but I couldn't find any documentation on Client Credential Flow for JS. It is available only for .NET
1.You should never put the client secret in the front-end.This is very unsafe!
2.We suggest you use https://github.com/AzureAD/azure-activedirectory-library-for-js. for frontend to integrate AAD with a ease.You can refer to No 'Access-Control-Allow-Origin' header with Microsoft Online Auth for details.
client_credentials grant_type is used in app only scenario. If you must use client credential flow, you need to get the access token in your app's backend and return it to the frontend.
I have react app what I already deployed to the GitHub Pages.
But now I have a problem: what I am requesting auth status to server and didn`t get any response. What is the problem?
I have this error in console about my requests
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
GitHub pages supports CORS since 2015, so you can follow "Fix CORS Error| React Tutorial" which points to:
"Run Chrome browser without CORS" (not recommended, just for testing)
axios/axios issue 853
That last issue mentions:
cURL does not enforce CORS rules. Those rules are enforced by browsers for security purposes.
When you mention that you added the relevant header, I assume you mean you added those headers to the request.
Actually, the header is expected in the response headers from the server, indicating that the resource is allowed to be accessed by other websites directly.
FYI, CORS - Cross Origin Resource Sharing. Since your API does not support it, you have two options -
Use a proxy server on the same domain as your webpage to access 4chan's API or,
Use a proxy server on any other domain, but modify the response to include the necessary headers.
I succesfully installed "JWT Authentication for WP REST API" and followed (and reviewed multiple times) the instructions for setup correctly.
My React app does authenticate via the /jwt-auth/v1/token-endpoint.
I get a token back and store this in my localStorage.
All of my API-calls get added an authorization header as follows from this point on:
Authorization: Bearer mYCust0mToken
In the browser, this triggers preflight requests to the server (which is a remote one), that all fail. Basically logging in kills all of my API-requests.
I'm now getting 405's stating the following:
Access to fetch at
'https://mywebpage.com/wp-json/wp/v2/posts/'
from origin 'http://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. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
I run WP inside a subdir, so I have two .htaccess files, one in the root, one in the wp/-directory. I've tried putting the suggested .htaccess-changes of the descriptions in both files, on several positions of the file, but still no luck.
I've also tried setting Allow-Origin headers to "*", just for the sake of testing. I did that in both the .htaccess-files, but also in my PHP.
Anyone out there that got "JWT Authentication for WP REST API" up and running and willing to tell how?
Can someone tell me how to set CORS filter on XS advanced server. Currently all request calls from client application(angular) are rejected with message:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access. The response had HTTP status code 403.
XSA don't have .xsaccess file like XS server. By default XSA should accept all CORS requests but this is not the case.
I suppose that your client is angular app and you have some other "backend" app deployed on XSA.
First of all, your "backend" app (java, nodejs,...) should be part of multi target application. When you build this app, you will get .mtar (mulri target archive) which then should be deployed to XSA.
Also you need to create one more module as part of MTA. The module/app type should be html5 type, and commont practice is to call it web
web module acts as an application router and there is a file xs-app.json where you can specify route rules and also cors settings. It is a useful feature because you can manage the securty in that way.
I followed the instructions found in the readme in the stormapth-sdk-react github respository to set up a basic login form. The form displays, but I am immediately greeted by errors in the console:
XMLHttpRequest cannot load https://{redacted}.apps.stormpath.io/me. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
I get an identical error for the login endpoint.
The Client API Guide indicates that client endpoints have to be configured to allow traffic from a particular domain, but does not provide any instructions for how to do this:
Applications that use the Client API have two relevant configuration parameters, both found on your Application’s page in the Stormpath Admin Console:...
Authorized Callback URIs: This list should include any URIs that your users will be returned to after they have completed authentication with an outside provider, for example as a part of the social login flow. For example, if you do not specify a redirect URI when you kick off the social login flow, the user will be redirected the first URI in this list.
Authorized Origin URIs: This list should include the application’s URL, or whatever URL will be included in the Origin header of requests sent to the Client API.
What do I need to do to get this working?
To fix this, you can login to https://api.stormpath.com, navigate to Applications > My Application, and modify the Authorized Origin URIs to include http://localhost:3000.
Stormpath seems to use a pretty similar setup to many API services. Like the directions say, go to your Stormpath Admin Console, and put your hostname (http://localhost:3000) in the relevant fields for both 1. and 2.
Doing so tells the Stormpath API to allow data to be sent to your application.
The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.
As the server you are using (for react) differs from the server you are requesting data(node or something else). (even the subdomain or port matters)
index.js: (server)
const cors = require('cors');
..
..
app.use(cors());
for more info about using cors: npm cors