We have this fun example of how our EcmaScript/JavaScript Obfuscator works.
We provide links that show the unobfuscated and obfuscated Ecmascript source for a
"dynamic clock". When you press the start button you will see that the clock graphic parts follow your mouse movements and when you stop moving the mouse it forms a ticking circular clock.
See here ...
http://www.semdesigns.com/Products/Obfuscators/ECMAScriptObfuscationExample.html
The issue that both the un-obfuscated and obfuscated code works fine with Internet Explorer but not with FireFox. So what is the difference between EcmaScript for FireFox and Internet Explorer that results in this code working with Internet Explorer but not with FireFox is the question? I have tried this several versions of FireFox including the latest version and all fail.
First place to check is the "Error Console" or your Firebug console - finding it depends on your version of Firefox and whether or not you have Firebug installed.
I immediately found this in the console when trying out your page:
Error: document.getElementById("mzSeconds" + i) is null
Source File: http://www.semdesigns.com/Products/Obfuscators/UnobfuscatedJavaScriptMouseClock.js.txt
Line: 19
Update
Having found the error, and with Dexter and jfriend00 having pointed out why you're getting the error in the first place, we can see that the difference between IE and "all other" browsers in this case is not how they execute EcmaScript, but in how they construct the DOM in the face of HTML errors -- missing closing quotes on attributes in your case. (Though there are script differences those are not relevant here)
Your document.write() would output <div id="mzSeconds0 style="position:..."> which is invalid, leading to another debugging tool: validation.
If CSS rules or Javascript code behave strangely or inconsistently across browsers it's a good idea to validate your HTML (at validator.w3.org) because invalid HTML will be parsed in different ways by different browsers.
Your immediate problem is that you are generating invalid HTML code, appending it to the DOM, and then trying to find it again using document.getElementById.
The offending section is line 100 of UnobfuscatedHTMLPage.html, which contains this line:
document.write('<div id="'+(('mzSeconds'))+i+' style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');
You're missing the closing " immediately after id="'+(('mzSeconds'))+i+', which causes the id of the div tag to be processed incorrectly in IE (two wrongs making a right, in this case).
There are a number of similar errors in that section of code - you'll need to fix them all (by debugging your code in Firebug or Chrome Developer tools) before your code will be valid and work in non-IE browsers.
A very simple look in the debug console of any browser that it doesn't work in would show you where the error was (I used Chrome). Then, a look at the DOM would show you why that error occurred. Use your debugging tools to find your problems.
I think the root issue is that when you generate your HTML, you are missing some closing quotes. That creates illegal HTML which different browsers barf on differently.
The first error in your code is triggered because no object with id="mzSeconds0" exists. This is caused because you are missing a closing double quote in this line:
document.write('<div id="'+(('mzSeconds'))+i+' style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');
It should be this with the closing double quote at the end of id="mzSeconds0":
document.write('<div id="'+(('mzSeconds'))+i+'" style="position:absolute;top:0px;left:0px" width="15" height="15"><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></div>');
I think the same error exists on most of these types of lines and you will need to fix them all.
Checking a debugger yields: document.getElementById("mzSeconds" + i) is null and also includes line numbers and stack trace which should make fixing your bug easy.
The cause is that you are throwing invalid HTML to the browser which need to try to correct it somehow. Obviously you end up having a different DOM in IE an Firefox.
document.write('<div id="'+(('mzMinutes'))+i+' style="position:absol…
I still don't see the use of obfuscating JavaScript or writing code in your style. Write HTML directly instead of misusing JavaScript to do so. When you need to create content from JavaScript, then use DOM functions instead of document.write. This would have saved you from this bug.
When you are running your code to a debugger (Firebug), you'll find other bug popping up. Please do also have a look at JavaScript strict mode because it would probably save you a lot of time by pointing out bad practices.
Related
I am new to javascript and have been working overnight to see how I can fix this error on IE: Here's the question I asked here yesterday: How to fix this jquery function to work in IE?
After spending more than 20 hours I still can't find out why it wouldn't render parts of my page properly.
At the very least I thought I could find a way to get the errors so I can fix them or do a separate javascript file just for IE, but no luck.
How do I see error messages for my script?
I used F12 to see the developer console but no help there, it won't even tell me what's wrong.
I am using IE 8 and 9.
I know that there could be many things wrong with this and I appreciate your patience in advance for helping me out. Thanks!
You have invalid HTML including many invisible characters within the head section which is also blocking the W3C HTML Validator from getting past the first few errors.
When I copied your source code into my text editor, I found a bunch of invalid invisible characters. Did you cut/paste your JavaScript from someplace like a web-page? The invisibles only appear in front of your custom written scripts in the <head> and nowhere else. This could certainly explain a lot, including the validation error about a misplaced </head> tag. Go back to your editor and delete the indentations on every single line within the entire <head></head> section, then re-indent each line from scratch.
I also see an invalid closing tag, </label6>.
Remove the invisible characters, fix the invalid HTML, and see what IE does.
Moving forward, get yourself a powerful text editor that will allow you to see invisible characters so you can delete them and properly indent as needed. Otherwise, I recommend re-typing your code rather than cutting & pasting.
For JavaScript errors, the best is to see the 'Console' tab for records.
If IE's one isn't showing anything, maybe you could try using FireBug Lite, adding the following script after <head> (YES, put it as first thing, so it loads first than anything else).
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
On side note, maybe isn't a JS problem and yes something about running code locally. IE has some policies that mostly block client-side code from running. (Remember those annoying ActiveX prompts?). Check Intranet configuration on Settings.
I developed a .htm document with an in-built script for javascript to run a program. In google chrome, the program works fine, but I got a beta test complaint that it didn't work on firefox 14.01 or opera. On testing with firefox 14.01, I can confirm it doesn't work (I assumed opera to be the same). I cannot insist the audience upgrade their browsers, as this is supposed to be widely compatible.
Doing a little tracing of the issue, I installed Firebug, which, on clicking the Javascript button to generate a coordinate the first time, it worked (clearly showing the function is defined and exists), but the second time, Firebug complained that:
"ReferenceError: GenerateCoord is not defined".
This wouldn't be so ironic if it only did this after generating an (encrypted) coordinate (thus calling GenerateCoord that is supposedly 'undefined').
If one looks in the code, one can clearly see that the function GenerateCoord is clearly defined before it is called. I would say firefox has an 'onclick' issue, but then it begs the question why did it work the first time I clicked it (calling GenerateCoord via 'onclick') but not the second?
Reloading the file allows the button to work the first time, and the first time only. I am baffled as to how firefox can call a function one time that it then says is undefined the next. Am I missing something here?
Javascript and HTML code can be viewed here:
http://pastebin.com/4qykTfEW
-
How do I solve the problem, and is there an easier solution than re-writing the code to avoid onclick (that seems to work in certain circumstances but not others)?
The problem is that using document.write overwrites the entire HTML page, thus inadvertently removing the GenerateCoord script. I'd suggest appending the link to the document (in ShowTarget) rather than attempting to re-write it.
For example, have a container element where the link should be:
<div id="links_container"></div>
Then to append the links, use:
document.getElementById('links_container').innerHTML = Link;
This has been asked already, but the solution there did not help me. What does this mean exactly? My regular HTML page uses a "script" tag to load my main_script.js file, where the first thing I do is:
var internetExplorerSucks = 30;
The variable used be be called FPS, but I thought it might have been taken by some random default global, so I renamed it to something that obviously isn't already taken. Still it fails to work. I get this error in the IE debug console:
SCRIPT5039: Redeclaration of const property
main_script.js, line 1 character 1
I tried making it a global by taking out "var", still didn't work. It should be noted that this is not in any function, just literally the first line of code in the file.
Some background: All of this code works perfectly in Chrome, Firefox, and Safari on Windows, OS X and Linux. IE is the only browser this does not work on. This project involves using an HTML5 canvas, which I got to at least display in IE 9 (I am using version 9), but this code does not immediately pertain to the canvas at all. In fact, I cannot seem to declare any variables whatsoever in my main_script.js file. I am able to, however, create functions without running into an error. Is that what I have to do? Put everything in a function (that would involve a lot of moving things around)?
Anyway, thanks for the help.
P.S. Internet Explorer is a nightmare.
I had the same problem in my code and it turn out that IE show wrong line were the redeclaration appear. In my case it was history I use later in the code. You should check whole code for redeclaration of the constants. You can try to comment out part of the code and see when it throw that error.
I am developing a front end of a web app using NetBeans IDE 7.0.1. Recently I had a very nasty bug, which I finally fixed.
Say I have code
var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);
I noticed that something gone wrong when I saw that size attribute doesn't work in Chrome (didn't checked in other browsers). When I opened that element in Inspector, it was interpreted as something like
<input id=""3"" name=""elements[foo][0]""
size=""foo"" />
Which was rather strange. After manually retyping the element string character-in-character, the bug was gone. When I undo'ed that change I noticed that Netbeans alerted me about some Unicode characters in my old code. It was \u200b - a zero width spaces after each '=', between '][' and in the end of the string. So the string appeared normal because zero width spaces wasn't displayed, but after escaping them my string was
'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'
Now where the hell did I get them?
I'm not sure where did I copied the code of element from, but it's definitely one of the following:
Other pane of Netbeans Editor with HTML template file;
Google Chrome Inspector, 'Copy as HTML' action;
Google Chrome source view page (very doubtfully).
But I can't reproduce the bug with neither of that.
I use Netbeans 7.0.1 and Google Chrome 13.0 under Windows 7. No keyboard switchers or anything like it is running. Also I'm using Git for version control, but I didn't pulled that code, so it is very unlikely that Git is to blame. It can't be a stupid joke of my colleagues, because they are quite well-mannered.
Any suggestions who messed up my code?
Here's a stab in the dark.
My bet would be on Google Chrome Inspector. Searching through the Chromium source, I spotted the following block of code
if (hasText)
attrSpanElement.appendChild(document.createTextNode("=\u200B\""));
if (linkify && (name === "src" || name === "href")) {
var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
} else {
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
attrValueElement.textContent = value;
}
It's quite possible that I'm simply barking up the wrong tree here, but it looks like zero-width spaces were being inserted (to handle soft text wrapping?) during the display of attributes. Perhaps the "Copy as HTML" function had not properly removed them?
Update
After fiddling with the Chrome element inspector, I'm almost convinced that's where your stray \u200b came from. Notice how the line can wrap not only at visible space but also after = or chars matched by /([\/;:\)\]\}])/ thanks to the inserted zero-width space.
Unfortunately, I am unable to replicate your problem where they inadvertently get included into your clipboard (I used Chrome 13.0.782.112 on Win XP).
It would certainly be worth submitting a bug report should your be able to reproduce the behaviour.
This happened to me when I copied source code from another site into my editor.
If your using visual studio code or Atom editor, this will highlight those pesky characters zero-width space \u200b) etc.
VSCode: https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
Atom editor: https://atom.io/packages/highlight-bad-chars
Sublime Text: https://packagecontrol.io/packages/Gremlins
As Mr Shawn Chin has addressed it already. I just happened to replicate the issue while I was copy pasting jquery code from a webpage.
When it happened: Copying text from Google Chrome Version 41.0.2272.118 m ( not tested with other browsers ) to Dreamweaver code window. This copied unwanted characters along the code like this happening here
you copied text from a webpage as
$('.btn-pageMenu').css('display','block');
behind the scenes, this is what makes that line
<code><span class="pun"></span><span class="pln">$</span><span class="pun">(</span><span class="str">'.btn-pageMenu'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'display'</span><span class="pun">,</span><span class="str">'block'</span><span class="pun">);</span></code>
Copied to an advanced editor like those you mentioned or Dreamweaver gives errors in browser, probably failing of javascript code too
Uncaught SyntaxError: Unexpected token ILLEGAL
Solution: When it happens, embrace the worth of notepad until this gets fixed by the big guys. It is more related to the editor then the browsers.
After longer than 6 years I am getting the same issue but I am able to reproduce it.
I am learning JavaScript from this blog which contains code snippets. Whenever I copy all the code from a snippet and paste it into the JavaScript editors of JS Fiddle or JS Bin I get some red tokens spread into the code. Here are screenshots of the first code snippet from the above blog post in the JS Fiddle and JS Bin. Hovering the mouse over one of these red tokens shows up the tip: "\u200b" (the zero-width space).
I'm working on Linux Ubuntu 16.04 and if I paste the code into one of my editors (Atom 1.22.1 or Geany 1.32) and then open the file in web browsers, I get the following errors in the console:
Chrome 63 --> SyntaxError: Invalid or unexpected token
Firefox 57 --> SyntaxError: illegal character
I hope this may help a bit to clarify why these zero-width spaces get copied into the clipboard.
I have similar issue with '\u200b' zero-width space character in my current project. I need to work on JSON object returned from server. Email object with '[at]' need to be replaced with '#' character. Surprisingly, several of the objects had the email address littered with 'space' in and around the '#'.
Long story short, I checked using Postman and scrutinised the returned JSON as RAW. Here is the raw example:
johndoe[at]\u200bxyz.org
I could see the character '\u200b' on all those trouble email address. Since only few email addresses affected, I removed the character manually. The server gets the data from Sharepoint.
This is my first question on this site. I have an issue with Internet explorer. My contact form works fine in Chrome, Safari and FF but not in IE. Here is the link for my form.
Basically the problem(s) are that there is no text in the dropdown select and as a consequence, nobody can send an enquiry via IE. Can someone help me out here?
Other information...
I got the fancy contact form from:
http://tutorialzine.com/2009/09/fancy-contact-form/
There are other smaller issues such as width of the selects are different in various browsers but I only care about the above problem.
Many thanks
There are a couple errors in the code. I would suggest using a javascript debugger. Chrome developer tools has a good one, and
Firebug is good too for Firefox
for Chrome:
Control - Shift - I keys to open Developer Tools
Control - Shift - J to open Developer Tools and bring focus to the Console.
Control - Shift - C to toggle Inspect Element mode
In your code there are missing commas and parenthesis for if statements... though those are not needed by the compiler, it's good practice to always wrap if statements inside commas, and always put semicolon at the end of each row.
For example
$("#contact-form").validationEngine({
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true},
failure : function(){use_ajax=false;}
}) // missing semicolon here
and
{
$.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error") // missing semicolon here
return false;
}
Since you are having bad arguments call in the debugger, it's better to write the code the right way, then we can try to understand what's wrong.