I have a frame with a page from a different domain. Sometimes, that page likes to use a frame-buster to break out of its frame and hijack my entire page.
I have been experimenting with different ways to handle what happens when this frame wants to break out. What I have determined would be the best way to handle this is to use JavaScript to determine when the parent page url changes (via onunload) I want to direct the user back to my homepage or close the page altogether. I am a php dev and don't really ever use JavaScript.
I have tried using but that doesn't seem to work. Any ideas?
you can use something like this:
<script>
window.onunload=function() {
return confirm('Are you sure you want to leave the current page?');
}
</script>
Related
I am adding the scroll event in javascript for one of my pages. The code is like this:
document.getElementById("myProject").addEventListener("scroll", myFunction);
function myFunction() {
document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";
}
So, when users start scrolling, they will see a text "These are all my projects so far".
My problem is how to stop showing this text when users move to another page.
Please help ( I am a verrrry fresh developer)
Thanks so much
A few thoughts.
Without knowing your dev environment (e.g. are you using MVC with a framework?), I will assume you are simply talking about separate/individual HTML pages.
Each HTML page can have its own javascript. Just like HTML and CSS, there is no need to have the same javascript functions on every page. (You don't have the same HTML content on every page, right?) Usually, we divide up the javascript into multiple files - some files are added to every page, some are specific to a certain page. It is easiest to have one (external) javascript file that you reference on every page, and then specific javascript code for each page - either in a second external file that is referenced, or on the HTML page inside <script>//js here</script> tags.
If the DIV with ID myProject is not on the other page, then the javascript won't do anything. However, it is not good to have broken javascript on a page, so make sure it is not included on other pages.
If you are using a framework, like CodeIgniter or ReactJS or Angular, please tell us so we can adjust our answers accordingly.
If the case is a switching between browser tabs, you can use two different events like below.
$(window).blur(function(e) {
// stop scroll event, when switching to another tab
document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
// start scroll event
document.getElementById("myProject").addEventListener("scroll", myFunction);
});
I am not sure what you are actually looking for, because when user switch between tabs, he can not see the text anymore no matter there is a scroll event or not. If you are concern about performance, then the above solution would help.
Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.
I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.
i use this code to prevent clickjacking :
if (top == self || parent != top || document.location.hostname != document.domain) { top.location.replace("https:\/\/www.mysite.com\/?404");}
can someone break into my code ?
note: i don't want to use x-frame-option
thanks
From an Iframe you cannot really control clicks from the parent, if they click inside the Iframe but another event is watching it, you cannot really prevent it being from a different domain.
But all is not lost, the Iframe itself cannot stop it, but it can be wrapped with something like this. This is assuming jquery, might be best to translate to a native version for your application, in the interest of showing an example I will use jQuery.
<div id="i_wrap"><iframe src="SRC"></iframe></div>
<script>
$('#i_wrap').on('click',function(event){
event.stopPropagation();
});
</script>
Of course this is not a cure-all, there are still ways around this. You could also use a portion of the new HTML 5 cross document messaging read here on it to do some validation and possible warn the user on an unsafe site (if your iframe gets no message, then you show no button).
Though I have no experience in the cross document messaging methods, and I am sure they probably don't allow different domains (though there may be ways around that, to an extent).
Though this question is not totally clear and I may not be understanding it perfectly, if you update your question with more details I will update my answer to suit.
i need to run a function periodically regardless the page where i am. This function will get some data periodically.
I dont think that this works:
function myFunc()
{
//your code
}
//set the interval
setInterval(myFunc,2000) //this will run the function for every 2 sec.
Because it works only for the page where I am right now, so if i go to another page, function is not executed anymore.
I would like to write a function that start running when user is at index page and then is called periodically until user close the page.
Any idea? Thanks in advance!
That's not possible with javascript in the browser. When you navigate away from the page, the script will stop. You have to include a script on every page that initializes this periodical update. Or you could rewrite your application to a "single page application", which seems to be popular nowadays.
You'll need a backend application or cron-job to do that.
Another way do that would be to make an Ajax-only single page application. I guess twitter uses that model.
Depending on what your doing in the function you may be best to use a JS Worker which will run as a new thread and allow you to continue processing as much as you want in the background without having to worry about JS timeouts.
The main point here is what your asking for is near enough impossible within JS unless you use something similar to jQUery and dynamically load your pages in to a div? This would mean you still have the effect (visually) that you changing page but the browser only loads the data in.
Its very easy to in fact to load content in to a DIV using jQuery its:
$('#elementoloadid").load("/path/to/load");
You could achieve this without using jQuery but will take you longer.
I have a webpage that use $(document).ready() to build the interface. Then the user can go to a child page, and to go back to the original page he can press the browser's "previous" button or a "Return" button in the page which triggers a history.back();. Back on the original page, $(document).ready() is not triggered so the page is missing information.
Is there a way to trigger it automatically like if it was a "real load"?
edit
placing an alert in it, the alert is popped but stuff is missing in my interface like if some part of the ready event is missing. Investigating...
edit 2
hahahahaha in document.ready I click some checkbox which are supposed to be unchecked. When I "back" on this page, they are checked so they become unchecked because I reclick them.
Sorry, this is completely my bad :(
A quick solution to this problem, use "onpageshow" instead.
window.onpageshow = function(event) {
//do something
};
If the user uses the Back button to navigate and you require a full reload of the page, you can set the NO-CACHE policy of the page.
This way the browser is forced to reload the page from the server, even using the Back button.
1.) put scripts at the bottom of your page.
2.) execute plugins and whatnot in your last script tag(s).
3.) Do not use onDomReady implementations at all, it's redundant.
People are so accustomed to onload or ondomready, they overlook the fact that putting your scripts at the bottom of a page does virtually the same thing without the need to poll and see if your html is available.
Furthermore, it's also good practise as your scripts do not block html/css rendering either.
Not depending on onDomReady or onLoad implementations solves a lot of issues.
Very interesting question. You might need to re-trigger the event/function when the page gets focus, or something similar. you might also need to keep a flag variable to track whether an 'event re-triggering' is in order.
I have a page with several reports that are produced via ajax calls. I am prototype.js framework on this page for some of the display functions.
The links for each report have anchors/tags like #Report1, #Report2 etc, which are hrefs with onClick functions that do lots of work to create the report via javascript.
I would like to make it so if a user bookmarks a page with a link or navigates directly with a anchor/link in the url for my page to load the report.
So if the user goes to : http://mysite/myPage.jsp#Report2 it should load the page and go to the 2nd report.
Is there anyway in my pageload I can look at the anchor/link and perform the onlcick for that anchor? I was thinking I could create a big case/if statement to figure out what to do, but maybe there was an easier way.
It all depends on how you're Ajax calls are structured really. I do something similar for opening the correct tab within a tab navigation. The code would start off like this, if you let me see how your Ajax events are hooked up then i should be able to show you the rest.
document.observe("dom:loaded", function() {
if(window.location.hash){
var report = window.location.hash.replace("#","");
}
});
EDIT
Looking at your code you would be much better off (imv) switching to an unobtrusive method where you attach events to your elements e.g.
$('ele').observe('click',doStuff.bindAsEventListener($('ele')));
This would enable you to more easily connect the same functionality to a click or a pageload but is also better practice anyway and would prevent code duplication etc. Obviously this is missing large chunks but hopefully you get what i mean