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.
I am trying to deploy my Django rest framework to aws eb but when I test the API, it shows
favicon.ico:1 GET
http://myapp.....com/favicon.ico
500 (Internal Server Error)
I update my url.py of django project to
from django.views.generic.base import RedirectView
urlpatterns = [
url('favicon.ico', RedirectView.as_view(
url='/static/favicon/favicon.ico'))...]
But It still shows an internal error.
I already search and found similar questions but not a useful answer.
like that=>
How do I edit the favicon in the browsable API in Django rest framework
how to handle favicon request in Django rest framework
My API is pretty separate from the frontend so I can't change frontend for this error.
Update
If I test on local like =>
http://127.0.0.1:8000/favicon.ico
it gets the same result with =>
http://127.0.0.1:8000/api/
I'm working on a project using Django as backend, Vue as frontend, and trying to implement Apollo/Graphene/GraphQL as data transfer layer.
Most of it works, but I don't get my head around the CORS/CSRF settings.
(Had really much research here. here, and here and here.
Does anyone know how to solve securing the graphql/graphene API via a CSRF token? On the django log terminal, I get:
Forbidden (CSRF token missing or incorrect.): /graphql/
...while on the Vue/Js Console I see
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at http://localhost:8080/sockjs-node/
info?t=1558447812102.
You can see (and checkout, it's open source) this project here.
http://localhost:8000, http://localhost:8000/admin and http://localhost:8000/ work nicely. The query query{menuItems{id, title, slug, disabled}} works well in graphiql.
settings.py:
INSTALLED_APPS = [
# ...
'corsheaders',
'rest_framework',
'webpack_loader',
'graphene_django',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # new
# ...
]
CORS_ORIGIN_ALLOW_ALL = DEBUG # (=True)
The problem is here:
* yarn serve is running on http://localhost:8080
* ./manage.py runserver is running on http://localhost:8000, and proxies through webpack the Vue frontend dev server.
vue.config.js:
module.exports = {
// The base URL your application bundle will be deployed at
publicPath: 'http://localhost:8080',
// ...
chainWebpack: config => {
// ...
config.devServer
.public('http://localhost:8080')
// ...
vue-apollo.js:
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:8000/graphql/'
EDIT: If I wrap the graphql/ api urlpath with csrf_exempt, it works:
urlpatterns = [ # ...
path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),
]
But this is a BadIdea(TM) securitywise. How can I get that token into the frontend using Vue with Django and webpack_loader?
It's probably fine to skip CSRF check for that request, but it's hart t assess it from information you've given, so let me explain why do we need CSRF checks at the first place.
CSRF was created to fix a "hole" that is present in how HTTP and web browsers work. This hole goes as follows: any website can contain a from that submits data to your website, and when doing so, cookies will be passed along the form submitted by user.
This means that 3rd party website can trick your users to perform some action on your website. To prevent that, idea of CSRF tokens was created. Simply put: any form on your website that is responsible for performing any action that can be in any way harmful for user when tricked by 3rd party website to submit it, has to contain a CSRF token field next to all data being submitted for this action. The same CSRF token needs to be present either in user's session or in cookies. When form is submitted, those 2 tokens are compared and if they don't match or any of them doesn't exist, form will be rejected.
This protects any form to be submitted by 3rd party website, because cookies from your website cannot be read by other websites, even if they are passed along with request coming from such website. It is impossible then for that website to set matching token in form data.
That being said, this issue is not present when you are not keeping user sessions by using cookies. It is also not an issue when your frontend is on separate domain, as all requests coming from your frontend will have Origin header with it's domain name. So if either of those is the case, you can disable CSRF checks accordingly:
When not using cookies for user sessions or user authentication (if you purely rely on JWTs passed by headers for example), you can disable CSRF altogether for all views that are not using cookies.
When your frontend is on separate domain (or subdomain), allowed by CORS to connect to your website, use CSRF_TRUSTED_ORIGINS to whitelist it.
I am using AWS codestar to deploy by react application using serverless nodejs template. This is the url that is given by codestar after successfully completion of all the stages https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod . This url displayed all the components in my app correctly. In navbar of my app i have items like this a ,b,c. where clicking on each one of them will redirect to a new component.(i.e.https://xxxxx.execute-api.us-east-1.amazonaws.com/a,https://xxxxx.execute-api.us-east-1.amazonaws.com/b etc. But when i refresh the page which is having a url like this https://xxxxx.execute-api.us-east-1.amazonaws.com/b i am getting a error like {"message":"Forbidden"} and in my console it is showing like this favicon.ico:1 GET https://xxxx.execute-api.us-east-1.amazonaws.com/favicon.ico 403
It seems the chrome is fetching the favicon based on the https link, which fails because there is no such favicon at the location. I tried to remove favicon.ico link in index.html but even then the chrome is using the same url to fetch the favicon which eventually fails. I followed max number of suggestions in SO to acheive this but no luck. Is there any way to say api-gateway to exclude these favicon get requests and display my app rather than showing message forbidden.
And i am pretty sure that i had enabled logs for both the agi-gateway and lambda where i didnt find any forbidden errors(i.e.403) which is weird because i can see those 403 errors in my console.
Thanks
Any help is highly appreciated.
The https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod url provided by API Gateway is the base url for your site, so those paths would have to be /Prod/a instead of /a.
One way to get around that is to register your own domain and connect it to API Gateway via a custom domain. That would allow you to have https://example.com as your base url, and your paths could stay /a, /b, etc.
I have fandjango setup on my django app and I have the "Site URL" pointing to the exact spot where the dynamic page is shown.
http://www.example.com/apps/myapp
This gives me the following error message box.
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I'm not sure how to debug this. Looking at similar people's posts, they said they had this problem only if there was a mismatch between the site url, but even if I copy and paste the site url into my browser, I still get the same error. I don't have https setup, if that matters.