How to decode JSONP data with jQuery? - javascript

I have some data that I'm retrieving using JSONP from a remote server. The content contains HTML and I need to make it so the characters render properly instead of printing the tags out. For example, if something has bold tags, it should just appear bold and not have the strong tags around it.
This needs to be done in JavaScript/jQuery. Just about everything I've found in search results uses some type of server side code.

If you read http://en.wikipedia.org/wiki/JSONP you can understand that you need to wrap you content into a Javascript function such as:
remoteScripts.js:
function getContent(){
return 'YOUR HTML CONTENT';
}
and so in your HTML page you can do via JQuery:
$('YOUR ELEMENT').html(getContent());

Related

jquery - how to escape html to prevent XSS?

I'm using laravel, when a user sends a text message, it may contain some malicious code. When I use {{}} it will show me the exact text the user has sent. If he has sent
<script>alert("malicious")</script>
it will show exactly the same and it's good, but when I use jquery ajax, I put the fetched data to some variables within some html tags and lastly append all of them to a main tag like so:
data = '';
//loop starts here // some otger codes deleted for cleanness
data += "<h2>"+response.name+"</h2>";
data += "<p>"+response.description+"</p>";
$('#mydata').html(data);
and now the problem is that if I use html() the user malicious code will be executed and if I don't, the result will not be shown as html.
I guess I should do something with $.parseHTML, isn't it?
Thanks
You should use jQuery text() to encode the data.
$('#mydata').text(data);
EDIT: To create the content of #mydata you can use
$('#mydata')
.html("")
.append($("<h2></h2>").text(response.name))
.append($("<p></p>").text(response.description))
you cannot render user data as HTML and escape it into safe way in the same time.
You may assume that some god-level regex could help you to drop just attributes but not tags. Unfortunately there are so many ways to inject JS into markup then you will never be sure.
So you have just few options:
ignore risks at all
escape all the things (either using jQuery's text() or escaping on backend side with htmlspecialchars()
use non-HTML markup that is translated to HTML by simple rules in controlled way
You can also do this to remove tags...
$('#mydata').text(data).replace(/(<([^>]+)>)/ig,"");
read more on this post
Todo List Sanitizing Input jQuery
We had a similar scenario in of the project I worked. We used to get html content from server side which should be appended to DOM using Jquery. Before adding it to Add, we wanted to validate the HTML content we received from Server to safe guard the XSS security issues. Following is the generic method to encode the HTML content,
function htmlEncode(source) {
return $("<div>").text(source).html();
}

Parsing html from external url in javascript

I want to make a javascript application able to parse an html of an external URL.
The URL will be in a different domain than my server. My idea is to get the html
of the external URL I want to parse as a String, and then parsing it (I have to check
only the content of one tag in the head of html)
1)How can I get as a String the html of an external URL in Javascript?
2)How can I parse such retrieved String?
I have red about jquery and ajax; It seems that Ajax will not allow me to do it because doesn't allow cross-domain operations. So maybe jquery can retrieve the html and parse it.. other similar post in this forum were too complicated and didn't come rightly to my point.
thanks everybody for the help

Using 'div' class name or title inside JSTL conditional tag

I have a <div> tag, I pass the <div> tag to a JavaScript call, based on the result on that JavaScript I set the title and class of the tag.
Once I returned from JavaScript, in the JSP page I want to use the modified <div> title or class in JSTL tags (JSTL code is inside <div> block) to enable or disable few lines in that block.
Is there anyway I can access <div> title or class inside JSTL condition tags?
Not directly. The JSP is executed server-side, in response to a browser request and the JavaScript is executed on the client-side, after the page contents have been sent to the browser.
To send something back from the client to the server, you could use HTML form post or an AJAX call to put/post the modified class and title data back to the server.
A good place to start for writing AJAX calls in JavaScript is on the Mozilla Development Network, or if you prefer incurring a small overhead, the jQuery library has AJAX support.

Is it possible to insert an include tag into a webpage using JavaScript?

I want to insert the following include tag into my webpage using JavaScript. <!--#include virtual='includes/myIncludeFile.htm' -->
I have tried the following but it doesn't work: jQuery("<!--#include virtual='includes/myIncludeFile.htm' -->").appendTo(jQuery("body"));
I have outputted jQuery("<!--#include virtual='includes/myIncludeFile.htm' -->") to the console and it thinks that it is a comment object (see screenshot).
Where am I going wrong and how can it be done?
The basic premise of what you're trying to do isn't going to work. The HTML "include tags" you're using are also known as "server-side includes." That is, they are processed on the server before the page is sent to the client.
By the time the JavaScript code is executing on the client, the server is already processing the response. The client-side code can't initiate a server-side include.
One thing you can do from the client-side is use something like jQuery's .load() function to make a request to the server and load the response into a specified element on the page. Something like this:
$('#includeDiv').load('includes/myIncludeFile.htm');
This would dynamically load all of the contents from myIncludeFile.htm into an element of id "includeDiv" on the page.

on jQuery change... using .html();

OK let's say I have a jQuery function... it's an AJAX Post... well after success I do this
$("#title"+id).html(Z);
and Z is var Z=$("#"+X+" textarea.editAnswer").val();.
However if I type in the textarea something like <script>alert('Test');</script> and then press save... it will save it and the test alert will popup. So... how do I fix this?
This is code injection and should be avoided with HTML encoding.
Either:
return HTML encoded result from the server (after you've saved it) and populate that into your #title element or
use escape() Javascript function to encode it on the client and populate that result into your #title element
Depending on the scenario, you should always use the one that makes it harder for the user to hack. I'd suggest you use server side approach, because users won't be able to override your custom javascript function and address their own twisted agenda...
Your options are escaping the code or using whitelists.
Do you need the html code? Take a look at this question: How to prevent Javascript injection attacks within user-generated HTML
And then these ones:
Script injection - form validation (jquery)
Do you only run htmlspecialchars() on output or is there other functionality you also do?

Categories

Resources