Django cannot embed a Youtube url in a frame - django

I am trying to embed a youtube URL into a frame in a Django template. Each time I receive the same message in the console:
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
I have tried inserting two decorators before the view:
#frame_deny_exempt
#xframe_options_exempt
No effect. In a final test I inserted this statement into settings.py just to see if it would turn off the xframe check:
X_FRAME_OPTIONS = 'ALLOWALL'
The same error appears.
I also tried removing the XFrameOptions middleware, no change.
This is in a local testing environment so I am using the Django web server, my production server (which I have not tried moving this to for obvious reasons) is an Azure instance running NGINX

Are you using an embeddable URL?
https://support.google.com/youtube/answer/171780
It is YouTube that is providing the X-Frame-Options header that the browser is complaining about, which implies you are trying to embed the normal URL to the video.

Related

My Flutter frontend on FlutLab does not see my Django backend on Repl.it

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.

Why is GET and POST request converting to OPTIONS request for cross-origin request for django rest framework and reactjs frontend?

I was looking to run my django and reactjs web application on mobile by connecting it to mac via hotspot, and changing the host to the ipaddress of the mobile. Thus, I changed my localhost to 192.168.43.19 in /etc/hosts/, and thus, my code is easily shared between mobile and mac, and I am able to run the localhost app on my mobile which is connected to mac via hotspot.
The backend is created in django rest framework. The problem is that all the get and post calls to the api created in the backend in django is being converted to options calls, and thus there are no returns, and the code is not working properly. While searching online, it said that the issue is because by default Access-cross-origin-policy is not allowed. To try handling the issue, I added the frontend url in CORS_ORIGIN_WHITELIST in the settings file of the django app, but it didnt work.
The CORS_ORIGIN_WHITELIST value set is the one, where the react code is being run. It is
CORS_ORIGIN_WHITELIST = (
'http://192.168.43.194:3000',
)
It will be really helpful, if someone could recommend me the correct way to handle this?

Cloudinary direct unsigned upload with django

I am using the cloudinary sample django project:
https://github.com/cloudinary/cloudinary-django-sample
I made the following changes:
- using django 1.8.6
- using cloudinary 1.4.0
- added CLOUDINARY_URL environment variable
- added cloudinary_cors.html file (provided by cloudinary) in static/html directory
I can perform server-side upload and everything works fine.
When I perform browser upload (signed or unsigned), the image selected uploads to my cloudinary account successfully, but the cloudinarydone event never occurs and the browser doesn't resister a successful upload.
Instead, I am getting this error in the browser console:
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/[namespace]/auto/upload. The request was redirected to 'localhost:8000/static/html/cloudinary_cors.html?bytes=4304&created_a…s=%23%3CSet%3A0x0000000ab0e050%3E&type=upload&version=[num]&width=402', which is disallowed for cross-origin requests that require preflight.
I would think the POST doesn't require a preflight CORS request. I have seen other posts online about the preflight error, and it seems some of them were resolved by fixing javascript imports. My order is:
1. jQuery
2. uiwidget
3. iframe-transport
4. fileUpload
5. cloudinary.js
which seems correct based on said posts.
What am I doing wrong? What do I need to change to get the cloudinarydone event?
we're working on a fix for this issue.
Meantime, in upload.html you should replace the following line:
.fileupload({
with
.cloudinary_fileupload({
This should solve the issue for you.

Microsoft Azure appending extra query string to urls with query strings

In deploying a version of the Django website I'm working on to Microsoft's Azure service, I added a page which takes a query string like
http://<my_site_name>.azurewebsites.net/security/user/?username=<some_username>&password=<some_password>
However, I was getting 404 responses to this URL. So I turned on Django's Debug flag and the page I get returned said:
Page not found (404)
Request Method: GET
Request URL: http://<my_site_name>.azurewebsites.net/security/user/?username=<some_username>&password=<some_password>?username=<some_username>&password=<some_password>
Using the `URLconf` defined in `<my_project_name>.urls`, Django tried these URL patterns, in this order:
^$
^security/ ^user/$
^account/
^admin/
^api/
The current URL, `security/user/?username=<some_username>&password=<some_password>`, didn't match any of these.
So it seems to be appending the query string onto the end of the url that already has the same query string. I have the site running on my local machine and on an iis server on my internal network which I'm using for staging before pushing to Azure. Neither of these site deployments do this, so this seems to be something specific to Azure.
Is there something I need to set in the Azure website management interface to prevent it from modifying URLs with query strings? Is there something I'm doing wrong with regards to using query strings with Azure?
In speaking to the providers of wfastcgi.py they told me it may be an issue with wfastcgi.py that is causing this problem. While they look into it they gave me a work around that fixes the issue.
Download the latest copy of wfastcgi.py from http://pytools.codeplex.com/releases
In that file find this part of the code:
if 'HTTP_X_ORIGINAL_URL' in record.params:
# We've been re-written for shared FastCGI hosting, send the original URL as the PATH_INFO.
record.params['PATH_INFO'] = record.params['HTTP_X_ORIGINAL_URL']
And add right below it (still part of the if block):
# PATH_INFO is not supposed to include the query parameters, so remove them
record.params['PATH_INFO'] = record.params['PATH_INFO'].split('?')[0]
Then, upload/deploy this modified file to the Azure site (either use the ftp to put it somewhere or add it to your site deployment. I'm deploying it so that if I need to modify it further its versioned and backed up.
In the Azure management page for the site, go to the site's configure page and change the handler mapping to point to the modified wfastcgi.py file and save the configuration.
i.e. my handler used to be the default D:\python27\scripts\wfastcgi.py. Since I deployed my modified file, the handler path is now: D:\home\site\wwwroot\wfastcgi.py
I also restarted the site, but you may not have to.
This modified script should now strip the query string from PATH_INFO, and urls with query strings should work. I'll be using this until I hear from the wfastcgi.py devs that the default wfastcgi.py file in the Python27 install has been fixed/replaced.

how to debug facebook app/django setup (url is not valid...)

I'm trying to set up a facebook app using django by following this tutorial: http://www.rkblog.rk.edu.pl/w/p/example-facebook-application-django/ . I get to the point where I start my development server at (manage.py runserver 0.0.0.0:80)
then it says: Now under http://apps.facebook.com/NAME/ you should see a basic Facebook app comming from your server:
I, however, get an error message:
The URL http://my.ip/my_app_name/ is not valid.
I think I've set things up properly:
Canvas Page URL:
http://apps.facebook.com/my_app_name/
Canvas Callback URL
http://my.ip/my_app_name/
Question: how do I go about finding out what's wrong?
Thanks in advance!
Martin
update: when i visit http://my.ip/myappname/, it redirects to http://apps.facebook.com/my_app_name/?auth_token=eac7bf38fb5e591c55ddc458d16dc9b7
where i get the 'url not valid' message... However, when I paste the url with auth_token in it, django serves the requested page as expected... why is facebook saying the url is not valid if in fact it is...?
Is your router set up to forward requests on port 80 to your development machine? If not, you will get an error, as the way Facebook apps work is that Facebook's servers contact your server, get the content, then parse it and re-serve it back to the client.
I actually find with Facebook apps that the easiest thing to do is what you describe in your last sentence - get the auth_token URL, then paste it locally and work from there.