I have a app on 127.0.0.1:5000 that edits a page (html code)
If I need to edit a picture on that page using a specialized editor I select the picture and then I fire up a call to 127.0.0.1:8000/picture_editor?picture_url="127.0.0.1:5000/static/uploads/picture.jpg
All good so far, I am able to edit the picture and I have code that should send the results back to the parent window and integrate the changes in the editor
The problem is that this triggers a CORS (cross origins resource sharing) security exception and the call does not complete Here is the error:
svg-editor.html?picture_url=http://127.0.0.1:5000/static/uploads/picture.jpg&width=225&height=276:64 Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame.
What are my options to deal with this ? Is there any way to deal with this ? This is not really CORS site to site but rather the browser not allowing the communication betweek two windows that belong to different sites (although only the port differs)
My app is a flask application and I already enabled CORS there
app = Flask(__name__)
cors = CORS(app, resources={r"*": {"origins": "*"}})
But the browser is still reporting the above error.
Yes CORS has is actually specifically about this and it does not allow the code from a browser window accessing one site to interact with the code in another window that was loaded from another site
As far as my problem goes I found that the editor has an ES6 version that can be loaded without running the Node server (in my case the server running on port 8000)
Toying with the CORS setttings for flask and Node.js (have no clue how to do that) proved to be insufficient for Flask (the above did not solve my problem) and proved to be too difficult for me to do it on Node.js which I do not know anything about
Related
I have a baffling issue with cookie handling in a Blazor server app (.NET Core 6) using openid (Keycloak). Actually, more than a couple which are may or may not linked. It’s a typical (?) reverse proxy architecture:
A central nginx receives queries for services like Jenkins, JypyterHub, SonarQube, Discourse etc. These are mapped through aliases in internal IPs where the nginx can access them. This nginx intercepts URL like: https://hub.domain.eu
A reverse proxy which resolves to https://dsc.domain.eu. This forwards request to a Blazor app running in Kestrel in port 5001. Both Kestrel and nginx under SSL – required to get the websockets working.
Some required background: the Blazor app is essentially a ‘hub’ where its various razor pages ‘host’ in iframe-like the above mentioned services. How it works: When the user asks for the root path (https://hub.domain.eu) it opens the root page of the Blazor app (/).
The nav menu contains the links to razor pages which contain the iframes for the abovementioned services. For example:
The relative path is intercepted by the ‘central’ nginx which loads Jenkins. Everything is under the same Keycloak OpenID server. Note that everything works fine without the Blazor app.
Scenarios that cause the same problem
Assume the user logins in my app using the login page of Keycloak (NOT the REST API) through redirection. Then proceeds to link and he is indeed logged in as well. The controls in the App change accordingly to indicate that the user is indeed authenticated. If you close the tab and open a new one, the Blazor app will act as if it’s not logged in while the other services (e.g Jenkins) will show the logged in user from before. When you press the Login link, you’ll be greeted with a 502 nginx error. If you clean the cookies from browser (or in private / stealth mode) everything works again. Or of you just log off e.g. from Jenkins.
Assume that the user is now in a service such as Jenkins, SonarQube, etc. if you press F5 now you have two problems: you get a 404 Error but only on SOME services such as Sonarcube but not in others. This is a side problem for another post. The thing is that Blazor app appears not logged in again by pressing Back / Refresh
The critical part of Program.cs looks like the following:
This class handles the login / logoff:
Side notes:
SaveTokens = false still causes large header errors and results in empty token (shown in the above code with the Warning: Token received was null). I’m still able to obtain user details though from httpContext.
No errors show up in the reverse proxy error.log and in Kestrel (all deployed in Linux)
MOST important: if I copy-paste the failed login link (the one that produced the 502 error) to a "clean" browser, it works fine.
There are lots of properties affecting the OpenID connect, it could also be an nginx issue but I’ve run out of ideas the last five days. The nginx config has been accommodated for large headers and websockets.
Any clues as to where I should at least focus my research to track the error??
The 502 error shows an error at NGINX's side. The reverse proxy had proper configuration but as it turned out, not the front one. Once we set the header size to suggested size, everything played out.
I am trying (unsuccessfully) to get data from my django backend, developed on repl.it, to my flutter frontend, developed on FlutLab. On Flutter side, I get data successfully from, for example, https://jsonplaceholder.typicode.com/users. On Django side, I render my data normally and get data by Postman, also without problem.
But if my frontend send get() request directly to backend, I see just my circular indicator.
My URL on Flutter/Dio looks like
Response response = await Dio().get("https://djangobackend.myaccountname.repl.co/");
My ALLOWED_HOSTS on Django looks like
ALLOWED_HOSTS = ['djangobackend.myaccountname.repl.co', '0.0.0.0:3000', 'localhost', '127.0.0.1']
My browser is Chrome. My backend and frontend run on the same device (PC).
Actually I have no idea which host I need to use in this case, so, I just added all I could think of.
Is it possible to get data from my backend to frontend in this case and how to do it if yes?
If I need another IDE, please let me know. The limitation is: I can use online IDE only.
I also can provide more details if necessary.
All ideas are highly appreciated!
UPD: This is because of CORS policy, as you can see on attached screenshot.
Your problem is probably related to CORS policy. To check it, please, open Dev Tools => Console on your browser. Probably you need to add 'api.flutlab.io' and 'flutlab.io' to the "Access-Control-Allow-Origin" header on the server-side. If you need some more help, please attach screen or text of errors from the console mentioned above.
TLDR: React app's API calls are returning with status code 200 but without body in response, happens only when accessing the web app from some browsers.
I have a React + Django application deployed using nginx and uwsgi on a single centOS7 VM.
The React app is served by nginx on the domain, and when users log in on the javascript app, REST API requests are made to the same nginx on a sub domain (ie: backend.mydomain.com), for things like validate token and fetch data.
This works on all recent version of Firefox, Chrome, Safari, and Edge. However, some users have complained that they could not log in from their work network. They can visit the site, so obviously the javascript application is served to them, but when they log in, all of the requests come back with status 200, except the response has an empty body. (and the log in requires few pieces of information to be sent back with the log in response to work).
For example, when I log in from where I am, I would get response with status=200, and a json object with few parameters in the body of the response.
But when one of the users showed me the same from their browser, they get Status=200 back, but the Response is empty. They are using the same version of browsers as I have. They tried both Firefox and Chrome with the same behaviours.
After finally getting hold of one of the user to send me some screenshots. I found the problem. In my browser that works with the site, the API calls to the backend had Referrer Policy set to strict-origin-when-cross-origin in the Headers. However on their browser, the same was showing up as no-referrer-when-downgrade.
I had not explicitly set the referrer policy so the browsers were using each of their default values, and it differed between different versions of browsers (https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)
To fix this, I added add_header 'Referrer-Policy' 'strict-origin-when-cross-origin'; to the nginx.conf file and restarted the server. More details here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
The users who had trouble before can now access the site API resources after clearing cache in their browsers.
I tried to view youtube videos on my app and it didn't work. I checked the console and got this error message
Mixed Content: The page at'https://hispanicheights.herokuapp.com/blog/youtube-video/'
was loaded over HTTPS,but requested an insecure script
'http://content.jwplatform.com/libraries/WQWJdvRx.js'.
This request has been blocked; the content must be served over HTTPS.
Is there a way around this or is this just the situation until I get a paid account with a domain?
This has nothing to do with Heroku, paid plans or not. It is simply that you are linking to an http resource inside a page that is served by https; since that potentially side steps the man-in-the-middle protection that https gives you, modern browsers forbid it.
The solution is to serve all your dependent scripts via https as well.
I am getting errors thrown from google.g.doubleclick.net when I try to load google ads on my site through plain html.
Blocked a frame with origin "https://googleads.g.doubleclick.net" from accessing a frame with origin "https://example.com". Protocols, domains, and ports must match.
Oddly enough I have a section of my site where I add some ads through javascript and that section does not throw any errors.
I read about adding a crossdomain.xml to the site root and I tried that (and also serving it with NGINX and that does not work either...
Is there any way to add an exception to django's CSRF rules, or any other way to get around this? It is driving me nuts. This error is only thrown in safari (only tried safari and chrome) but it adds a LOT to the data transfer for loading the page and I do not want things to be slowed down.
This has nothing to do with CSRF, but rather this has to do with the same origin policy security restriction which you can fix by implementing CORS and sending the appropriate headers.
You can use django-cors-headers to help with this.