Skip to content

Instantly share code, notes, and snippets.

@hoffmanc
Created June 25, 2010 03:26
Show Gist options
  • Save hoffmanc/452346 to your computer and use it in GitHub Desktop.
Save hoffmanc/452346 to your computer and use it in GitHub Desktop.
yql xss capability - no idea why this works
// YQL serves JSONP (with a callback) so all we have to do
// is create a script element with the right 'src':
function YQLQuery(query, callback) {
this.query = query;
this.callback = callback || function(){};
this.fetch = function() {
if (!this.query || !this.callback) {
throw new Error('YQLQuery.fetch(): Parameters may be undefined');
}
var scriptEl = document.createElement('script'),
uid = 'yql' + +new Date(),
encodedQuery = encodeURIComponent(this.query.toLowerCase()),
instance = this;
YQLQuery[uid] = function(json) {
instance.callback(json);
delete YQLQuery[uid];
document.body.removeChild(scriptEl);
};
scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=YQLQuery.' + uid;
document.body.appendChild(scriptEl);
};
}
var oTable;
$(function() {
function InitializeTable(url){
oTable = $("table#results").dataTable({
"sAjaxSource": url,
"fnServerData": function(url, aoData, fnSuccess){
new YQLQuery("select * from html where url = '" +
url + "'", function(data){
fnSuccess(data.query.results.item);
}).fetch();
}
});
}
InitializeTable("http://tinyurl.com/394tgvg");
});
<html>
<head>
<title>Datatables Representation of Health Data from jameyer.com</title>
<script src='jquery.js' type='text/javascript'></script>
<script src='jquery.dataTables.min.js' type='text/javascript'></script>
<script src='health.js' type='text/javascript'></script>
</head>
<body>
<table id='results'>
<thead>
<tr>
<th>population</th>
<th>county</th>
</tr>
</thead>
<tbody><tbody>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax with jQuery - using YQL</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="yql-xss.js"></script>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd" role="banner"><h1>Ajax with jQuery - using YQL</h1></div>
<div id="bd" role="main">
<h2>Demo</h2>
<ul>
<li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
<li><a href="http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27" class="ajaxtrigger">Get select * from html where url = 'http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27'</a></li>
</ul>
<div id="target"></div>
<h2>Source Code</h2>
<div id="code"></div>
<ul id="nav"><li><a href="error-handling.html">Adding error handling and effects</a></li></ul>
</div>
<div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
</div>
</body>
</html>
$(document).ready(function(){
var container = $('#target');
$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));
return false;
});
function doAjax(url){
if(url.match('^http')){
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?",
function(data){
if(data.results[0]){
var data = filterData(data.results[0]);
container.html(data);
} else {
var errormsg = '<p>Error: could not load the page.</p>';
container.html(errormsg);
}
}
);
} else {
$('#target').load(url);
}
}
function filterData(data){
data = data.replace(/<?\/body[^>]*>/g,'');
data = data.replace(/[\r|\n]+/g,'');
data = data.replace(/<--[\S\s]*?-->/g,'');
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
data = data.replace(/<script.*\/>/,'');
return data;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment