I am using blueimp plugin to upload a file. It's working on local server but when I try to use a different domain file it doesn't save over there. Please help me with what I have to do. I have written the following code
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
xhrFields: {withCredentials: true},
url: 'http://192.168.1.205/EncoderService/API/Default.aspx'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
Is there any need to write code in the server side or not?
When I set WithCrentials: false
Its works for me.
Related
I want to consume an API using a proxy written in express. I use http-proxy-middleware for this. Here is the setup I have:
app.use(
createProxyMiddleware('/api', {
target: 'http://example.com/api/v2',
changeOrigin: true,
pathRewrite: {
'/api': '',
}
})
);
Then I make a request from postman or browser: GET http://localhost:8080/api/list?first=50
All I get from the API server is 404. I saw in the browser that the URL changes to http://localhost:8080/api/v2/list/?first=50 and I don't understand why.
All I want is to add an auth header which I managed to do using onProxyReq, but now I just want everything that comes after /api to be forwarded as is to http://example.com/api/v2.
I just got it to work. Turns out I had some things wrong. The first wrong thing target: 'http://example.com/api/v2' should be target: 'http://example.com'. Then, pathRewrite will rewrite anything it matches and redirect to the new path, so it ended up calling localhost:8080/api/list?first=50 and then localhost:8080/api/v2/list/?first=50. So with these 2 mistakes combined, in the end the API call would be example.com/api/v2/v2/list/?first=50 and that's clearly wrong. I replaced the target and I am now using /api/v2 as context for the proxy.
I would still like to call my proxy using localhost:8080/api/whatever and have it turned into example.com/api/v2/whatever, but it's just a nice to have.
Updating details to understand more: *In my project, user uploads html themes. For each user, if they authenticate, I am creating a public static folder for authenticated user in the same theme folder they are requesting. Then there is a editor in the front end where they can edit html theme contents. I am trying to show html themes in the editor using a iframe using the static link from backend. But the problem is I can't add script to the html theme in the iframe. It's saying permission denied. How can I solve this problem?
I am using express in backend and nextjs in frontend. I have added this code in helmet middleware.
app.use(
helmet({
contentSecurityPolicy: {
directives: {
'connect-src': ["'self'", 'http://localhost:3000'],
'default-src': "'self'",
'frame-ancestors': ["'self'", 'http://localhost:3000'],
sandbox: ['allow-forms', 'allow-scripts'],
'script-src': ["'self'", 'http://localhost:3000'],
},
},
})
);
For cross site scripting,
app.use(xss())
But still getting error in iframe.
From Backend I am trying to allow a route to be use in iframe in the frontend. Since, both server have different port in localhost, it's violating cross site embed and scripting. So, I am using helmet and xss package. I need help to configure it.
I am using iframe's onload attribute to check if it is loaded and then injecting another script to the iframe from frontend.
You have an issue of Same Origin Policy, not with Content Security Policy. Helmet package can't help you.
Set the value document.domain = 'example.com'; (example.com = 'localhost' in your case) both in the iframe and in the main page. It will reset port number to null and subdomain any.example.com to domain example.com, see test.
If both iframe and main page are on the same domain, you can just set document.domain = document.domain;.
Both variants leads resetting port number to null. therefore yoy'll be able to acces iframe with a different port number.
attempting to deploy a vuejs, express app to heroku. The app displays, but cannot access the api, because heroku seems to add 'undefined' in the middle of the base_url. Everything works locally as expected.
Here is my heroku config var:
BASE_URL: https://goore-todos.herokuapp.com/
Here is the Vuejs component api request:
fetchTodo () {
let uri = process.env.BASE_URL + '/api/all';
axios.get(uri).then((response) => {
this.todos = response.data;
});
},
As mentioned, this works locally.
the console shows the following error:
VM71:1 GET https://goore-todos.herokuapp.com/undefined/api/all 404 (Not Found)
and the view is empty.
requests to https://goore-todos.herokuapp.com/api/ via Postman work as expected.
In this case it looks like process.env.BASE_URL is undefined. As it is undefined, the url you're trying to access is considered to be relative. That means it uses your current domain and appends the path to it.
If your frontend and backend are running on the same domain there is no reason to try to pass the API url as a variable as you can just use relative URLs.
If you want to access the URL via an environment variable it is a bit trickier with a frontend app. The Vue app is running on the user's browser, not on your server so you can't directly access it.
I had this problem and had to go through and hard code all of my URLs with the heroku URL. I tried resetting the config variables in Heroku which had an extra slash at the end, but in the end hard-coding each API call was the only thing that fixed it.
I'm currently developing the frontend (VueJS) for a project and to test my login and register logics I'm using laravel as backend, though we'll be actually working with springboot for backend. I was coding in a desktop and everything was normal. So I just started to work with my laptop. I got the same project, everything is equal. When I use postman to make the requests, it works normally, but when I try to make them with the form from my website, I get that error.
I've looked everywhere but couldn't fix it. Nothing I tryed did work. And It seems that no one else had a similar problem.
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/login with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Add proxy configuration in vue.config.js file
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.
here is a link to the doc for more detail
Trying to deny to direct access to a json file, tried:
RewriteRule ^(api/|category\.json) - [F,L,NC]
but not working.
I used this file for an ajax call but i don't want anyone can access to this file directly.
$.ajax({
type: "POST",
dataType: 'json',
url: 'api/category.json',
success: function(data){
$.each(data, function(i,v) {
// do something
});
Wondering is there any method to do this? via htaccess or httpd.conf or etc?
AFAIK, if you can access the file with an HTTP GET command, which you'd have to do with the Ajax call, then you can also access the file and download it directly.
Sorry.
However, you can at least configure the Apache server to not allow direct indexing of that directory. Search for the "Options" directive in the httpd.conf file, and if it has an "Indexes" tag, either remove it or prepend a minus sign, e.g.,
Options -Indexes
That way, at least people won't know the file is there just by remotely perusing the directories.
You can "minimize" your Javascript file (the one containing your Ajax call) by removing all comments and whitespace. Search the web for tools that do this. Because, if somebody can read your Javascript, they can see exactly that your Ajax is fetching "api/category.json"; then of course they can too.
They still can read the "minimized" script anyway, plus there are tools to "de-minimize" it, but it may be enough trouble so that most people won't bother.
I'd suggest you try to avoid putting any really deep dark secrets in that file, because, bottom line, if your Ajax can fetch it, so can anybody else.