html - correct way to append json to a link

Question

Hi I have a code which uses facebook login:

<iframe allowtransparency="true" frameborder="no" height="600" scrolling="auto" src="http://www.facebook.com/plugins/registration.php?
client_id=183620578322567&
redirect_uri=http://example.com/store_user_data.php?&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"password"},
{"name":"gender"},
{"name":"birthday"},
{"name":"captcha"}
]"
scrolling="auto"
frameborder="no" 
style="border: none;" 
width="500"
height="600">
</iframe>

as you can see the json part(fields) in the src attribute is something wrong with a quote missing possible but I'm unable to attach it, so how would be the correct way? thnks

I have updated my answer to cover all the possible points regarding your question, check that out. — Mehran Hatami, Dec 26 '13 at 23:32

Mehran Hatami · Accepted Answer · 2013-12-26T22:52:15.723

some does and don't regarding your issue:

don't use escape(), its been deprecated since ECMAScript v3.
Use encodeURI() instead. you can also use decodeURI() in the way round.
don't use encodeURIComponent() to escape all the url string, since it would ruin your URL, use it just when you want to send a url as a paramter.
don't use ' for the attributes in your json, use " instead, because the mentioned functions does not encode the ' character.

for instance, you can add your json to the url, and then call encodeURI:

var url = 'http://myhost.com/?{"key", "value"}';
var myEncodedurl = encodeURI(url);
//result-->http://myhost.com/?%7B%22key%22,%20%22value%22%7D

but

encodeURIComponent(url);
//result-->http%3A%2F%2Fmyhost.com%2F%3F%7B%22key%22%2C%20%22value%22%7D

then using encodeURIComponent would help you if you want to send all that url as a parameter, like this:

var myEncodedurl = 'http://myotherhost.com/?myurl=' +
                    encodeURIComponent('http://myhost.com/?{"key", "value"}');
//result-->http://myotherhost.com/?myurl=http%3A%2F%2Fmyhost.com%2F%3F%7B%22key%22%2C%20%22value%22%7D

BTW, for your sample you'd better try:

var url = 'http://www.facebook.com/plugins/registration.php?client_id=183620578322567&redirect_uri=' +
encodeURIComponent('http://example.com/store_user_data.php?&'
+ 'fields=['
+ '{"name":"name"},'
+ '{"name":"email"},'
+ '{"name":"password"},'
+ '{"name":"gender"},'
+ '{"name":"birthday"},'
+ '{"name":"captcha"}'
+ ']&"'
+ 'scrolling="auto"'//extract it from encodeURIComponent if they belong to your original url
+ 'frameborder="no"'//extract it from encodeURIComponent if they belong to your original url
+ 'style="border: none;"'//extract it from encodeURIComponent if they belong to your original url
+ 'width="500"'//extract it from encodeURIComponent if they belong to your original url
+ 'height="600"'/*extract it from encodeURIComponent if they belong to your original url*/);

I'd say `encodeURIComponent` is the correct one for query strings. — Fabrício Matté, Dec 26 '13 at 22:21
you'r right but other than this, there are some points that I have added to my answer. — Mehran Hatami, Dec 26 '13 at 23:03

score 2 · Answer 2 · edited May 23 '17 at 12:22

2

You should properly escape the whole string. Use the JavaScript encodeURIComponent() function.

There are more information about javascript url escaping here: URL encode sees “&” (ampersand) as “&” HTML entity

edited May 23 '17 at 12:22

Community

1
1

answered Dec 26 '13 at 22:15

Lajos Veres

13,595
7
43
56

Just note that `encodeURIComponent` was not meant to escape whole URIs, it should be applied to every query string parameter value (and parameter name) which needs escaping. – Fabrício Matté Dec 26 '13 at 22:35

score 1 · Answer 3 · answered Dec 26 '13 at 22:17

at the basic level, you need to change src="..." to src='...' so that the double quotes inside your JSON aren't used to close the src attribute. However, you should really url encode all special characters in the url and try to avoid carriage returns in your url.

html - correct way to append json to a link

3 Answers3