Forums | MacLife
You are not logged in.
#1 2009-06-29 11:17 pm
Adding event handlers
I'm trying to move all event handlers in my pages to externally added.
This is for Content Security Policy compliance, which removes all inline JavaScript, including the on* attributes. All JS must be in external file linked to in the head portion of a document. Using js to add event handlers via the DOM2 calls also is forbidden in a CSP compliant page.
This how I'm adding event handlers:
Code:
function AttachEvent(obj,evt,fnc,useCapture) {
if (!useCapture) {
useCapture=false;
}
if (obj.addEventListener) {
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) {
return obj.attachEvent("on"+evt,fnc);
} else {
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc) {
if (!obj.myEvents) {
obj.myEvents={};
}
if (!obj.myEvents[evt]) {
obj.myEvents[evt]=[];
}
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt) {
if (!obj || !obj.myEvents || !obj.myEvents[evt]) {
return;
}
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) {
evts[i]();
}
}I then use the AttachEvent function to add the handler (called by a function that runs via window.onload)
It works (at least in Firefox, haven't tested in Windows) except I'm having a problem with form onsubmit.
The way that works with inline scripting:
Code:
<form id="records" onsubmit="return formAdd()">
(uninportant attributes to question removed)
formAdd being the client side form validation to catch mistakes before it is sent to server (yes. I server side validate as well).
This is how I am trying get the same effect w/o inline js:
Code:
var myForm = document.getElementById('records');
AttachEvent(myForm,'submit',function() {return formAdd()},false);It works in that form validation is in fact run, but after telling me of the errors, instead of return to the user can fix the errors, it then submits the data to the action page - which it should only do when there are no errors in client side validation.
my guess is the "return" is part of the problem. Adding onchange attributes where the attached function is just function(args) works perfectly (er, at least in firefox, but the functions in first bbcode code block are suppose to do it the right way depending upon the browser, and do it correctly for firefox - which I believe uses the W3C model)
It's not hard to quit smoking. I do it 20 times a day.
Offline
#2 2009-06-30 7:32 pm
Re: Adding event handlers
A while back over at Macstack I made it so all event handlers are added externally.
I use this function. The e.returnValue is the important part in preventing an action from happening in IE.
Code:
/*Internet Explorer sucks*/
function addEvent(thisElement, thisEvent, thisAction, bubble, allowDefault)
{
if (navigator.appName !== 'Microsoft Internet Explorer')
{
thisElement.addEventListener(thisEvent, function (e)
{
if(allowDefault === false)
{
e.preventDefault();
}
thisAction();
}, bubble);
}
else
{
thisElement.attachEvent('on' + thisEvent, function (e)
{
thisAction();
if(allowDefault === false)
{
e.returnValue = false;
}
});
}
}Offline
#3 2009-06-30 8:05 pm
Re: Adding event handlers
Also, it's often better to link to external javascripts at the bottom of the body rather than in the head and then to use defer="defer" if the functions in a script are not immediately needed so that the page can be laid out before javascript is downloaded and executed.
Offline
#4 2009-07-01 5:07 am
Re: Adding event handlers
matt wrote:
Also, it's often better to link to external javascripts at the bottom of the body rather than in the head and then to use defer="defer" if the functions in a script are not immediately needed so that the page can be laid out before javascript is downloaded and executed.
It has to be in the head for mozilla's content security policy.
They are very specific -
all meta elements must be the first children of the head, any meta tags that come after non meta tags get removed from the dom.
all script elements must be in the document head, can not have any children, and must be from a CSP whitelisted source (sent either as a header or meta tag) or they get removed from the dom.
The purpose of the (to be honest) somewhat anal CSP mandate is to neuter XSS attempts.
images must come from white listed image sources, even CSS has to come from white listed CSS sources (though inline CSS is legal, as long as you white list self)
CSP is of course voluntary, don't send a CSP header/meta tag and the user don't get no protection from XSS - but IMHO it's a good idea.
I'm not having a problem attaching events in general, just the "onsubmit" event.
When does as inline - it works. When attached, the function is still called on submit but the form data is sent to action regardless of what the function returns.
I wonder if it actually is a firefox bug.
It's not hard to quit smoking. I do it 20 times a day.
Offline
#5 2009-07-01 11:10 am
Re: Adding event handlers
To prevent a form from actually submitting, preventDefault and returnValue are what you will need to look into for Firefox and IE respectively.
Offline
