Web app has some strings injected on customer's screen - debugging

Question may be a bit esoteric, however, I wouldn't have posted it had I not found so many clues leading to nowhere.
A cloud based web app works normally for everyone but a few people (possibly on the same network). There seems to be some kind of text injected in random places (note that the text disappears after a site refresh and appears in random intervals) as seen on the picture:
Facts:
"Zrkadlovka na čiernom pozadí" is what is being injected. There is no icon or something like that in its position. The text fields we use are basic vuetify components.
The above is in Slovak language. The web app is not. (The string means literally "a camera on black background" -> there is no icon/image/anything that should remotely convey this information)
The string is not found anywhere in the code.
The string is not found anywhere in the build of the app.
As it wouldn't be weird enough already, if you google the mysterious string you get a TON of results. Some have the text embedded in a <span> or something like that, sometimes with some class such as "wixGuard" but nothing like this is present in our code or the build.
All the websites found with that string on Google look suspicious to say the least which leads me to the idea of it being caused by some kind of malware either server side (websites found on Google) or PC-side (the person viewing our website). Our website runs in the cloud and definitely securely enough for it to not be spoofed. There are no similarities in the websites on Google, neither with our web nor with each other.
How would one even begin debugging this?

At least for some of those websites, a zero with space U+200B is present in other languages where this strange string occurs in Slovak.
So it looks like some translation(?) engine incorrectly translates Zero width space character into Zrkadlovka na čiernom pozadí or for some other reason this invisible space is being replaced with a string.
I would start checking if that is the same for you (if you have Zero width space), but the full analysis might be difficult w/o some internal details of your stack/packages and how the page is generated.
Update: Don't know if you can use google translate (or other tools) to automatically translate your text with vuetify, but seeing how google translate the above text (with ZWSP at the end), it must be something like that.

Related

Intermec Printer Language - Tabulation Problem

I'm an ABAP programmer and I was asked to make a minor modification to an IPL label.
Easily done, but now I was tasked to fix a long running error within said label.
I know nothing about IPL and the lack of a online viewer makes everything worse...
The problem is that "tabulation" right in the middle of a text (I underlined it in blue on the Label's pic).
I checked the code and there's nothing there that should make that tabulation appear.
I spent a whole month reading manuals and trying to fix it, but nothing changes...
Here's the code and the resulting label:
<STX>R<ETX>
<STX><ESC>C<SI>W791<SI>h<ETX>
<STX><ESC>P<ETX>
<STX>F*<ETX>
<STX>H1;f3;o220,52;c34;b0;h2;w1;d3,300052947-FANDANGOS PRESUNTO 140GX14 LD<ETX>
<STX>H2;f3;o130,52;c33;b0;h1;w1;d3,Val:<ETX>
<STX>H3;f3;o130,204;c34;b0;h1;w1;d3,QTD.Unidade:<ETX>
<STX>H4;f3;o90,33;c34;b0;h0;w1;d3,16/08/21<ETX>
<STX>H5;f3;o90,302;c34;b0;h1;w1;d3,14<ETX>
<STX>B6;f3;o375,44;c2,0;w6;h102;r0;d3,17892840816329<ETX>
<STX>H7;f3;o275,44;c26;b0;h17;w17;d3,17892840816329<ETX>
<STX>H8;f3;o130,490;c34;b0;h0;w1;d3,Lote:<ETX>
<STX>B9;f3;o090,600;c2,0;w2;h45;r0;d3,0005218177<ETX>
<STX>H10;f3;o130,600;c34;b0;h0;w1;d3,0005218177<ETX>
<STX>D0<ETX>
<STX>R<ETX>
<STX><SI>l13<ETX>
<STX><ESC>E*,1<CAN><ETX>
<STX><RS>1000<US>1<ETB><ETX>
Label
Can you guys help me, please??
Edit: Just to make it clear, I did that blue line on that image to show what's the problem.
Here are some tests I did by changing the data:
Test1
Test2
The error always appear at the same point in the label, as long as there's a space in that text.
Have you looked at the raw data of the output? Is it POSSIBLE that what looks like a space is actually some special character that is making IPL choke blue? Because it is literally the 1 character between the "O" and "1". For grins, you might also try to change the character in the data to a "-" just for purposes of confirming data context. It might even just be a TAB character.
I have done IPL years ago and have actually gone to the point of defining a pre-defined label template and generating output that says to use template X (whatever # I created as),and pass the data along that fills into the respective fields.
A final option I would throw in is this. Take the sample output you have and just force sample data into each of the output areas. So, instead of your literal data, put fake data in similar context just to see if it is data specific or other. Such as
<STX>H1;f3;o220,52;c34;b0;h2;w1;d3,300052947-FANDANGOS PRESUNTO 140GX14 LD<ETX>
becomes
<STX>H1;f3;o220,52;c34;b0;h2;w1;d3,123456789-TESTING-SAMPLEDATA-123XY12-AB<ETX>
Notice same context of data, but no spaces and using dash "-" just for testing. Is there something special about the actual data. This is a good way I have done historically for similar strangeness early on doing IPL labels.
User decided to not spend anymore time on this issue, so now I'm unable to further test the label.
Unfortunately this problem will go unsolved for now. Hope I get another chance to fix this and learn more about IPL.
Thanks you so much for your answers!

How do I find the code for the Special Character ǝ in an IDN and type it?

In searching to resolve this issue I have found several lists of codes that appear to be the same special character, but give different codes from each other. And since I can't seem to type them, I can't verify if any of them is the correct code for a domain name.
The domain name URL for purposes of this inquiry is the http://sǝx.com IDN. If you paste that in, it goes to a landing page; but how would you TYPE it in?
In comparison, £.com (symbol for the British Pound) is pretty straight forward: you just hold down the Alt key, tap 0, tap 1, tap 6, and tap 3 — all on the numpad — and then release the Alt key and press enter. Bam! You just created the £ needed to go to the £.com website (which resolves and redirects to poundsymbol.com).
But how do you do this for the "ǝ" in sǝx.com? The domain name converts to "xn--sx-73a.com" in your browser once you press enter, so I thought that might give me a clue to typing in the character. But if so I missed it.
However, in researching the "ǝ" symbol I ran across this URL:
http://easycaptures.com/fs/uploaded/1110/6435628828.jpg
(That's an image of it, since when I paste it in this editor it ends up like this instead: ?text=%C7%9D)
Anyway, that URL implies that there are many different versions of the letter available in several different character sets. If so, would they all work the same in a browser for resolving to the same domain name? If so, is any particular character set easier to work with on a standard US keyboard?
There are also other URLs that seem to give different information about the actual code for the letter, such as wikipedia:
https://en.wikipedia.org/wiki/%C6%8F
(and others, but I'm at my link limit)
While they all look similar, I am wondering if the distinction between them is enough to prevent the URL from resolving properly based on which exact character from which exact character set is deployed.
And again, I am only unable to test this more as I cannot ascertain how to type most of them into the browser - particularly if the code has a letter, as that seems to start triggering shortcuts on the browser instead of considering it as URL input.
Please help me decipher the mystery (to me) of the "ǝ" (apparently also called schwa) and how I would find and type the correct code to get to "sǝx.com" or "pǝt.com" or any website that included "ǝ" in its name.
Thanks in advance!

Google web fonts custom character set

I tried to optimize Google web fonts query to include basic latin set + some of latin ext characters vital for my native language (Czech).
https://developers.google.com/webfonts/docs/getting_started?hl=cs#Quick_Start
The link above states that I can modify query to include only some characters to make it significantly lighter. So i tried those characters:
aábcčdďeéěfghchiíjklmnňoópqrřsštťuúůvwxyýzžAÁBCČDĎEÉĚFGHChIÍJKLMNŇOÓPQRŘSŠTŤUÚŮVWXYÝZŽ.,?!;/-_:"'|()[]ˇ+*##$%^&¨®°©
And the query looks like this( because all the "unusual" characters have to be html escaped):
http://fonts.googleapis.com/css?family=Open+Sans:300&%20a%C3%A1bc%C4%8Dd%C4%8Fe%C3%A9%C4%9Bfghchi%C3%ADjklmn%C5%88o%C3%B3pqr%C5%99s%C5%A1t%C5%A5u%C3%BA%C5%AFvwxy%C3%BDz%C5%BEA%C3%81BC%C4%8CD%C4%8EE%C3%89%C4%9AFGHChI%C3%8DJKLMN%C5%87O%C3%93PQR%C5%98S%C5%A0T%C5%A4U%C3%9A%C5%AEVWXY%C3%9DZ%C5%BD.,#$%^&¨®°©
The final result looks like normal and it is only 23KB instead of standard 45KB (with full latin ext charset). The problem is that on some computers, some characters are not properly loaded - they are rendered in Arial( for example "Ě" in word "ODPOVĚDI"). Can anyone help me where could be the problem or how could I trace it next time I see it? Or is it just because this feature is in beta in google web fonts?
This means that the font you are using simple doesn't support your chosen characters. I'm facing this problem and trying to find some solution, but at the moment with no results.
It sounds very much like a beta “feature” (i.e., bug). Generally, beta software is something that you should use only to contribute to testing and improving software in development, so you should report this bug and refrain from using beta software in production.
The bug may relate to different font formats served to different browsers by Google. This may well explain why it works on some browsers and not on others.
The difference between 23KB and 45KB is virtually ignorable these days. A single image often has a greater impact on loading time, and commonly used JavaScript libraries may require hundreds of KB.
You have to choose latin extended option for font to support your langauge character set. There is option to filter available fonts only with latin extended in google fonts site...

Abstract testing of GUIs

In general how does one test a various parts of a GUI? What are good practices? (Yes I am being overly general here).
Let take for Notepad's Find dialog box:
Notepad's Find dialog box http://img697.imageshack.us/img697/5483/imgp.png
What are some things that can be tested? How does one know its working correctly? What are edge cases to look out for? Stress tests?
Here.
I doubt any good generalization can be made about this - it always depends on the situation.
When someone asks for tests for GUI I always assume that that mean 'this part of application that is accessible via this GUI'. Otherwise it would mean testing the only the GUI without any logic hooked. Dunno why no one never actually asked for testing if the events are fired when button is pressed or is displayed window acquiring focus.
Anyway back to the question. First of all find out about equivalence classes, boundary conditions other testing techniques. Than try to apply it for given problem. Than try to be creative.
All those should be applied when creating following tests:
1) happy path tests - application acts right when given input is good
2) negative tests - application acts right when given input is bad
3) psychotic user behavior (I saw someone use this term, and I find it to be great) - that one user that has nothing better to do than break your application or is to stupid to actually know how bad and horrible things he is doing with your app.
After all this if all tests are passing and you can't figure out other, than you don't know is it working properly, but you can say that it passed all tests and it seems to be working correctly.
As for given GUI example.
1)
Is the application finding string that is in opened file?
Is the application finding character that is in opened file?
How is it reacting to reaching end of file during search?
Is it finding other appearances of given string/character or just one, when there are many of those appearances ?
Is it handling special search characters like * or ? correctly?
Is it searching in desired direction?
Is it 'Mach case ' option working properly?
When opening find setting some criteria, canceling search and launching it again - are search criteria back to default values? Or are they set as you left them when clicking Cancel?
2)
Is it informing user that no mach was found when trying to search for data that is not in opened file?
Is it reacting properly when trying to search down form end of file?
Is it reacting properly when trying to search up form beginning of file?
How search feature is reacting when no file is loaded? (in MS notepad it can be done, but in other editors you can launch editor without opening a file hence this test)
Can I mark both Up and Downs search direction?
3)
Is it working properly on 4GB file?
Can I load 4 GB string in 'Find What:' field and search for it?
Can I provide as input special characters by providing ASCII codes? (it was done like pressing Alt and number of character... or something like that)
Can I search for empty character (there was something like that in character table).
Can I search for characters like end of line or CarretReturn?
Will it search for characters form different languages? (Chinese, or other non-english alphabet characters)
Can I inject something like ') DROP ALL TABLES; (if that would be web based search).
Will I be able to launch proper event twice by really fast double click on search button? (easier on web apps)
With reasonable test suite you know it seems to work correctly.
I think it is better to separate out functional aspects and the usability aspects for the GUI testing.
Let us say in the above example take the use case of user entering some text and hitting the Find button. From the functional aspect I would say your tests should check whether this user action (event) calls the appropriate event handler methods. These can be automated if your code has good separation between the GUI display code and the
functional part.
Testing of usability aspect would involve checking things like whether the display occurs correctly in multiple platforms. I think this needs to be verified manually. But I think there are some tools that automate this kind of GUI testing as well but I've no experience with them.
It's difficult and error-prone to test finished UIs.
But if you are more interested form the programmer's perspective, please have a read of the paper The Humble Dialog. It presents an architecture for creating UIs whose functionality can be tested in code using standard testing frameworks.

Are clean URLs a backend or a frontend thing

What do you think.. are clean URLs a backend or frontend 'discipline'
The answer is BOTH.
For example:
https://stackoverflow.com/questions/203278/are-clean-urls-a-backend-or-a-frontend-thing
The number above is a database id, a back-end thing. Chop off the pretty part and it goes to the same page. Therefore the "are-clean-urls-a-backend-or-a-frontend-thing" is part of the front-end thing.
If we're talking url's being 'clean' from an end user experience then I'm going to break the mould a bit and say that url's in general are not intuitive and they never will be, they are intended to be machine readable.
There is no standard to the format of a url such that when navigating from site to site humans will never ever remember how to reach a resource purely through remembering urls and their 'friendly syntax'. We can argue the toss about whether using a '?' and '&' or '/' to express how how to identify a resource via a url; is one method better than the other? it doesn't matter. At the end of the day a machine parses it and sends back the result.
We should stop deluding ourselves that people actually type these things in and realise that uri's are for machines, not people.
I have yet to use/remember a uri that goes beyond the first few characters of the http://domain.com/ part of an address, and I've been using the web since a long time. That's what bookmarks are for. Nowhere on a website does it say 'change this part here in our url to view 'whatever else' resource' because url's are usually undocumented and opaque.
Yes make your uri's SEO friendly (hell even they change periodically) but forget about the whole 'human/clean' resource identifier thing, it's a mystical pipe dream.
I agree with Vlion that url's should provide a unique mechanism to bookmark a resource and return to it (unlike some of these abominable web 2.0 ajax/silverlight/flash creations), but the bookmark will never be for humans to comprehend and understand. There seems to be quite a lot of preoccupation and energy spent in dreaming up url strategies that humans can remember and type in, it's a waste of energy. Let's get on and solve real problems.
Sorry for the rant, but there's a lot of web 2.0 nonsense related to urls going on in certain circles that are just a total waste of time.
Now that Firefox's Awesome bar and Google Chrome's Omnibox address bars can be used to search the browsing history it makes it much easier for users to search their history for previously visited sites, so having clean urls may help the user find sites in their history more easily.
Making sure the page has an appropriate Title is important (as both browsers search the title as well as the url) but by making sure the url has relevant keywords in it as well, when those keywords are typed in the address bar the urls will be more likely to show up higher in the suggestions as the keyword will be matched twice, in the url and the title.
Also, once a user has typed the name of a site they will be presented with example urls from the site which they can then use as a template for narrowing down their search. So using verbs and nouns in the url for different sections or actions of the site will aid the user to narrow their search to just the part of the site they are interested in, e.g. the /questions/ or /tag/ sections of stackoverflow, or the "/doc" at the end of docs.google.com/doc that can be used to view just document pages on Google docs*.
Since both Firefox and Chrome search for each space separated word typed into the address bar, it could be argued that it isn't necessary for searching that the url be completely human readable, but to allow the user to actually read the keywords they are interested in from the url the amount of "noise" should be kept to a minimum.
* which are of the form http://docs.google.com/Doc?id=gibberish
My perspective is simple:
every place I visit with my browser(with various edge case exceptions) should be bookmarkable and Forward/Back should be usable and not destroy any data entry.
Backend for sure. Your server is the one that has to take care of the routing to the resources requested by the URL.
I think the main reasons for using friendly URLs are:
Ease of linking / sharing
Presentation
Seo
So I think it's purely a client-side pleasure. While they're nice on the server as well, they're not mission critical.

Resources