bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag #562

mhartington · 2015-08-12T19:57:38Z

From @waynebloss on August 12, 2015 1:38

Type: bug

Platform: all

After I ran ionic upload for my project, it changed the top of my index.html file from this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-inline' *">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

to this:

&#xFEFF;<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos; &apos;unsafe-eval&apos; &apos;unsafe-inline&apos; *">
    <!-- ... -- >

index.html is already encoded in UTF-8 without BOM and it didn't change any of the other files which are encoded the same way. So, I have a few questions:

Should index.html or any other html file have a BOM?
Is the new Content-Security-Policy correct?
What should I do, if anything?

This is on Windows 10. I can try it on OS X and other various Unixes too, but I'll see what shows up here first. Thanks.

Copied from original issue: ionic-team/ionic-framework#4220

The text was updated successfully, but these errors were encountered:

KerryRitter · 2015-08-21T19:08:07Z

I am also seeing this. This breaks my application every time when using Ionic Upload and Ionic View.

okonon · 2015-08-22T01:22:01Z

Same here

mhartington · 2015-08-24T16:44:17Z

@KerryRitter and @softBarbarian can you guys paste the output of your ionic info

ghost · 2015-08-24T17:19:45Z

@mhartington Why not me?

ghost · 2015-08-24T17:22:56Z

I'll just assume that you hate me because I complained about the UX on the Ionic issue collector. Sorry! 😄

It says Windows 8.1 but it's actually Windows 10.

Your system information:

Cordova CLI: 5.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
OS: Windows 8.1
Node Version: v0.12.7

jbavari · 2015-08-24T17:24:10Z

@waynebloss We know you are on Windows 10. We love you!

However, we're having trouble recreating this on OSX.

@waynebloss Do you have your editor open with index.html when you run ionic upload?

ghost · 2015-08-24T17:29:16Z

I just ran ionic upload with no editors open or editing index.html. Here is the diff on my index.html file after running it:

You can see that it also ~~added~~ removed a tag-close slash to one of my style links ~~but not the other~~. (update: struck bad observation from testimony)

ghost · 2015-08-24T17:35:20Z

@jbavari Thanks!

I am planning on setting up my OS X box for Ionic one of these days anyway, so I'll try doing that right now and see what happens.

jbavari · 2015-08-24T17:42:01Z

@waynebloss That'd be awesome. We'd really appreciate it!

ghost · 2015-08-24T17:46:41Z

@jbavari I also updated my bad observation from earlier. It did not add a tag-close slash, it removed one.

Admittedly, it's HTML5 and I should be able to have that self-closing tag there if I want, but I've seen problems with other tools because of them, so I should be avoiding them anyway, particularly for link tags.

ghost · 2015-08-24T18:12:20Z

OK, I can totally reproduce this on OS X. Here is the ionic info:

Your system information:

Cordova CLI: 5.2.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 6.4 Build version 6E35b

And here is the diff after running ionic upload (same as the diff from Windows above):

diff --git a/src/www/index.html b/src/www/index.html
index ae34b24..dc4bd42 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+&#xFEFF;<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
@@ -7,7 +7,7 @@
   <title></title>
   <!-- Ionic -->å
   <link href="css/ionic.app.css" rel="stylesheet">
-  <link href="css/style.css" rel="stylesheet" />
+  <link href="css/style.css" rel="stylesheet">
   <script src="lib/ionic/js/ionic.bundle.js"></script>
   <script src="lib/ng-cordova/dist/ng-cordova.js"></script>
   <script src="cordova.js"></script>

I'll be glad to let you look at my project or remote into my machine (I use TeamViewer). There's nothing proprietary in it yet, but it's not public so just let me know where to send it (not an email, because it's kind of a big repo with images ~15MB)

jbavari · 2015-08-24T18:40:48Z

@waynebloss What editor do you use? Do you have it specify UTF-8?

ghost · 2015-08-24T18:45:39Z

I have used Visual Studio, Notepad++ and nano to edit the html files in this project.

All of the other html files in my project are UTF-8 without BOM, however the www/index.html file happens to be encoded in UTF-8 with BOM today. I think I changed it last time I tested this issue and forgot to change it back. As I remember, the issue happens with the BOM or not.

ghost · 2015-08-24T18:46:45Z

I'll remove the BOM and try it again on OS X to see if that makes a difference.

ghost · 2015-08-24T19:02:38Z

OK, I removed the BOM and ionic upload did not add the malformed BOM to www/index.html. Here is the diff:

diff --git a/src/www/index.html b/src/www/index.html
index 0d0de0a..ff434d0 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -7,7 +7,7 @@
   <title></title>
   <!-- Ionic -->
   <link href="css/ionic.app.css" rel="stylesheet">
-  <link href="css/style.css" rel="stylesheet" />
+  <link href="css/style.css" rel="stylesheet">
   <script src="lib/ionic/js/ionic.bundle.js"></script>
   <script src="lib/ng-cordova/dist/ng-cordova.js"></script>
   <script src="cordova.js"></script>

ghost · 2015-08-24T19:05:05Z

@jbavari It's working on Windows now too. ionic upload still changes my link tag, but it does not add the malformed UTF-8 BOM when www/index.html is encoded in UTF-8 without BOM.

The difference between today and the last time that I tried this is that I have since updated Ionic. So, looks like ~~it's~~ that part has been fixed! (I don't know if the change to the link tag is intended, but I myself am fine with that behavior for now. I'm going to remove the self-closing slash from that link tag now anyway.)

ghost · 2015-08-24T22:00:56Z

I was just cleaning up my files and I see exactly what is happening now - if the file has a BOM, ionic upload re-encodes it to UTF-8 without BOM but the conversion doesn't strip the BOM, it converts the BOM to HTML.

ghost · 2015-08-24T22:29:33Z

Final note - It turns out that Visual Studio Tools for Apache Cordova projects keep wanting to save www/index.html with a BOM even if I ask it not to or change it elsewhere. Funny thing - that's the only html file in the whole project that it does that to.

So, I reported that one to Microsoft as well. Thanks.

lincolnberryiii · 2015-09-09T11:58:37Z

I'm getting this too on OS X using Adobe Dreamweaver CC 2015, and it's only for single-quote characters in the www/index.html file. I've tried going to Modify > Page Properties > Title/Encoding and set Encoding to UTF-8 and "include unicode signature" was already unchecked. Yet for some reason, upon running ionic upload, single quotes revert back to '. How do I go about fixing this step-by-step? (This thread is the first time I've ever seen the the BOM acronym.)

mediastuttgart · 2015-12-28T08:43:48Z

hey,

still experiencing this issue

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.9.0
Ionic Version: 1.2.1
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v0.12.0
Xcode version: Xcode 7.1.1 Build version 7B1005

ghost · 2016-01-26T17:44:15Z

me too for both ionic upload and ionic package

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
OS: Windows 7 SP1
Node Version: v4.2.4

ghost · 2016-01-26T19:21:55Z

Whoa! Just submitted my first ever Pull Request. :)
ionic-team/ionic-app-lib#60

just a minor change, but it seems to have fixed my upload and package issue. hope it helps someone else.

deinerson1 · 2016-04-04T02:16:49Z

I am experiencing the same issue as @lincolnberryiii regarding the Content-Security-Policy issue.

System information:
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10
Node Version: v0.12.10

This issue appears similar to #452

Cordobo · 2016-04-19T09:31:10Z

@mhartington
I experienced the same issue with the Content Security Policy meta tag (on a Mac with Sublime/Atom as editors, UTF8 w/o BOM) - did you find a solution - apart from manually resetting it to the last commit :)

itbeyond · 2016-05-20T09:26:01Z

This is still happening on Windows 10 - Visual Studio 2015.
System information:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Node Version: v4.4.4

TamerCrea · 2016-06-04T13:00:04Z

Hi People,
I'm experiencing the same problem working with this config under Windows 10 (64b).

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.3.1
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.3.1

I usually work with InteliJ WebStorm and Notepad++. I also get the same issue while uploading directly with the Windows command-line.

Any suggestion?
Thanks.

TamerCrea · 2016-06-07T06:37:23Z

Ok, people. A classmate has found a workaround for this problem. It doesn't fix it, but at least the file is correctly uploaded to IonicView and the app works properly:

Open the index.html file with your text editor (I usede Notepad++)
Run ionic upload and quickly swap to Notepad++
As soon as you Notepad++ prompts you to reload the file (because it has changed) click "NO".
Make a slight change in the file (such as adding or removing a space/line)
Save the file.

Steps 3 to 5 must be made as quickly as possible. It seems that this way index.html is uploaded without the malformed code and so it works.

Hope this helps someone.

tlancina · 2016-06-23T22:59:07Z

This should be fixed in the latest version of the CLI. Let us know if you're still having issues, thanks!

tlancina · 2016-06-23T23:00:56Z

Also it's thanks to @jarodms6 🎉 👏 🎉

mhartington mentioned this issue Aug 12, 2015

bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag ionic-team/ionic-framework#4220

Closed

jbavari self-assigned this Aug 24, 2015

jbavari added the bug label Aug 24, 2015

mediastuttgart unassigned jbavari Dec 28, 2015

ghost mentioned this issue Jan 26, 2016

ionic upload and package are tampering with index.html ionic-team/ionic-app-lib#60

Merged

qmarcos mentioned this issue Jun 9, 2016

ionic upload modify index.html #452

Closed

tlancina closed this as completed Jun 23, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag #562

bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag #562

mhartington commented Aug 12, 2015

KerryRitter commented Aug 21, 2015

okonon commented Aug 22, 2015

mhartington commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

lincolnberryiii commented Sep 9, 2015

mediastuttgart commented Dec 28, 2015

ghost commented Jan 26, 2016

ghost commented Jan 26, 2016

deinerson1 commented Apr 4, 2016

Cordobo commented Apr 19, 2016

itbeyond commented May 20, 2016

TamerCrea commented Jun 4, 2016

TamerCrea commented Jun 7, 2016 •

edited

Loading

tlancina commented Jun 23, 2016

tlancina commented Jun 23, 2016

bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag #562

bug: ionic upload adds malformed UTF-8 BOM to index.html and changes Content-Security-Policy tag #562

Comments

mhartington commented Aug 12, 2015

KerryRitter commented Aug 21, 2015

okonon commented Aug 22, 2015

mhartington commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

jbavari commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

ghost commented Aug 24, 2015

lincolnberryiii commented Sep 9, 2015

mediastuttgart commented Dec 28, 2015

ghost commented Jan 26, 2016

ghost commented Jan 26, 2016

deinerson1 commented Apr 4, 2016

Cordobo commented Apr 19, 2016

itbeyond commented May 20, 2016

TamerCrea commented Jun 4, 2016

TamerCrea commented Jun 7, 2016 • edited Loading

tlancina commented Jun 23, 2016

tlancina commented Jun 23, 2016

TamerCrea commented Jun 7, 2016 •

edited

Loading