I have a simple Chrome developer extension which injects JavaScript into a target page.
It accesses the DOM no problem but will not allow me to access the variables.
<head>
<script>
window.myVar = 10;
</script>
</head>
<body>
<div id="testDiv">
some div content
</div>
</body>
Calling this snippet:
chrome.tabs.executeScript(
chrome.devtools.inspectedWindow.tabId,
{
code: scriptToExecute,
frameId: targetId
},
function(response) {
let result = [];
if(response && response.length > 0) {
result = response[0];
}
results.value = result;
}
);
This works:
scriptToExecute = document.getElementById('testDiv').innerHTML;
This returns null:
scriptToExecute = window.myVar;
Is there some way to access the variables or is it prevented for security or other reasons?
Related
We have an embedded script running on the page of one our clients. We received a report from them that the query params we send to that page are not properly guarded against XSS injection.
When I try a url like:
https://www.clientsite.com?somekey=%3Csvg%20onload%3Dalert(document.cookie)%3E
on their site, I indeed get the alert panel displaying the cookies.
But when I run our script locally, I cannot reproduce this injection. The alert panel never shows up, no matter what I put in the query param's value.
A very simplified version of the script is:
<html lang="en">
<head>
<meta charset="utf-8">
<title>XSS test</title>
</head>
<body>
<div id="content"></div>
<script>
(function() {
var url = window.location.href
var someKey = 'somekey'
var regexS = "[\\?&]"+someKey+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
var parentElement = document.querySelector('#content');
var widget = document.createElement('div');
// var svgInjection = '<svg onload=alert("alert!!")>'
// var svgEncodedInjection = '%3Csvg%20onload%3Dalert("alert!!")%3E'
widget.innerHTML = '<div>' + results[1] + '</div>';
return parentElement.insertBefore(widget, parentElement.firstChild);
})()
</script>
</body>
</html>
I don't understand how an identical script, receiving identical query params, shows an alert panel on the client's site, and nothing when I run it locally. Any thoughts?
I have created a chrome extension which send a form to GTmetrix.
This is the html code:
<html>
<head>
<title>GTmetrix Analyzer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check this page now!</button>
</body>
</html>
This is the JS file:
document.addEventListener('DOMContentLoaded', function() {
console.log("f")
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
console.log("f")
chrome.tabs.getSelected(null, function(tab) {
d = document;
var f = d.createElement('form');
f.action = 'http://gtmetrix.com/analyze.html?bm';
f.method = 'post';
var i = d.createElement('input');
i.type = '';
i.name = 'url';
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
console.log("a")
console.log(f)
});
}, false);
}, false);
I added the console.log events in order make sure that the code is executed, however, I expect the html to present the submitted form, including the response. The issue is that I only get the tab url added to the html when I click on the button due to(d.body.appendChild(f);) so I am not sure why I can't see it.
You can try this another approach of d.body.appendchild(f):
document.getElementsByTagName('body')[0].appendChild(f);
or have a null checker like this:
if ( document.body != null )
{
document.body.appendChild(element);
}
I'm trying to build a basic JQuery app which loads images from Flickr, adds them to an array of jQuery objects, sequentially adds them to the DOM, fades them in, and fades them out in a 3 second cycle. However, in my displayImage function, I cannot use .hide(), .fadeIn() or .fadeOut() because it throws an 'Uncaught TypeError: Cannot read property 'fadeIn' of undefined' error. Here is my code, both the JS and the HTML:
var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
//Creates the empty array of jQuery image objects
var images = [];
$.getJSON(url, function(flickrResponse){
flickrResponse.items.forEach(function (photo){
var $img = $("<img>").hide();
$img.attr("src", photo.media.m);
//Populates the images array with jQuery objects defined from the Flickr JSON request
images.push($img);
// $("main .photos").append($img);
// $img.fadeIn();
});
});
function displayImage(imgIndex) {
var $displayedImg = images[imgIndex];
$(".photos").fadeOut('slow');
$(".photos").empty();
$(".photos").append($displayedImg);
$displayedImg.fadeIn('slow');
//Function which recursively calls 'displayImage' every three seconds
setTimeout(function(){
imgIndex = imgIndex + 1;
displayImage(imgIndex);
}, 3000);
}
displayImage(0);
};
$(document).ready(main);
And
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flickr App</title>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
</head>
<body>
<header>
</header>
<main>
<div class = "photos">
</div>
</main>
<footer>
</footer>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
Any ideas what might be undefined? Note that the var $img = $("<img>").hide(); line in the $.getJSONrequest doesn't throw the undefined error!
Thanks very much!
EDIT:
I've also tried to make a synchronous request to fetch the JSON, to make sure it's loaded before the displayImage function is called, and still it throws the same errors:
var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
var images = [];
//THIS IS WHAT HAS CHANGED
$.ajax({url: url,
dataType: 'json',
async: false,
success: function(flickrResponse){
flickrResponse.items.forEach(function (photo){
var $img = $("<img>").hide();
$img.attr("src", photo.media.m);
images.push($img);
});
}});
function displayImage(imgIndex) {
var $displayedImg = images[imgIndex];
$(".photos").fadeOut('slow');
$(".photos").empty();
$(".photos").append($displayedImg);
$displayedImg.fadeIn('slow');
setTimeout(function(){
imgIndex = imgIndex + 1;
displayImage(imgIndex);
}, 3000);
}
displayImage(0);
};
$(document).ready(main);
You need to wait for the JSON to return before you try to displayImage(0). The JSON request is asynchronous, so your call to displayImage is happening before any JSON has been returned.
I recommend stepping through with a Javascript debugger to better understand what’s going on. You would see then that images is empty, and therefore $displayedImg is undefined.
The error is that the db could not be opened and $ not defined, failed to load resources(j query).The code aims at receiving the input field values(date,cal) and storing them into the database using indexedDB
<!DOCTYPE html>
<html manifest="manifest.webapp" lang="en">
<head>
<meta charset="utf-8">
<title>Diab</title>
<link rel="stylesheet" href="diab.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>
<script type="text/javascript" src="diab1.js"></script>
</head>
<body>
<input type="date" id="date">Date</input>
<input type="number" id="cal">Cal</input>
<button id="add" >Add</button>
</body>
</html>
(function()
{ var db;
var openDb=function()
{
var request=indexedDB.open("diabetore");
request.onsuccess = function()
{
console.log("DB created succcessfully");
db = request.result;
console.log("openDB done!!");
};
request.onerror=function(){
alert("could not open db");
};
request.onupgradeneeded = function()
{
console.log("openDB.onupgradeneeded function");
var store = db.createObjectStore("diab", {keyPath: "date"});
var dateIndex = store.createIndex("date", "date",{unique: true});
// Populate with initial data.
store.put({date: "june 1 2013",cal:70});
store.put({date: "june 2 2013",cal:71});
store.put({date: "june 3 2013",cal:72});
store.put({date: "june 8 2013",cal:73});
};
};
function getObjectStore(store_name,mode)
{
var tx=db.transaction(store_name,mode);
return tx.objectStore(store_name);
}
function addItems(date,cal)
{
console.log("addition to db started");
var obj={date:date,cal:cal};
var store=getObjectStore("diab",'readwrite');
var req;
try
{
req=store.add(obj);
}catch(e)
{
if(e.name=='DataCloneError')
alert("This engine doesn't know how to clone");
throw(e);
}
req.onsuccess=function(evt)
{
console.log("****Insertion in DB successful!!****");
};
req.onerror=function(evt)
{
console.log("Could not insert into DB");
};
}
function addEventListners()
{
console.log("addEventListeners called...");
$('#add').click(function(evt){
console.log("add...");
var date=$('#date').val();
var cal=$('#cal').val();
if(!date || !cal)
{
alert("required field missing..");
return;
}
addItems(date,cal);
});
}
openDb();
addEventListners();
})();
Regarding the problem of not being able to see the db created, when you open the database you should pass another parameter with the version of the database, like:
var request=indexedDB.open("diabetore",1);
To see the DB structure on the Resources tab of Chrome Developer Tools, sometimes you must refresh the page.
You will also have a problem with your addEventListners() function since your anonymous function is run before the browser reads the HTML content so the browser doesn't not know about the '#add' element, so the click event handler for that element is not created.
You should put your code inside "$(function() {" or "$(document).ready(function() {":
$(function() {
(function() {
var db;
var openDb=function() {
You should test the script URL in your browser. Then you'd realize that the script doesn't exist.
You need to change 2.0 to 2.0.0 for example.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I'm designing a simple way to communicate between iframes, and I am getting an odd XSS error, even though Both URLs have the save domain.
Unsafe JavaScript attempt to access frame with URL file:///home/bryre/sharedData/Programs/javascript/pong/htdocs/connectionWindow.html from frame with URL file:///home/bryre/sharedData/Programs/javascript/pong/htdocs/connectionTest.html. Domains, protocols and ports must match.
Do i need to have them on a server to get it to work? here is the code:
ConnectionTest.html
<html>
<head>
<title>connectionTest</title>
<script src='connection.js'></script>
</head>
<body>
<script>
var windowToConnectTo = document.createElement('iframe')
windowToConnectTo.src = 'connectionWindow.html'
document.body.appendChild(windowToConnectTo)
var connection = new Connection({});
connection.connect(windowToConnectTo, 10);
</script>
</body>
ConnectionWindow.html
<html>
<head>
<title>connectionTest</title>
<script src='connection.js'></script>
</head>
<body>
<script>
var connection = new Connection({});
</script>
</body>
connection.js
function Connection(commands){
this.inDiv = document.createElement('div')
this.inDiv.id = 'in'
this.inDiv.style.disply = 'none'
document.body.appendChild(this.inDiv)
this.commands = commands
}
Connection.prototype = {
attemptConnect: function(to){
to.document = (to.contentWindow || to.contentDocument)
if(to.document.document)
to.document = to.document.document
this.to = to.document.getElementById('in') //ERROR HAPPENS HERE
if(this.to == null)
return false
return true
},
connect: function(to, retryRate){
cThis = this
var interval = setInterval(function(){
if(cThis.attemptConnect(to))
clearInterval(interval)
}, retryRate)
}
}
They don't have any domain, they are local files. Use an HTTP server to access them.