I have some rather lengthy HTML and related styles and javascript. I am trying to find something within them that changes the text of a specific element. It changes this...
<span class="panel-title"> I'm a Panel with All Options</span>
... to this ...
<span class="panel-title">Best Panel Ever</span>
It seems crazy, but I tried searching every single file (1704 of them) for the text "Best Panel" and Visual Studio found nothing.
So... I am hoping that a debugger in Chrome or IE can point me to script is changing this text but I'm not familiar enough with those debugging tools to perform a task like this... or if it's even possible.
Edit for Clarification
Just to be clear... this is straight HTML, CSS, and Javascript. There is nothing like ASP or PHP involved. The HTML file in question has the first text, but the rendered HTML file has the second text.
You can using the Elements tab in Chrome find a specific item in the code (CTRL + F). This screenshot might help: http://gyazo.com/72f2f8a819bf5bfad17a210a53427f2d - It may or may not help.
Edit 1
Are you sure you looked through every single file? Maybe that Best Panel Ever is coming from a database entry which has been attacked or it may just be an attack not through a database. Have you considered that to be an option?
Edit 2
As suggested in the chat you should probably search for occurences where the span is being changed rather than looking for a specific value as it may be stored in a variable which isn't showing the text.
Edit 3
After finding out it was something to do with LS (local storage):
I think it should be broke down in to steps, first ensure that the value in question is in LS that way you can narrow down your search to localStorage.getItem("yourKeyWhichHoldTheText") and you'd have a rough idea what you are actually looking for.
The latest versions of FireFox have a javascript event inspector. Perhaps you could inspect that element for any possible js functions that could be updating it?
Here's a resource
and another
Related
I'm writing an automated test for a Web-based application that's coded in JavaScript and uses the Dojo framework. I can find the elements I want the bot to find in Developer Tools using well-defined XPATHS, but the automated test fails to find the text the XPATH leads to.
My test code looks something like this:
if verified:
verify_detail.set_pass()
else:
raise AssertionError("Cannot verify detail. Text did not match expected value.")
And the text I'm looking for on the UI isn't misspelled in the config file.
Anyone else have this problem? XPATH works in Developer Tools but fails when the test is run.
Edit 1:
I think I've found a clue as to what's causing this problem. The bot has to navigate to a panel called the details panel. The details panel, when opened, sits on top of another panel called the movie panel. Imagine a list of movie titles and the details panel is opened by right clicking the movie and selecting 'Details' from a dropdown.
So I've basically got a stack of panels, and my XPATH queries are hitting the pane beneath the details pane, which is where I really need to to look.
Has anyone else ever had this problem?
There is not much information to go on, but I realise that it is very hard to deliver a complete example for such cases.
The most common reason for this kind of behaviour is that the element in question is not present immediately on the page, but rather some JavaScript processing has to happen before it will appear.
The most common solution is using "implicit waits", see for example:
https://selenium-python.readthedocs.io/waits.html#implicit-waits
Be aware that this might affect performance of tests in other places, specifically when checking for absence of elements, if it is switched on constantly.
The obvious alternative is explicit waiting.
Another useful tool for analysing situations like this, is to set debugger breakpoints in the browser on DOM elements that you are interesting in, to see how the element is changing while the page is loading.
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.
One of my clients wants to distribute a javascript widget that people can put on their websites. However he wants to ensure that the backlink is left intact (for SEO purposes and part of the price of using the widget). So the javascript he's going to distribute might look like this:
<script id="my-script" src="http://example.com/widget-script.js"></script>
<div style='font-size:10px'><a href='http://www.example.com/backlinkpage.html'>
Visit Exaxmple.com</a></div>
widget-script.js would display some html on the page. But what wew want to ensure is that some wiley webmaster doesn't strip out the back link. If they do we might display a message like "widget installed incorrectly" or something. Any ideas / thoughts.
Some code taken from this question.
There's no 100% way of preventing this, I'm afraid.
You could insert the link yourself with Javascript, but then it'd be for naught as far as PageRank goes.
You could give them the HTML with the link having an ID like mycompanybacklink and check with Javascript whether the element exists or not. If it doesn't, don't display the badge or whatever. If it does, you can verify that the link's href is your website and its text is what you want. You would have to edit the HTML you posted as sample so that the link comes before the script, not after. The element could still exist, however, but be blocked by some other element or simply hidden with CSS. You could then also do something akin to what jQuery does now with its :hidden selector: Instead of looking at the CSS property by itself (which is what a webmaster is most likely to try) you can just see whether the element itself or its parents take up any space in the document. I think this is done with offsetWidth and offsetHeight but I am not sure. Worth looking into, though....
If you wanted to ensure that the link is always there with the widget, you could just have it printed via JavaScript. However, I don't think search engines would pick it up as a backlink.
I think you're just going to have to trust that your users will act in good faith and show you the courtesy of not modifying/removing the link. You also need to accept that no matter what you do, a determined webmaster will be able to use your widget without displaying the link, and some inevitably won't, but they are likely to be in the minority (unless your backlink is just really intrusive or obnoxiously distracting).
Any JavaScript/HTML solution could simply be edited out by the webmaster. You'd have to make your widget in flash if you really want to prevent tampering.