I need a control in html that simulates the address bar of a browser.
For example, if I type "www.google.com" I want to automatically put the prefix "http://"
or suggest the suffix .com. Also, to be able to control the history of it.
Do you know a jQuery plugin for this ? or how can be this done using css and javascript ?
It can be done using html/css/js
I would suggest using jQuery to get the value of a html form field. Checking if there's a http:// or not/adding it is really not a big deal with Javascript.
I guess, you want to send the request with Ajax? Be aware that you can't just easily load any page external pahes you want in display them e.g. in a iframe. see here
Last but not least, jQuery this plugin could help you with your history.
Don't be afraid to try it on your own, instead of wasting to much time of looking for the perfect plugin you want to have. The internet is full of examples how to get the value of an element using JS or changing it's value. It's shouldn't be a big deal to simulate an address bar.
Related
When we had done security audit of our project, we got broken Link "/a" vulnerability.
After searching for link throughout project we found link in JQuery-1.9.js java-script file that we are using in our project.
small part of code in that JQuery-1.9.js -
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
hrefNormalized: a.getAttribute("href") === "/a",
As per my understanding this code part helps for making it(JQuery) compatible with IE 6/7/8.
hrefNormalized is used to check that anchor tag is giving href value as full URL or exact href , which is issue in IE version.
The better explanation of this part is given in
https://www.inkling.com/read/jquery-cookbook-cody-lindley-1st/chapter-4/recipe-4-1
I want to remove this vulnerability but i don't want to remove or change code in JQuery js file.
So, My question is why did not JQuery designers used "/#" instead of "/a" .What is the problem of using "/#" in that code.
Earlier same question is asked by someone to JQuery Team,but they told that it not the problem from Jquery.
For reference of that ticket
http://bugs.jquery.com/ticket/10149
Help me to solve Or Is there another solution?
Thank you
This is not a vulnerability but a false positive. The security scanner interprets the "/a" string as a link, which it is not.
Even if jQuery creates the link in the DOM, it's not clickable or visible to the user. Your website does not actually have a real link to /a anywhere.
I would ignore the problem without changing anything.
Maybe, if you want this hrefNormalized: a.getAttribute("href") === "/a", to be transformed into this hrefNormalized: a.getAttribute("href") === "/#", but you don't want to touch the jQuery file.
Put that second one in a script in a an order so that the browser reads your script after reading the jQuery file, so it mashes.
Anyway, I never had issues with jQuery before, check your code first.
If you don't want to have your views with scripts, put it in a js file and link this file to your view after the jQuery file.
Hope it helped you, or at least gave you some ideas to solve your problem. Good luck, let us know how it goes! ;)
EDIT:
<script src="~/JQuery/jquery-2.0.3.js"></script>
<script src="~/Scripts/Fix.js"></script>
If you do something like this, the browser reads first the jQuery, then it reads the Fix.js. Inside the Fix.js, you put the function or paramater you want to change from the jQuery.
So the Browser will get the latest one it reads if they are equal.
For example:
function whatever (){ //This in jQuery file
//things #1
}
function whatever (){ //This in Fix file
//Different things #2
}
This way the browser chooses the Fix.js one, because was the last he read.
Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.
We have an option of disabling the right click event on the HTML page at same user can click on view menu > source and can get a copy of the content displayed.
How do i make it into unreadable format? Just like when you do a google search and see the source of page very similar to it? How can this be done?
You can't. You can obfuscate the scripting and minify the html (remove all unnecesary whitespace) that's what google does). So, making the readability of the html (by obfuscation, minification) more difficult is the best option (if you must).
You can also go flash ofcourse, like in this website
How do i make it into unreadable format? well you can't change the format, its plaintext, this is how the browser expects AFAIK, when gmail first came out, its source code was sort of hidden, what they did actually is have the entire source of the page rendered using hidden iframes and JS, as such users would right click and get <!DOCTYPE html><html><head></head><body><div></div></body></html> but this is no longer the case.
how does Gmail hide its source
Try to compress the code using this site http://www.textfixer.com/html/compress-html-compression.php
It will remove all the whitespace and compress the code to make it unreadable.
I'm making a web application that uses hash tags for page navigation like this
http://foo.bar.com/#pages/home
I just realized that one of my pages is going to be kind of huge, containing it's own tree-structured menu with links that should scroll the page to different anchor tags in the page. Obviously I can't use actual hash tags for that now, since they are busy. I'm going to have to use a programmatic solution with an URL like this
http://foo.bar.com/#pages/home/section
Or would it be possible to use more than one hash symbol, perhaps changing it to this?
http://foo.bar.com/#!/pages/home#section
But how can this be done programmatically anyway?
I'd scrap the broken use of hashbangs, switch to using the history API instead and give serious consideration to the question of "If that much content is being replaced, is loading it via Ajax really providing a benefit?"
Your Question does not seem clear to me,
If your page is too large, you could go for pagination using AJAX and PHP, for more
http://www.codediesel.com/php/simple-pagination-in-php/
or http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Other wise, if you still want things to be in URL #tags, then you can go with it.
I doubt you could give something like this "http://foo.bar.com/#pages/home/ "
You could also try URL rewriting http://httpd.apache.org/docs/2.0/misc/rewriteguide.html
Update: this question is bunk. Move along, nothing to see here. You can set the value of the password text field from either JS or ObjC. I was wrong.
I have a WebKit-based Cocoa app which loads an HTML document containing an HTML form in a WebView. The HTML form contains a password text field like:
<form name="foo">
<input type="password" name="bar">
</form>
I'd like to set the value of this text field programmatically (from Objective-C if possible, but I'll do whatever works).
I believe WebKit (and every other modern browser) implements a JavaScript security feature which prevents JS scripts from setting this value programmatically.
Unfortunately, it seems that the same security restriction applies to Objective-C, as I can't seem to set the value using ObjC either. While the JS restriction is reasonable, the ObjC seems a bit unreasonable.
Is there any way to programmatically set the value of this field (short of bundling a custom WebKit in my app that has been altered to allow this)? I'm open to any suggestion.
Here's what I've tried in ObjC:
DOMHTMLDocument *doc = (DOMHTMLDocument *)[webView mainFrameDocument];
DOMHTMLFormElement *formEl = (DOMHTMLFormElement *)[[doc forms] namedItem:#"foo"];
DOMHTMLInputElement *inputEl = (DOMHTMLInputElement *)[[formEl elements] namedItem:#"bar"];
[inputEl setValue:#"baz"];
this has no effect.
This should definitely work without having to jump through any hoops to do so. I just wrote a quick test app that loaded http://mail.google.com/ and signed into it fine with the following code on SnowLeopard and Leopard:
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame
{
if (![[sender mainFrame] isEqual:frame])
return;
DOMHTMLFormElement *form = (DOMHTMLFormElement *)[[frame DOMDocument] getElementById:#"gaia_loginform"];
DOMHTMLInputElement *username = (DOMHTMLInputElement *)[[form elements] namedItem:#"Email"];
[username setValue:#"myemailacct"];
DOMHTMLInputElement *password = (DOMHTMLInputElement *)[[form elements] namedItem:#"Passwd"];
[password setValue:#"omghi"];
[form submit];
}
I also have very similar code at work whose only job is to sign into website and its been working fine on Tiger for a year. In that case I do everything, including creating the WebView via code. I would also be very surprised if Safari's autofill didn't use very similar code to this.
That said, I would make sure your app isn't doing anything crazy to the WebView. Do you do any other modification the DOM anywhere else? Try doing this in a sample app like I did and see if it works there.
Is the HTML you're loading your own or on a remote server? Some websites include Javascript that clears out form fields on load or a second or two after to prevent autofill. Perhaps you're running into that?
If all else fails, make sure nothing is being logged to the WebView's console. You can see that by opening up the web inspector or temporarily implementing the private WebUIDelegate method:
- (void)webView:(WebView *)webView addMessageToConsole:(NSDictionary *)message;
The restriction is probably because the DOM bridge hooks directly into the same code as the javascript runtime, so you need to bypass any javascript/DOM bridge.
Maybe you could set the focus on the field (if the bridge allows just that) and send keyboard events to the WebView or the Document view.
Alternatively, since those fields are native OS X components you could potentially directly talk to these (and the WebKit source code should help you figure how to get to them).
Sorry, both solutions are a little involved and I have no idea if that works! Maybe the webkitdev mailing list would have an answer, or you could try to ask the 1Password developer ;-)
how about trying to set the field as a normal text field then programmatically changing it to a password field all while the display of the field is :none then change it back to visible.
I would use -stringByEvaluatingJavaScriptFromString:.
Here's what I used (I added an 'id' attribute to the field to make it easier to grab):
[_webView stringByEvaluatingJavaScriptFromString: #"document.getElementById(\"bar\").value = \"hello\""];