I am using Stomp to establish a connection between frontend and backend. I use alb ingress to do the proxy and use Ocelot as API gateway to do the authentication. It works fine with normal http request. I did some search, seems like it is not possible to set a header for Stomp. A workaround that I came up with is to pass the token as part of the URL. However I do not know how to get it in Ocelot or in ingress. I used #stomp/stompjs this package for stomp. My frontend uses React and backend is Java spring
The configuration for the stomp client
client.configure({
brokerURL: 'wss://localhost:8080/stomp',
connectHeaders:{
'Authorization': `Bearer ${access_token}`,
}
});
The Ocelot part
{
"DownstreamPathTemplate": "/stomp",
"DownstreamScheme": "ws",
"DownstreamHostAndPorts": [
{
"Host": "backend",
"Port": 8080
}
],
"UpstreamPathTemplate": "/stomp",
"UpstreamHost": "localhost",
"AuthenticationOptions": {
"AuthenticationProviderKey": "ProjectAPI",
"AllowedScopes": [
"project-api"
]
},
"AddHeadersToRequest": {
"tenantId": "Claims[tenantId] > value > |"
}
}
What is the best way to do it?
Related
My Feathers application needs to be able to have two JWT authentication strategies. For the users service, I need to have, for example, all: [authenticate('carrier')] instead of all: [authenticate('jwt')] in my hooks. For the rest of the services, authenticate['jwt'] is needed.
For this, I have registered a custom strategy in authentication.js called CarrierStrategy as following:
module.exports = function auth(app) {
const authentication = new AuthenticationService(app)
// register all of the strategies with authentication service
authentication.register('carrier', new CarrierStrategy())
authentication.register('jwt', new JWTStrategy())
// register the authentication service with your app
app.use('/api/authentication', authentication)
}
In config/default.json, I have also registered this strategy as following:
authStrategies: ["carrier", "jwt"]
The CarrierStrategy needs to handle the incoming Authorization header a little differently with some custom logic.
When I use Postman to send requests for this service, i.e., localhost:3030/users with a JWT token in the header, I get the following error.
Invalid authentication information (strategy not allowed in authStrategies)'
Please guide me if this is the right way to add a custom strategy to the application.
I had a similar problem to this. I wanted both Stateful and Stateless JWT authentication. The problem being that if you just do this in authentication.js
authentication.register('jwt', new JWTStrategy());
authentication.register('jwt-stateless', new JWTStrategy());
Then when you submit a request with a JWT token it will match on either one and you'll end up with a problem in one of your services somewhere.
I ended up creating a custom strategy like this in authentication.js:
class StatelessJWTStrategy extends JWTStrategy {
get configuration () {
const authConfig = this.authentication.configuration;
const config = super.configuration;
return {
...config,
entity: authConfig.entity,
service: authConfig.service,
header: 'Authorization',
schemes: [ 'STATELESS' ]
};
}
}
which is basically a slightly modified JWTStrategy that uses STATELESS in the Authorization header instead of Bearer or JWT. It's not a great solution, but it works.
Then I did this also in authentication.js
authentication.register('jwt', new JWTStrategy());
authentication.register('jwt-stateless', new StatelessJWTStrategy());
Then you need to modify your config.json file. In the authentication section add this:
"jwt-stateless": {
"entity": null
},
"jwt": {
"entity": "user",
"service": "users"
},
"entity": "user",
"service": "users",
"authStrategies": [
"jwt-stateless",
"jwt",
"local"
],
Now you should be able to use the jwt-stateless auth mechanism in your hooks like this:
authenticate('jwt-stateless')
Head over to here to create your stateless JWT. Fill in iss with the issuer and aud with audience details from your config.json, and add a user ID to the sub field. Pop your secret from config.json in the bottom signature verification field and the token on the left should authenticate.
I am creating a serverless app using IBM Cloud Functions. My Cloud Functions API is secured with OAuth user authentication using an IBM Cloud App ID service. When a user logs into my app, an access token is generated by this service. I want to extract user data from that access token so that I can customize the user experience.
How do I access that token from within a Cloud Functions action that is coded for Node.js 10?
Example
The openwhisk webaction doc
https://github.com/apache/openwhisk/blob/master/docs/webactions.md
states that the following code
function main(params) {
return { response: params };
}
generates the following response
{
"response": {
"__ow_method": "get",
"__ow_headers": {
"accept": "*/*",
"connection": "close",
"host": "172.17.0.1",
"user-agent": "curl/7.43.0"
},
"__ow_path": ""
}
}
From that data I should be able to get HTTP request details. Specifically, I should be able to get the Authorization header value off the "__ow_headers" property of the action argument (params).
However, the same code inside an IBM Cloud Functions web action generates nothing. Nothing exists on the params object.
I build an app use vue and codeigniter, but I have a problem when I try to get api, I got this error on console
Access to XMLHttpRequest at 'http://localhost:8888/project/login'
from origin 'http://localhost:8080' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed
by Access-Control-Allow-Headers in preflight response.
I have been try like this on front-end (main.js)
axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
and this on backend (controller)
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
and vue login method
this.axios.post('http://localhost:8888/project/login', this.data, {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err.response);
});
I've searched and tried in stackoverflow but does not work, how I can solve it? thank you so much for your help
CORS is the server telling the client what kind of HTTP requests the client is allowed to make. Anytime you see a Access-Control-Allow-* header, those should be sent by the server, NOT the client. The server is "allowing" the client to send certain headers. It doesn't make sense for the client to give itself permission. So remove these headers from your frontend code.
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
this.axios.post('http://localhost:8888/project/login', this.data, {
headers: {
// remove headers
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err.response);
});
For example, imagine your backend set this cors header.
header("Access-Control-Allow-Methods: GET");
That means a client from a different origin is only allowed to send GET requests, so axios.get would work, axios.post would fail, axios.delete would fail, etc.
This may occur you are trying call another host for ex- You Vue app is running on localhost:8080 but your backend API is running on http://localhost:8888
In this situation axios request looking for this localhost:8080/project/login instead of this http://localhost:8888/project/login
To solve this issue you need to create proxy in your vue app
Follow this instruction Create js file vue.config.js or webpack.config.js if you haven't it yet inside root folder
then include below
module.exports = {
devServer: {
proxy: 'https://localhost:8888'
} }
If you need multiple backends use below
module.exports = {
devServer: {
proxy: {
'/V1': {
target: 'http://localhost:8888',
changeOrigin: true,
pathRewrite: {
'^/V1': ''
}
},
'/V2': {
target: 'https://loclhost:4437',
changeOrigin: true,
pathRewrite: {
'^/V2': ''
}
},
}
}
If you select the second one in front of the end point use the V1 or V2
ex - your end point is /project/login before it use V1/project/login or V2/project/login
as per the host
Check this Vue project - https://github.com/ashanoulu/helsinki_city_bike_app/tree/main/Front_End/app-view
Version - Vue3
For more details visit - Vue official documentation
in my case
curl && postman works but not vue axios.post
Access to XMLHttpRequest at 'http://%%%%:9200/lead/_search' from origin 'http://%%%%.local' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
So, the issue is on vue side not the server!
The server response contains "access-control-allow-origin: *" header
I had the same problem even everything was fine on the server side..
The solution to the problem was that API link I hit was missing the slash (/) at the end so that produced CORS error.
in my case adding this in my php backend API function it worked
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
header("Access-Control-Max-Age", "3600");
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
header("Access-Control-Allow-Credentials", "true");
You may try :
At the backend,
npm install cors
then, at the backend app.js , add the following,
const cors = require('cors')
app.use(cors({
origin: ['http://localhost:8082'],
}))
Hopefully, It may help.
Dev Proxy is your solution
With DevProxy you define a specific path, or a wildcard (non static) that Node (the server runs vue-cli dev server) will route traffic to.
Once defined (a single entry in vue.config.js), you call your api with the same URI as your UI (same host and port) and Vue is redirecting the request to the API server while providing the proper CORS headers.
look more at https://cli.vuejs.org/config/#devserver-proxy
I'm building an app in Vue.js and added global headers in the main.js file
Example:
axios.defaults.headers.get['header-name'] = 'value'
For handling CORS issues you may now have to make changes on the client side, it is not just a server issue.
Chrome has a few plugins: https://chrome.google.com/webstore/search/cors?hl=en
for some cases, it is not vue issue. sometimes it's back-end issue.. in my case I've made API in nest JS, and I didn't enable CORS = true.. That's why I am getting CORS policy error.
in my case, the API would return CORS policy, but the problem lied with my url.
my calls were like "https://api.com//call", that extra slash was causing the problem.
changing the url to "https://api.com/call" fixed the error.
I have:
An JavaScript Azure Function in an HTTP webhook configuration; the Function provides a URL; the Function performs an action
A webhook configured in the software I hope to receive notifications from
An Azure Logic App with an HTTP/webhook step that provides a URL for the webhook notification to go to
My goal is that the Azure Function's URL receives notifications from the software's webhook and performs an action. The Azure Logic App is for testing only.
What works
When the the Azure Logic App's URL is used in the software's webhook configuration, the desired action is performed. All works as expected.
The Azure Logic App's logging shows the JSON output from the incoming webhook. I expect (but believe this may be where I am going wrong) that this is the JSON the webhook is sending to the Azure Logic App's URL. When this JSON is used in the Azure Function UI's "Test" tab > "Request body" field, the desired action is performed. All works as expected.
When the Azure Function's URL and the JSON is in a Postman request, the desired action is performed. All works as expected.
What doesn't work
When the Azure Function's URL is used in the software's webhook configuration, no action is performed. This is of course my goal. From everything I have read, I understand that this URL as a webhook endpoint should work.
Azure Function's URL
This is from Get function URL > default (Function key).
https://<app_name>.azurewebsites.net/api/content?code=<api_key>
Other Azure Function config settings
Allowed HTTP methods: GET, POST
Authorization level: Function
The JSON I believe to be coming over the webhook
{
"headers": {
"Expect": "100-continue",
"Host": "redacted",
"X-Telligent-Webhook-Sender": "redacted",
"Content-Length": "16908",
"Content-Type": "application/json; charset=utf-8"
},
"body": {
"events": [{
"TypeId": "ec9da4f4-0703-4029-b01e-7ca9c9ed6c85",
"DateOccurred": "2018-12-17T22:55:37.7846546Z",
"EventData": {
"ActorUserId": 9999,
"ContentId": "redacted",
"ContentTypeId": "redacted",
"ForumReplyId": 9999,
"ForumThreadId": 9999,
"ForumId": 9999
}
}]
}
}
I also tried with the following test code for the same results. It aligns more closely with the sample payload data provided by the software company:
What I tried
{
"events": [{
"TypeId": "ec9da4f4-0703-4029-b01e-7ca9c9ed6c85",
"DateOccurred": "2018-12-17T22:55:37.7846546Z",
"EventData": {
"ActorUserId": 9999,
"ContentId": "redacted",
"ContentTypeId": "redacted",
"ForumReplyId": 9999,
"ForumThreadId": 9999,
"ForumId": 9999
}
}]
}
Sample payload data
{
"events": [
{
"TypeId": "407ad3bc-8269-493e-ac56-9127656527df",
"DateOccurred": "2015-12-04T16:31:55.5383926Z",
"EventData": {
"ActorUserId": 2100,
"ContentId": "4c792b81-6f09-4a45-be8c-476198ba47be"
}
},
{
"TypeId": "3b75c5b9-4705-4a97-93f5-a4941dc69bc9",
"DateOccurred": "2015-12-04T16:48:03.7343926Z",
"EventData": {
"ActorUserId": 2100,
"ContentId": "4c792b81-6f09-4a45-be8c-476198ba47be"
}
}
]
}
I do not know how to determine why the Azure Function is not triggered by the webhook. The software's API documentation does not seem to provide a way to look at the JSON being sent over the webhook, although in my inexperience I may be wrong.
Is there a mechanism within Azure, or Postman, or another tool that lets me see what JSON is being sent over the webhook? Or perhaps is there another approach to determining the cause of the issue?
Thank you for any help.
This is how I got the JSON file from Azure alerts.
Install Ruby on the server
Install Sinatra with following command gem install sinatra
Create file webhook.rb and paste code bellow
require 'sinatra'
set :port, 80
set :bind, '0.0.0.0'
post '/event' do
status 204 #successful request with no body content
request.body.rewind
request_payload = JSON.parse(request.body.read)
#append the payload to a file
File.open("events.txt", "a") do |f|
f.puts(request_payload)
end
end
Run the web service with command ruby webhook.rb
JSON fill be written to file events.txt
I have an OData service that returns the following json.
{
"#odata.context":"http://testing.test.com/DataService/Data","value":[
{"ID":1,"Description":"Test 1"}
,{"ID":2,"Description":"Test 2"}
,{"ID":3,"Description":"Test 3"}]
}
If both the odata service and the web page calling the odata service are on localhost then all works fine.
If the odata service is on a host like testing.test.com and the web page calling the odata service is on localhost then all does not work fine.
I can see in fiddler that the data is coming back to the client on localhost but the grid never displays the data.
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost/DataService/Data",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
schema: {
data: "value",
model: {
id: "ID"
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "ID", title: "ID", width: 70 }]
});
});
</script>
The odata is hosted through ASP.NET web api odata not wcf.
The web client is hosted through ASP.NET web application general html.
I read somewhere that I might have to set crossDomainScriptAccessEnabled="true" in the web.config but the seems to only be for WCF webHttpBinding. Yet I am using WEB API not WCF.
Finally got it to work.
The ASP.NET Web API Odata service had to be modified to enable CORS (Cross-Origin Requests).
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
http://blogs.telerik.com/kendoui/posts/11-08-24/cross-domain_queries_to_odata_services_with_jquery