AWS Lightsail wrapping my html in a frameset - amazon-web-services

I am running a docker container inside a aws lightsail instance of ubuntu 18.04. When I curl the docker container from within the aws instance I get a response of:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bibleit.co</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/boots
trap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm
" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
jizo"
crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="/static/styles/search.css"/>
</head>
<body>
...
But when I curl the url on my local machine i get:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bibleit Search</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<frameset rows="100%,*" border="0">
<frame src="http://myPublicPort/" frameborder="0" />
</frameset>
</html>
This causes all the browsers to display the site in a frame, which I guess by default displays everything in desktop, and wont allow the site to be responsive on mobile.
Does anyone know how to correct this. I cannot find anything on this problem on line.
The URL is http://bibleit.co if anyone wants to get a response.
Thank you for your help in advance.

It turns out that I had my GoDaddy domain settings were forwarding and masking my aws static ip which caused my html to be wrapped in a frameset.
So I created a DNS zone on my lightsail network settings, which gave me 4 namespaces. I then addend those custom namespace to my Godaddy domain settings.
Lightsail automatically uses port 80, so I changed my flask server to use port 80.
Wallah! No more frameset wrapping.
Thank you

Related

Google one tap Login With Django ( The given origin is not allowed for the given client ID issue )

I'm trying to connect Google One Tap Login with Django framework, but I'm having issue.
I'm not sure why this is displaying an issue. I followed all of the guidelines described in the Google documentation.
issue -
The given origin is not allowed for the given client ID
Here is my Google API client configuration for the javascript origin url.
Here is the login html template code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hi Reddit</h1>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload" data-client_id="i don't want to shere"
data-context="signin" data-ux_mode="popup" data-login_uri="http://localhost:8000/google/login/"
data-auto_select="true" data-itp_support="true">
</div>
<div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="outline" data-text="continue_with"
data-size="large" data-logo_alignment="left">
</div>
</body>
</html>
I'm not sure why this is displaying an issue.
Is it possible to load Google One Tap Javascript in Django?
What should I do to load Google One Tap Javascript in Django?

How to login in auth0 via Postman

I'm playing with auth0 and currently trying to figure out how to log in with Postman
So far I took the following steps:
Created an App and set an allowed callback url to https://google.com
Created a GET request in Postman that looks something like this:
https://myauth0.url/authorize?response_type=token&client_id=my_clientId&redirect_uri=https://www.google.com
When I send the request I get the following response
<!DOCTYPE html>
<html>
<head>
<title>Sign In with Auth0</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://cdn.auth0.com/styleguide/components/2.0.2/media/logos/img/favicon.png">
</head>
<body>
...
So, It's a default auth0 login window, but how can I procceed and enter username & password to get token?
After some research I've figured out that it's impossible due to the passive authentication:
https://auth0.com/docs/api/authentication?http#database-ad-ldap-active-
The main difference between passive and active authentication is that
the former happens in the browser through the Auth0 Login Page and the
latter can be invoked from anywhere (a script, server to server, and
so forth).

Ember-CLI: Ember Build keeps building the wrong index.html

Ideally, I want my index.html from this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Program With Erik Blog Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/example1.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/example1.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
into production code. But for some strange reason, each time I call ember build, I do not get the expected production-looking code. Instead I get something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
.
.
.
<!-- lots of code -->
It's the default firebase page!
What is happening? I've deleted the picture multiple times. But each time I call ember build it builds the firebase default page rather than my ember app index.html.
I'm new to ember and I've been fiddling around heavily with the config/environment.js and the firebase.js. Any thoughts on why this might be happening?
On initialising a firebase app, one is prompted:
? What do you want to use as your public directory? (public)
make sure to set the dist folder as the public directory, that is
? What do you want to use as your public directory? (public) dist
using the default public will cause the above behavior no matter how many times you build your Ember app.
To fix the problem, re-initialise the firebase app with the firebase init command, and set the right folder as the public directory.

How to use a script block with HTMLBars

I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.

Deploying ember-cli dist returns an empty page

I've executed the following command to build ember for production environment. However when I opened the dist folder, clicked the index.html it returned a blank page. compared to as when I run ember server.
The command I've used to generate the dist folder
ember build --environment production
Here's how I do it dist folder -> click the index.html.
Here's the result.
Here's the contents of the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TodoMvc</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/" />
<meta name="todo-mvc/config/environment" content="%7B%22modulePrefix%22%3A%22todo-mvc%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22todo-mvc%22%2C%22version%22%3A%220.0.0+8f1032d8%22%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy-Report-Only%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%22%27none%27%22%2C%22script-src%22%3A%22%27self%27%20%27unsafe-eval%27%22%2C%22font-src%22%3A%22%27self%27%22%2C%22connect-src%22%3A%22%27self%27%22%2C%22img-src%22%3A%22%27self%27%22%2C%22style-src%22%3A%22%27self%27%22%2C%22media-src%22%3A%22%27self%27%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/todo-mvc.css">
</head>
<body>
<script src="assets/vendor.js"></script>
<script src="assets/todo-mvc.js"></script>
</body>
</html>
Here's the error message
I was doing it the wrong way. I deployed the app to an http web server. turns out by clicking the index.html. I'm accessing it via the file protocol