My HTML entities, such as © and mdash; are showing up as ?, both when rendered on the page and when I view the underlying source -- but only when served through my production Jetty server (in the webapps directory).
The HTML entities look fine in when served from static files through a local Nginx. They also look good when run through a development run of a Pedestal app using embedded Jetty. Here is the HTML head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="Web Site Description" name="description" />
<meta content="The Author" name="author" />
<link href="/images/favicon-128x128.png" type="image/png" rel="shortcut icon" />
<title>A Really Great Title</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/shared.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
How do I solve this? What might be going wrong? Or, failing that, how do I debug?
Some ideas:
First, I'm using Jetty 9.1.X in production. My development server uses (from lein deps :tree):
[io.pedestal/pedestal.jetty "0.2.2"]
[javax.servlet/javax.servlet-api "3.0.1"]
[org.eclipse.jetty/jetty-server "8.1.9.v20130131"]
[org.eclipse.jetty.orbit/javax.servlet "3.0.0.v201112011016"]
[org.eclipse.jetty/jetty-continuation "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-http "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-io "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-util "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-servlet "8.1.9.v20130131"]
[org.eclipse.jetty/jetty-security "8.1.9.v20130131"]
Are there Jetty 9 production settings I should double check?
Second, I'm using Enlive. It relies on the following dependencies (from lein deps :tree):
[enlive "1.1.5"]
[org.ccil.cowan.tagsoup/tagsoup "1.2.1"]
[org.jsoup/jsoup "1.7.2"]
I wonder if somehow TagSoup is behaving differently in production versus development.
Update:
Here are the response headers:
HTTP/1.1 200 OK
Set-Cookie: ring-session=eyTI ... <SNIP> ... s%3D;Path=/
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Server: Jetty(9.1.3.v20140225)
The text/html;charset=UTF-8 seems to rule out that Jetty is the problem. I think it is possible (even likely) that TagSoup is not behaving as I would expect.
I am currently reading this thread on the Enlive mailing list: mdash output as question mark.
Update: My Clojure templating (I was using Enlive but I just switched to Laser -- but both behave the same in this regard) converts the HTML entities to Unicode. The problem seems to be that my installation Jetty 9 is not configured (or I'm not giving it what it needs) to handle the Unicode characters.
Specifying UTF-8 encoding when starting Jetty solved the problem.
java -Dfile.encoding=UTF-8 -jar start.jar
Also, here is the Chef cookbook I use in case it helps you: https://github.com/bluemont/chef-jetty
Related
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
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.
I am new to the eclipse environment and have been working on Microsoft VS. Currently I have to work on the angularjs project on Eclipse. When I try to add new module in the application the eclipse gives me the error
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Login/MyApp.Login.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Camera/MyApp.Camera.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Chart/MyApp.GoogleChart.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Register/MyApp.Register.js
!JavaScript ERROR: Error: [$injector:modulerr]
Is there anything I am Missing.
Following is my index.html file
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/ionic.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Hello World</title>
</head>
<body ng-app="MyApp">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-view></ion-nav-view>
<script type="text/javascript" src="cordova.js"></script>
<script src="/Login/MyApp.Login.js" type="text/javascript"></script>
<script src="/Camera/MyApp.Camera.js" type="text/javascript"></script>
<script src="/Chart/MyApp.Chart.js" type="text/javascript"></script>
<script src="/Chart/MyApp.GoogleChart.js" type="text/javascript"></script>
<script src="/Register/MyApp.Register.js" type="text/javascript"></script>
<script src="js/ionic.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Maybe ionic.bundle has to be first, before cordova.js?
My code looks like:
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- angular touch -->
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
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
I have got the following issue. I'm using a google webfont in a project i did with Foundation. The thing is, it is working on any browser but not on the Android Browser on a Samsung Galaxy Note. The Android Browser is showing a standard font.
For testing purpose i tried it with a simple html file to check if it's a general problem with google fonts. But it was working. Then i tried a clean Foundation-Installation, I added the google font and changed all font-family tags. And again, the same result. It is working on FF, Chrome, Opera, Safari, but not on the Android Browser.
The installed System is Android 4.2.2
Zurb Foundation Head:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr.js"></script>
CSS-changes in foundation.css
font-family: 'Exo 2','sans-serif';
I changed every font-family line like above.
Result in Adroid Browser:
http://uploadpie.com/lec8E
Result in Chrome:
http://uploadpie.com/qt3qK
I hope you guys have any ideas or solutions. Thanx for your help.
Cheers
Tom