I'm creating a simple "try it yourself" code editor like the one found on W3schools. Looking at the source, it seems all that one does is use JavaScript's document.write() command to write whatever is entered into the textarea on the left into the iframe on the right, without any sanitation:
function submitTryit() {
var text = document.getElementById("textareaCode").value;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
}
Is that secure in itself, or am I missing something inside the w3school's editor that does something more for security's sake?
Thanks,
If that javascript is not persisted in such a way that it can render to browsers of users other than its authors, you should be fine. Otherwise you are creating a platform that can be used to propagate XSS worms. Just allowing a user to execute arbitrary javascript on their own page is no less secure than that most modern browsers having a debugging console that lets a user execute javascript.
Related
I am relatively new in web development, so not sure I am explaining myself with the right terms, but have come to this little issue in a small project of mine:
I have a navigation menu with functionality (mainly style related) added through a switch. When browsing the mobile version of the site, the elements inside the menu change differently and as that I want that some of the commands listed on the switch case to not be executed. Here's a simplified example in the code I have:
//main (desktop) site functionality
$(".nav").click(function(event) {
var what = event.target.className;
switch (what){
case "item 1":
if ($(".text1").css("display") == "none"){
$(".text1").css("display", "block");
//this below is the line I don't want it to execute when on mobile
$(".item5").css("margin-top","196px");
} else {
$("text1").css("display", "none");
$(".item5").css("margin-top","0");
}
break;
});
//This is the function I use to know you are browsing on a mobile,
//where the main change inside the CSS media query is not displaying the "scroller"
function checkif(){
if ($(".scroller").css("display") == "none" ){
$(".item5").insertAfter($(".item12"));
if($(".text1").css("display") == "block"){
$(".item5").css("margin-top","0");
}
}
});
This is simplified, the changes within cases are more than just a margin, I change color, text, display of multiple elements. As that I don't want it to just not execute the switch, just to read the properties of the checkif() function and execute those instead of the ones in the switch when overlapping (as in the margin).
Thank you!
Seems like the key to your solution is to find whether the user is using a mobile device or not.
Let me suggest you another way to detect mobile device instead of your checkif() function.
function isMobile(){
// Get device user agent string
var userAgent = navigator.userAgent;
// Regular expression to sniff user agent
var regexp = /mobi/i;
// Test if the regexp exists in the user agent string
return regexp.test(userAgent);
}
console.log(isMobile());
More notes on this here.
Anyway, you should be doing what you need to do in CSS instead of JavaScript unless you have a good justification.
This has probably been answered before but i don't understand al the difficult research online so i ask it here And hope for a easy answer
<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPad') != -1)) {
location.replace = "http://www.joey-games.byethost4.com/games/";
} // ]]>
This does not redirect me.
var isiPad = navigator.userAgent.match(/iPad/i) != null;
//or by using
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua)
You can find other related information in the following links:
http://fellowtuts.com/jquery/ipadiphone-detection-using-javascript/
Detect iPad users using jQuery?
Instead of using location.replace use location.href
Your snippet becomes
if (navigator.userAgent.indexOf('iPad') > -1) {
location.href = 'http://www.joey-games.byethost4.com/games/';
}
I've made two changes to your code
!= to > in the if statement which is no biggie (nothing relevant)
changed method call from replace to href Taken from MDN
The Location.replace() method replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.
This basically says that if you use replace you cannot use the browsers back button to get to this page anymore, basically reducing the users user-experience since they'll get confused about what the back button does when they use your website.
This will redirect your users on the iPad to a different website however, you shouldn't do this - it's bad for your users and your website. (as partially explained above)
Iam Not gonna use The redirecting to go to "Joey-games.byethost4.com/games/" I wil redirect iPad users to: Joey-games.byethost4.com/mobile/iPad/ for a mobile site since flash player is not supported in safari yet
I am trying to start 3 applications from a browser by use of custom protocol names associated with these applications. This might look familiar to other threads started on stackoverflow, I believe that they do not help in resolving this issue so please dont close this thread just yet, it needs a different approach than those suggested in other threads.
example:
ts3server://a.b.c?property1=value1&property2=value2
...
...
to start these applications I would do
location.href = ts3server://a.b.c?property1=value1&property2=value2
location.href = ...
location.href = ...
which would work in FF but not in Chrome
I figured that it might by optimizing the number of writes when there will be effectively only the last change present.
So i did this:
function a ()
{
var apps = ['ts3server://...', 'anotherapp://...', '...'];
b(apps);
}
function b (apps)
{
if (apps.length == 0) return;
location.href = apps[0]; alert(apps[0]);
setTimeout(function (rest) {return function () {b(rest);};} (apps.slice(1)), 1);
}
But it didn't solve my problem (actually only the first location.href assignment is taken into account and even though the other calls happen long enough after the first one (thanks to changing the timeout delay to lets say 10000) the applications do not get started (the alerts are displayed).
If I try accessing each of the URIs separately the apps get started (first I call location.href = uri1 by clicking on one button, then I call location.href = uri2 by clicking again on another button).
Replacing:
location.href = ...
with:
var form = document.createElement('form');
form.action = ...
document.body.appendChild(form);
form.submit();
does not help either, nor does:
var frame = document.createElement('iframe');
frame.src = ...
document.body.appendChild(frame);
Is it possible to do what I am trying to do? How would it be done?
EDIT:
a reworded summary
i want to start MULTIPLE applications after one click on a link or a button like element. I want to achieve that with starting applications associated to custom protocols ... i would hold a list of links (in each link there is one protocol used) and i would try to do "location.src = link" for all items of the list. Which when used with 'for' does optimize to assigning only once (the last value) so i make the function something like recursive function with delay (which eliminates the optimization and really forces 3 distinct calls of location.src = list[head] when the list gets sliced before each call so that all the links are taken into account and they are assigned to the location.src. This all works just fine in Mozilla Firefox, but in google, after the first assignment the rest of the assignments lose effect (they are probably performed but dont trigger the associated application launch))
Are you having trouble looping through the elements? if so try the for..in statement here
Or are you having trouble navigating? if so try window.location.assign(new_location);
[edit]
You can also use window.location = "...";
[edit]
Ok so I did some work, and here is what I got. in the example I open a random ace of spades link. which is a custom protocol. click here and then click on the "click me". The comments show where the JSFiddle debugger found errors.
Is there a way to pull links from incoming visitors on a page (referrals)? I essentially want to do some if statements.
if user is from Nextag.com {do some javacode} else from Pricegrabber.com {do some javacode}.
Before I can do the if statements I need to find out how that user got on our page (where did they come from). I know google analytics does this but is there a way to hard code it on one page so I can do the above?
You can get the referer URL with document.referrer, it is supported cross-browser.
It might not be set though based on the user's privacy preferences, firewall, etc. Some proxies also clear or fake it.
You can run some Regexes on the value or use indexOf, and do some actions based on them.
For example (not final code):
if (document.referrer.indexOf('nextag.com') != -1) {
//user came from nextag.com
}
MDC Docs on document.referrer
You can use document.referrer (assuming it is populated by the user's browser).
Use the document.referrer property to get the originating URL, plus some basic pattern matching for validation:
var reURL = new RegExp("^https?:\/\/(www.)?nextag.com\/", "i");
if (document.referrer.length && reURL.test(document.referrer)) {
alert("Hello, nextag.com!");
} else {
alert("Hello, world!");
}
i am using javascript to read the content of .aspx page. but i am not able to read it. i am using javascript as:
function edit(headtext,totext, bodytext, footertext){
alert('lll');
//var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false";
xmlDoc.load("theme3ex.aspx");
var students = xmlDoc.documentElement;
alert('0000');
var student = students.childNodes(0);
document.getElementById('txtareahead').innerHTML = headtext;
document.getElementById('txtareato').innerHTML = totext;
document.getElementById('txtareabody').innerHTML = bodytext;
document.getElementById('txtareafooter').innerHTML = footertext;
location.href = "MailSender.aspx";
}
is there any problem eith my javascript..
First problem is that you've commented out the line which creates the AJAX object, so none of the subsequent code will work because they're trying to access an object which doesn't exist.
Second problem is that even if you uncomment that line, it's using Activex/MSXML which will only work with IE (and even then only older versions of IE).
In short, your code isn't good, and needs to be entirely redone rather than being fixed.
My recommendation is that you find a more up-to-date example of how to do AJAX code. Possibly even just use a good quality Javascript library like JQuery.
I agree with #Spudley's point.
It's also worth mentioning that if the textboxes such as txtareahead are ASP.NET TextBox Controls, then the ID's will have most likely changed during rendering.