Is it okay to populate data-* attributes with links?

General Web Dev
1

I’m using datatables.

I want to do it like this.

<table id="data" class="table table-sm table-hover" data-link="https://jsonplaceholder.typicode.com/todos">
 <!--...-->
</table>

So that I can do this.

$(document).ready(function () {
	$("#data").DataTable({
		ajax: {
			url: $("#data").attr('data-link'),
		},
		//....
	});
});

Is this okay to do? Because the link is exposed, I thought its not recommended to do this.

2

As long as you urlencode the value so that it is 100% safe to be put into an attribute and that you are fine with the URL being known and used by AJAX calls, I see no issue with it. I wouldn’t 100% trust the links coming from the data attribute since that could be modified, but again anything that you put in a data-link attribute could have just as easily be seen in the JavaScript call itself, so as long as you practice good validation, storing a link a data attribute should be fine. :slight_smile:

2 Likes
3

Is encodeURIComponent enough for encoding the url?

or maybe encodeURI ?

4

I believe there is no native function in JavaScript that behaves exactly like something in PHP known as htmlentities(), but there are some articles that talk about it. What you essentially want to happen is have the values in an attribute where it is not interpreted as HTML. encodeURIComponent is closer to what you may need but please review this article to know the differences and what might work. Or look up solutions like this one or this one.

Just remember that when it goes back to the AJAX call, it may or may not need to be decoded before you call it. I would try a few experiments to see. :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.