I was looking at popular LinkedIn post feature, the three dots seems to trigger html injection inside specific tags. My first question would be, why they did this choice, however what really interest me, is how can I debug and understand the mechanics involved, since when I inspect the page with firefox I cannot find the starting point nor the triggers to control this pop-up trigger?
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.
Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.
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...
I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!
I have created a Drupal website that uses Openlayers to display maps. In one of these maps there are some "Filters" which the user can use to dynamically change the data shown in the map. The data are related to countries are shown as bubbles over the countries. The bubbles are drawn using Openlayers' API. A good amount of calculations go behind the scene while filters are selected. I have used setTimeout to avoid long running loops. The filters work fine. However, after a number of filters are clicked (e.g. if 12 filters are clicked), if the user tries to move to another page by clicking a link, in IE7 and IE8 the following error shows -
"Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive."
This error does not show in any other browser and does not show in IE7, 8 until a link is clicked. Any pointer in this regard will be highly appreciated.
UPDATE : The problem was in OpenLayers' event cache. OpenLayers's clears the event cache in the window unload event and this was getting stuck in IE7 and IE8 (I am not sure why). So far I have been able to solve the issue when user clicks another link, by calling OpenLayers.Event.unloadCache() on click of normal links.
jQuery can be very resource expensive. The articles linked bellow gives you 10 good advices to perform better your jQuery applications. The most useful for me (I had the same problem a month ago) was to replace $.each() with traditional for lops and to replace extensive DOM construction with jquery templates. Also the use of ID instead of classes and to give a context for the selectors, selector caching, and so on.
This list is ordered using my own criteria of "usefulness" in the advices.
10 ways to instantly increase your jquery performance
improve your jquery 25 excellent tips
10 advanced jquery performance tuning tips from paul irish
8 jquery performance tips
You need to optimize your client script. Please refer to answers here.