I am building a webapp and have a few arrays that I would like to pass through the URL in order to make the results of my application easily sharable.
Is there an efficient way to do this? I know a lot of websites (like youtube) use some sort of encoding to make their URLs shorter, would that be an option here?
Thanks in advance!
What I suspect you're asking is you have some page where the user can alter information, etc, and you want a way to create a URL on the fly with that information so it can easily be accessed again. I've listed two approaches here:
Use the query string. On your page you can have a button saying "save" that produces a URL with info about what the user did. For example, if I have a webpage where all I do is put my name in and select a color, I can encode that as http://my-website.com/page?name=John_Doe&color=red. Then, if I visit that link, your page could access the query object in JavaScript and load a page with the name and color field already set.
An approach for the "YouTube-style" URLs would be to create a hash of the relevant information corresponding to the page. For example, if I were creating a service for users to store plaintext files. These files are to have the following attributes: title, date, name, and body. We can create a hash of the string hash_string = someHashFunction(title+date+name).
Of course, this is a very naive hashing scheme, but something like this may be what you are looking for. Following this, your URL would be something like http://my-website.com/hash_string. The key here is not only creating these URLs, but having a means to route requests on the server side to the page corresponding to the hash_string.
Related
I'm working on a web application where a large set of data can be filtered using JavaScript. When a user selects filters, I want to update the URL of the page to reflect the selected filters so that the user can share that URL with someone else, and that person can load the page and my app will apply the same filters. I don't have a need for the back buttons in the browser to cycle thru the previous filters that were selected.
I think I have two approaches here:
I can create a representation of the filters and add them to the fragment of the current page via window.location.hash. I can parse them on page load to see if there are any already set.
I can create a representation of the filters as query string params, and manipulate the URL using the history API. I would use the replaceState method.
Is there a reason to chose one over the other? Again, I want to emphasize that I'm not concerned with any routing or browser history manipulation. I just want to provide a way for someone to put certain params in the URL that my JS code will parse and apply as the filters.
Using the Vue router and may be also vuex for state management should help you save some time. There is also a little helper library for url encoding / decoding --> qs.
To your question "history vs hash": that depends on your application, the system which hosts the application (e.g. part of a content management system with its own url handling) and the meaning of the params.
History mode generates better looking paths and features some more control, as long as you stay in your application. But: as your path segments have no identifiers, the sort order matters.
Scenario: You have an application which can have three params:
/value1/value2/value3 means something else as /value1/value3/value2
With a query string you don't need to take care about sort order, as every value has its key:
key1=value1&key2=value2&key3=value3 is the same as key1=value1&key3=value3&key2=value2
I've read about escaped fragments, but I don't think that it applies here because what I need to do is to route specific URL routes to certain actions on the same page in a SEO-friendly way.
Consider an example: a page has 30 posts in it. The markup is already there, no AJAX magic here. Once a user clicks a URL like example.com/#/test-post, I want to open a popup with the post contents (suppose that test-post is the post slug or any other content identifier).
This applies to posts, image galleries and pretty much any content that I want to show in a popup by matching a URL route to a certain Javascript action. The technical part is a piece of cake, but how would this perform SEO-wise? I understand that using separate pages for individual posts would probably be best, but is it possible to allow a single-page website to be crawled for individual posts so that the test-post accessed through example.com/#/test-post via Javascript ends up as a separate link in Google search results?
Using Hash Properties in order to do different things on the same webpage via JavaScript might be really useful at some situations. However, looking it from a SEO prespective, I don't thing is a great solution at all.
The reason of that is that the fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. As a result from a SEO prespective, only one page will be stored.
I would suggest you, to make usage of .htaccess and Friendly URLS to do so. For instance, this might look like this:
SEO friendly URL: `www.example.com/test-post`
window.onLoad = function(){
var URL = window.location.href;
switch(URL){
//Perfom different actions here
}
}
I have angularjs application. I have edit form where url in routing is app/edit/:id. When I go to app/edit/5 then I can edit object where id = 5. But when I change manually url link to app/edit/6 then app loads object where id = 6. And it's my problem because my user can't edit this object. How to detect this situation? How to block it? Any options? Solution can be from other js framework.
The technique you are looking for is tamper-proofing your query string.
The idea is that you generate your query string on a server, calculate its hash value, add that hash to the query string and then check the hash on the server when user clicks on or somehow uses that link. However, it may still be prone to attacks.
Anyway, tamper-proofing query strings is not a common practice across the web, and should not be used as a replacement for authorization and authentication, so you should ask yourself, do you really need that?
The setup is basically having Page A with anchor links as such
<a href="/index.php/iframe-wrapper?http://www.[desired link].com">
upon click, the URL is written as such in the users browser
http://www.[site].com/index.php/iframe-wrapper?http://www.[desired link].com
an iframe calls what comes after the querystring through javascript and displays it in the frame through
var query = window.location.search.slice(1);
basically being able to have URLs on Page A display in an iframe on Page B
im stumped on how to remove the querystring from the end result (maybe through htaccess?) (as it is modifiable on any user browser leading to all sorts of vulnerabilities)
if anyone would be able to help me out with htaccess or some other similar method, i will be deeply grateful
I'm not aware of any way that .htaccess could help decrease the chance of vulnerabilities. You're still accepting a query string and using that as the iframe source, which means anyone can still just submit any URL in the query string regardless.
A more secure way to handle it might be to create a database table containing all of the potential URLs. You could enter them manually, or if they change frequently you could have a secure form where authenticated users (or admins) can administer them.
Then in the query string of the link you can simply pass the id of the table row which contains the URL you want to use, and retrieve the appropriate URL for that ID server-side using PHP.
In this way, the iframe can only ever display one of the URLs that are stored in the database. Someone could still enter whatever they want in the query string, but it won't matter because if it's not the ID of a valid URL you can display an error message (or a default URL or whatever other fallback behavior you want).
Just a simple question, I was wondering why some websites have something like "?lang=EN" in their URL after selecting a language? Is it because their html file or folder containing it is named "?lang=EN", or some other code that does this? I'd like to set the URL like that for my website (has 2 languages). Currently I have folder structure like this:
Language selection: D:/media/index.html
EN site: D:/media/en/index.html
CN site: D:/media/cn/index.html
Files for the website: D:/media/site
Thanks.
First of all, anything after the file extension ( .html ) is a server side function.
The ? is a function for PHP and adds variables to the super global GET array ( in the form: ?variable=value&variable2=value2 ) that is directed to from another page and from that point many things can be done with the data.
Sites that use the ?lang=EN are probably programmed to print out the chunks of text needed on the single page in the places and languages required. Though it is possible using this method to redirect to a language specific directory.
Hope this helps :)
That's because they often have a content management system where the content isn't stored in files necessarily, but in a database. The lang=en is a GET variable from the URL that they retrieve in, for example, PHP, to display the correct content. In your case, however, you can just redirect the user if they click EN or CN to the appropriate locations, in your case, /en/index.html and /cn/index.html.
The url you see at the address bar, whatever comes after "?" is called "QueryString" and with libraries on the server side (based on the developing platform that website is made on) you can access the values. For instance the value of "lang" can be equal to "EN" or "CN" etc.
By the way you can have some http handlers to rewrite the requested url and get your parameters through the url that physically doesn't exists. Like the one you mentioned, "http://yoursite.com/en/default.whatever". I myself prefer this way but as you requested you should use some server side libraries to access the query string values and choose the language of the content you wanna send to client.
Also as one solution that once I used, you can also use some translation service (like translate.google.com) client libraries and call it at client side with jquery or even javascript and translate all the texts on page load. Although it's damn fast in action, it has some issues you will see.
Hope it helps.
PHP uses $_GET to get value from variables from the URL.It gets the value from that LANG variable and then it selects all from a file where are stored all the words in different languages or from the database
You don't need to copy every file and then translate it.
Search for php dynamic pages tutorial in your case. I found THIS.
P.S. PHP is one from many ways to do this.