क्लाइंट/जेएस फ्रेमवर्क "असुरक्षित डेटा" सुरक्षा के लिए?

Question

हमारे पास एक सामान्य वेब एप्लिकेशन है जो अनिवार्य रूप से डेटा प्रविष्टि एप्लिकेशन है जिसमें बहुत सी स्क्रीनें हैं जिनमें से कुछ जटिलता है। हमें यह सुनिश्चित करने के लिए मानक क्षमता प्रदान करने की आवश्यकता है कि क्या उपयोगकर्ता अपने ब्राउज़र को नेविगेट करने या बंद करने से पहले "सहेजें" बटन पर क्लिक करना भूल जाता है, उन्हें चेतावनी मिलती है और रद्द कर सकती है (लेकिन केवल तभी जब कोई सहेजा या गंदे डेटा नहीं है)।

मुझे पता है कि मुझे क्या करना है की मूल बातें - वास्तव में मुझे यकीन है कि मैंने इसे पिछले कुछ वर्षों से पहले किया है (पेज पर "गंदे" स्थिति को ट्रैक करने के लिए, इत्यादि ...) लेकिन इससे पहले कि मैं इस बार फिर से कोडिंग शुरू कर दूं, क्या किसी के पास पहले से ही पुस्तकालयों के लिए कुछ सुझाव हैं (मुफ्त या अन्यथा) जो मदद करेंगे? पहेली का

Answer 1

एक टुकड़ा:

/** 
* Determines if a form is dirty by comparing the current value of each element 
* with its default value. 
* 
* @param {Form} form the form to be checked. 
* @return {Boolean} <code>true</code> if the form is dirty, <code>false</code> 
*     otherwise. 
*/ 
function formIsDirty(form) 
{ 
    for (var i = 0; i < form.elements.length; i++) 
    { 
     var element = form.elements[i]; 
     var type = element.type; 
     if (type == "checkbox" || type == "radio") 
     { 
      if (element.checked != element.defaultChecked) 
      { 
       return true; 
      } 
     } 
     else if (type == "hidden" || type == "password" || type == "text" || 
       type == "textarea") 
     { 
      if (element.value != element.defaultValue) 
      { 
       return true; 
      } 
     } 
     else if (type == "select-one" || type == "select-multiple") 
     { 
      for (var j = 0; j < element.options.length; j++) 
      { 
       if (element.options[j].selected != 
        element.options[j].defaultSelected) 
       { 
        return true; 
       } 
      } 
     } 
    } 
    return false; 
} 

And another:

window.onbeforeunload = function(e) 
{ 
    e = e || window.event; 
    if (formIsDirty(document.forms["someFormOfInterest"])) 
    { 
     // For IE and Firefox 
     if (e) 
     { 
      e.returnValue = "You have unsaved changes."; 
     } 
     // For Safari 
     return "You have unsaved changes."; 
    } 
}; 

यह सब लपेटें अप, और आप क्या मिलता है?

var confirmExitIfModified = (function() 
{ 
    function formIsDirty(form) 
    { 
     // ...as above 
    } 

    return function(form, message) 
    { 
     window.onbeforeunload = function(e) 
     { 
      e = e || window.event; 
      if (formIsDirty(document.forms[form])) 
      { 
       // For IE and Firefox 
       if (e) 
       { 
        e.returnValue = message; 
       } 
       // For Safari 
       return message; 
      } 
     }; 
    }; 
})(); 

confirmExitIfModified("someForm", "You have unsaved changes."); 

आप शायद भी LIBRARY_OF_CHOICE की घटना पंजीकरण का उपयोग करने के beforeunload ईवेंट हैंडलर के पंजीकरण बदलने के लिए चाहता हूँ।

Answer 2

आप jQuery का उपयोग करते हैं, यहाँ एक आसान चाल है:

$('input:text,input:checkbox,input:radio,textarea,select').one('change',function() { 
    $('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';"); 
}); 

लेकिन अभी याद है, यदि आप एक शर्त है जहाँ आप इस पेज से अनुप्रेषित है, या आप एक सफल प्रपत्र पद की अनुमति के लिए चाहते हैं, आप की जरूरत है ऐसा करने से पहले ऐसा करें या इस तरह की घटना सबमिट करें:

$('BODY').removeAttr('onbeforeunload'); 

... या आप अपने आप को एक लूप में प्राप्त करेंगे जहां यह आपको संकेत पूछता रहता है।

मेरे मामले में, मेरे पास एक बड़ा ऐप था और मैं स्थान बदल रहा था। जावास्क्रिप्ट में रीडायरेक्ट करता है, साथ ही फॉर्म पोस्टिंग, और फिर कुछ AJAX सबमिट करता है जो पृष्ठ में सफलता प्रतिक्रिया इनलाइन के साथ वापस आते हैं। इनमें से किसी भी स्थिति में, मुझे उस घटना को कैप्चर करना था और removeAttr() कॉल का उपयोग करना था।

Answer 3

Volomike उत्कृष्ट jQuery कोड पर थोड़ा विस्तार करने के लिए चाहता था।

तो इसके साथ, हमारे पास बचत से पहले अद्यतन डेटा से दूर नेविगेट करके अनजान डेटा हानि को रोकने के उद्देश्य को पूरा करने के लिए एक बहुत ही शानदार और सुरुचिपूर्ण तंत्र है - यानी। किसी पृष्ठ पर अपडेट किया गया फ़ील्ड, फिर सहेजें बटन पर क्लिक करने से पहले ब्राउज़र में एक बटन, लिंक या यहां तक ​​कि बैक बटन पर क्लिक करें।

केवल एक चीज जो आपको करने की ज़रूरत है वह सभी नियंत्रणों (विशेष रूप से सहेजें बटन) में "नोवार्न" क्लास टैग जोड़ती है जो वेबसाइट पर एक पोस्ट वापस करती है, या तो किसी भी अद्यतन डेटा को सहेज या हटा नहीं देती है।

यदि नियंत्रण पृष्ठ को खोने का कारण बनता है, यानी। अगले पृष्ठ पर नेविगेट करता है या डेटा साफ़ करता है - आपको कुछ भी करने की आवश्यकता नहीं है, क्योंकि स्क्रिप्ट स्वचालित रूप से चेतावनी संदेश दिखाएंगी।

बहुत बढ़िया! अच्छी तरह से Volomike किया!

$(document).ready(function() { 

    //---------------------------------------------------------------------- 
    // Don't allow us to navigate away from a page on which we're changed 
    // values on any control without a warning message. Need to class our 
    // save buttons, links, etc so they can do a save without the message - 
    // ie. CssClass="noWarn" 
    //---------------------------------------------------------------------- 
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() { 
     $('BODY').attr('onbeforeunload', 
     "return 'Leaving this page will cause any unsaved data to be lost.';"); 
    }); 

    $('.noWarn').click(function() { $('BODY').removeAttr('onbeforeunload'); }); 

}); 

Answer 4

लांस के जवाब देने के लिए अतिरिक्त, मैं सिर्फ इस स्निपेट से चलाने के लिए कोशिश कर रहा एक दोपहर खर्च: के रूप में निम्नानुसार

सीधे शब्दों में jQuery कोड है। सबसे पहले, jquery 1.4 में परिवर्तन घटना को बाध्य करने के साथ कीड़े लगती हैं (फरवरी 10 के अनुसार)। jQuery 1.3 ठीक है। दूसरा, मुझे ऑनबेरनलोड/प्रीनलोड लोड करने के लिए jquery नहीं मिल सकता है (मुझे आईई 7 पर संदेह है, जिसका मैं उपयोग कर रहा हूं)। मैंने विभिन्न चयनकर्ताओं ("शरीर"), (खिड़की) की कोशिश की है। मैंने कोशिश की है 'बिंद', '.attr'। शुद्ध js पर वापस लाया जा काम किया (मैं भी कुछ इसी तरह के इतने पर इस समस्या के बारे में पोस्ट देखा था): बल्कि सभी इनपुट प्रकार की गणना की तुलना में चयनकर्ता: 'इनपुट'

$(document).ready(function() { 
    $(":input").one("change", function() { 
     window.onbeforeunload = function() { return 'You will lose data changes.'; } 
    }); 
    $('.noWarn').click(function() { window.onbeforeunload = null; }); 
}); 

नोट मैं भी उपयोग किया है। कड़ाई से ओवरकिल, लेकिन मैंने सोचा कि यह अच्छा था :-)

Answer 5

मैंने इस पृष्ठ पर सूचीबद्ध jQuery कार्यान्वयन में एक और मामूली सुधार किया है। यदि आपके पास क्लाइंट-साइड एएसपी.NET पृष्ठ सत्यापन सक्षम है और किसी पृष्ठ पर उपयोग किया जा रहा है, तो मेरा कार्यान्वयन संभाल जाएगा।

यह onBeforeLeave फ़ंक्शन को साफ़ करने की "त्रुटि" से बचाता है जब पृष्ठ वास्तव में सत्यापन विफलता के कारण क्लिक पर पोस्ट नहीं करता है। बस no-warn-validate कक्षाओं/लिंक पर क्लास का उपयोग करें जो सत्यापन का कारण बनता है। CausesValidation=false (उदा। "ड्राफ्ट के रूप में सहेजें" बटन) पर नियंत्रण के लिए अभी भी no-warn कक्षा है। इस पैटर्न का शायद एएसपी.नेट के अलावा अन्य सत्यापन ढांचे के लिए उपयोग किया जा सकता है, इसलिए मैं यहां संदर्भ के लिए पोस्ट करता हूं।

function removeCheck() { window.onbeforeunload = null; } 

$(document).ready(function() { 
    //----------------------------------------------------------------------------------------- 
    // Don't allow navigating away from page if changes to form are made. Save buttons, links, 
    // etc, can be given "no-warn" or "no-warn-validate" css class to prevent warning on submit. 
    // "no-warn-validate" inputs/links will only remove warning after successful validation 
    //----------------------------------------------------------------------------------------- 
    $(':input').one('change', function() { 
     window.onbeforeunload = function() { 
      return 'Leaving this page will cause edits to be lost.'; 
     } 
    }); 

    $('.no-warn-validate').click(function() { 
     if (Page_ClientValidate == null || Page_ClientValidate()) { removeCheck(); } 
    }); 

    $('.no-warn').click(function() { removeCheck() }); 
}); 

Answer 6

मैं एक jQuery plug-in जो लागू करने के लिए इस्तेमाल किया जा सकता बनाए जा चुके चेतावनी दी-ऑन-पास न सहेजे-परिवर्तन वेब अनुप्रयोगों के लिए शामिल हैं। यह पोस्टबैक का समर्थन करता है। इसमें इंटरनेट एक्सप्लोरर की onbeforeunload घटना के व्यवहार को सामान्य करने के तरीके के बारे में जानकारी का एक लिंक भी शामिल है।