รายละเอียดทางเทคนิคใดที่โปรแกรมเมอร์ของเว็บแอปพลิเคชันควรพิจารณาก่อนที่จะทำให้ไซต์เป็นแบบสาธารณะ

โปรแกรมเมอร์ควรใช้สิ่งใดในการนำรายละเอียดทางเทคนิคของแอปพลิเคชันเว็บมาพิจารณาก่อนที่จะทำให้ไซต์เป็นแบบสาธารณะ หากJeff Atwoodสามารถลืมเกี่ยวกับHttpOnly คุกกี้ , แผนผังเว็บไซต์ , และ ข้ามไซต์ปลอมคำขอ ทั้งหมดในเว็บไซต์เดียวกันสิ่งที่สิ่งที่สำคัญฉันจะถูกลืมเช่นกัน?

ฉันกำลังคิดเกี่ยวกับสิ่งนี้จากมุมมองของนักพัฒนาเว็บคนอื่นกำลังสร้างการออกแบบและเนื้อหาจริงสำหรับเว็บไซต์ ดังนั้นในขณะที่ความสามารถในการใช้งานและเนื้อหาอาจมีความสำคัญมากกว่าแพลตฟอร์ม สิ่งที่คุณต้องกังวลคือการติดตั้งแพลตฟอร์มของคุณมีเสถียรภาพทำงานได้ดีปลอดภัยและบรรลุเป้าหมายทางธุรกิจอื่น ๆ (เช่นไม่เสียค่าใช้จ่ายมากเกินไปใช้เวลานานเกินไปในการสร้างและจัดอันดับด้วย Google เช่นเดียวกับ รองรับเนื้อหา)

ลองนึกถึงสิ่งนี้จากมุมมองของนักพัฒนาที่ทำงานบางอย่างสำหรับแอปพลิเคชันอินทราเน็ตในสภาพแวดล้อมที่น่าเชื่อถือและกำลังจะได้ช็อตแรกของเขาและวางไซต์ที่ได้รับความนิยมสำหรับอินเทอร์เน็ตขนาดใหญ่ทั่วโลก

นอกจากนี้ฉันกำลังมองหาบางสิ่งที่เฉพาะเจาะจงยิ่งกว่าการตอบสนอง "มาตรฐานเว็บ" ที่คลุมเครือ ฉันหมายความว่า HTML, JavaScript, และ CSS บน HTTP นั้นเป็นสิ่งที่กำหนดโดยเฉพาะอย่างยิ่งเมื่อฉันได้ระบุว่าคุณเป็นนักพัฒนาเว็บมืออาชีพ ดังนั้นจะเกินที่ซึ่งมาตรฐาน? ในสถานการณ์อะไรและทำไม ระบุลิงก์ไปยังข้อกำหนดของมาตรฐาน

ความคิดที่นี่คือที่พวกเราส่วนใหญ่ควรรู้อยู่แล้วว่าส่วนใหญ่อยู่ในรายการนี้ แต่อาจมีเพียงหนึ่งหรือสองรายการที่คุณไม่ได้มองมาก่อนไม่เข้าใจอย่างสมบูรณ์หรืออาจไม่เคยได้ยินมาก่อน

ส่วนต่อประสานและประสบการณ์ผู้ใช้

• โปรดทราบว่าเบราว์เซอร์ใช้มาตรฐานที่ไม่สอดคล้องกันและตรวจสอบให้แน่ใจว่าไซต์ของคุณทำงานได้ดีในทุกเบราว์เซอร์หลัก ในการทดสอบขั้นต่ำกับที่ผ่านมาตุ๊กแกเครื่องยนต์ ( Firefox ) เครื่องยนต์ WebKit ( Safariและบางเบราว์เซอร์บนมือถือ), Chrome , สนับสนุนของเบราว์เซอร์ IE (ใช้ประโยชน์จากApplication Compatibility VPC แสดงสินค้า ) และโอเปร่า พิจารณาวิธีที่เบราว์เซอร์แสดงไซต์ของคุณในระบบปฏิบัติการที่แตกต่างกัน
• พิจารณาว่าผู้คนอาจใช้ไซต์อื่นนอกเหนือจากเบราว์เซอร์หลัก ๆ เช่นโทรศัพท์มือถือโปรแกรมอ่านหน้าจอและเครื่องมือค้นหาได้อย่างไร - ข้อมูลบางส่วนในการเข้าถึง: WAIและSection508การพัฒนามือถือ: MobiForge
• การจัดเตรียม: วิธีปรับใช้การอัปเดตโดยไม่ส่งผลกระทบต่อผู้ใช้ของคุณ มีสภาพแวดล้อมการทดสอบหรือการจัดเตรียมอย่างน้อยหนึ่งสภาพพร้อมที่จะใช้การเปลี่ยนแปลงสถาปัตยกรรมรหัสหรือเนื้อหาการกวาดและให้แน่ใจว่าพวกเขาสามารถปรับใช้ในวิธีการควบคุมโดยไม่ทำลายอะไรเลย มีวิธีการอัตโนมัติในการปรับใช้การเปลี่ยนแปลงที่อนุมัติแล้วกับไซต์สด สิ่งนี้ถูกนำไปใช้อย่างมีประสิทธิภาพมากที่สุดเมื่อใช้ร่วมกับการใช้ระบบควบคุมเวอร์ชัน (git, Subversion, ฯลฯ ) และกลไกการสร้างอัตโนมัติ (Ant, NAnt, ฯลฯ )
• อย่าแสดงข้อผิดพลาดที่ไม่เป็นมิตรกับผู้ใช้โดยตรง
• อย่าใส่ที่อยู่อีเมลของผู้ใช้เป็นข้อความธรรมดาเพราะพวกเขาจะได้รับสแปมถึงตาย
• เพิ่มแอตทริบิวต์rel="nofollow"ที่จะเชื่อมโยงผู้ใช้สร้างขึ้นเพื่อหลีกเลี่ยงการสแปม
• สร้างข้อ จำกัด ที่ได้รับการพิจารณาเป็นอย่างดีในเว็บไซต์ของคุณ - สิ่งนี้อยู่ในความปลอดภัย
• เรียนรู้วิธีการทำเพิ่มประสิทธิภาพของความก้าวหน้า
• เปลี่ยนเส้นทางหลังจาก POSTหาก POST นั้นสำเร็จเพื่อป้องกันการรีเฟรชจากการส่งอีกครั้ง
• อย่าลืมที่จะคำนึงถึงการเข้าถึง ก็มักจะเป็นความคิดที่ดีและในบางสถานการณ์มันเป็นข้อกำหนดทางกฎหมาย WAI-ARIAและWCAG 2เป็นทรัพยากรที่ดีในพื้นที่นี้
• อ่านอย่าทำให้ฉันคิดว่า

ความปลอดภัย

• มีจำนวนมากที่แยกย่อย แต่คู่มือการพัฒนา OWASPครอบคลุมความปลอดภัยของเว็บไซต์จากบนลงล่าง
• รู้เกี่ยวกับการฉีดโดยเฉพาะการฉีด SQLและวิธีการป้องกัน
• อย่าเชื่อถือการป้อนข้อมูลของผู้ใช้หรือสิ่งอื่นใดที่อยู่ในคำขอ (ซึ่งรวมถึงคุกกี้และค่าฟิลด์แบบฟอร์มที่ซ่อนอยู่!)
• รหัสผ่านแฮชใช้เกลือและใช้เกลือที่แตกต่างกันสำหรับแถวของคุณเพื่อป้องกันการโจมตีสายรุ้ง ใช้อัลกอริทึมการแฮ็ชช้าเช่น bcrypt (ทดสอบเวลา) หรือ scrypt (ยิ่งแข็งแกร่ง แต่ใหม่กว่า) ( 1 , 2 ) สำหรับการจัดเก็บรหัสผ่าน ( วิธีเก็บรหัสผ่านอย่างปลอดภัย ) NIST ยังได้รับการอนุมัติของ PBKDF2 แฮรหัสผ่าน " และก็FIPS รับการอนุมัติใน .NET (ข้อมูลเพิ่มเติมที่นี่ ). หลีกเลี่ยงการใช้ MD5 หรือ SHA ครอบครัวโดยตรง
• อย่าพยายามคิดด้วยระบบพิสูจน์ตัวตนอันแฟนซีของคุณ มันเป็นเรื่องง่ายที่จะเข้าใจผิดในวิธีที่ละเอียดและไม่สามารถทดสอบได้และคุณจะไม่รู้ด้วยซ้ำจนกระทั่งหลังจากที่คุณถูกแฮ็ก
• รู้กฎระเบียบสำหรับการใช้บัตรเครดิตในการประมวลผล ( ดูคำถามนี้เช่นกัน )
• ใช้SSL / TLS / HTTPSสำหรับเว็บไซต์ใด ๆ ที่มีการป้อนข้อมูลที่ละเอียดอ่อน (เช่นข้อมูลรับรองข้อมูลที่ระบุตัวตนได้อย่างแท้จริงข้อมูลบัตรเครดิต) Let's Encryptเป็นผู้ออกใบรับรองที่ให้ความช่วยเหลือฟรี
• ป้องกันการหักหลังเซสชั่น
• หลีกเลี่ยงcross site scripting (XSS)
• หลีกเลี่ยงการปลอมแปลงคำขอข้ามไซต์ (CSRF)
• หลีกเลี่ยงการClickjacking
• ปรับปรุงระบบของคุณให้ทันสมัยด้วยแพตช์ล่าสุด
• ตรวจสอบให้แน่ใจว่าข้อมูลการเชื่อมต่อฐานข้อมูลของคุณปลอดภัย
• แจ้งให้คุณทราบเกี่ยวกับเทคนิคการโจมตีล่าสุดและช่องโหว่ที่ส่งผลกระทบต่อแพลตฟอร์มของคุณ
• อ่านของ Google เบราว์เซอร์การรักษาความปลอดภัยคู่มือ
• อ่านคู่มือเว็บแอพลิเคชันของแฮกเกอร์
• พิจารณาหลักการสิทธิน้อย พยายามที่จะใช้เซิร์ฟเวอร์แอปของคุณเป็นที่ไม่ใช่ราก ( ตัวอย่าง Tomcat )
• ใส่rel="noopener noreferrer"ลิงก์ทั้งหมดที่ผู้ใช้ให้ด้วยtarget="_blank"เพื่อป้องกันไม่ให้จาวาสคริปต์ในหน้าปลายทางเปลี่ยนเส้นทางหน้าของคุณไปที่อื่นเช่นหน้าล็อกอินปลอม ข้อมูลเพิ่มเติม
• พิจารณาการใช้อย่างเข้มงวดนโยบายความปลอดภัยของเนื้อหา

ประสิทธิภาพ

• ใช้แคชหากจำเป็นต้องเข้าใจและใช้แคช HTTPอย่างถูกต้องเช่นเดียวกับHTML5 Manifest
• ปรับภาพให้เหมาะสม - อย่าใช้ภาพขนาด 20 KB สำหรับพื้นหลังซ้ำ
• บีบอัดเนื้อหาสำหรับความเร็วดูbrotli , gzip / deflate ( ยุบดีกว่า )
• รวม / เชื่อมหลายสไตล์ชีตหรือหลายไฟล์สคริปต์เพื่อลดจำนวนการเชื่อมต่อเบราว์เซอร์และปรับปรุงความสามารถของ gzip ในการบีบอัดข้อมูลที่ซ้ำกันระหว่างไฟล์
• ลองดูที่เว็บไซต์Yahoo Exceptional Performanceแนวทางที่ดีมากมายรวมถึงการปรับปรุงประสิทธิภาพของ Front-end และเครื่องมือYSlowของพวกเขา(ต้องใช้ Firefox, Safari, Chrome หรือ Opera) นอกจากนี้ความเร็วหน้า Google (ใช้กับส่วนขยายเบราว์เซอร์ ) เป็นอีกเครื่องมือหนึ่งสำหรับการทำโปรไฟล์ประสิทธิภาพและเพิ่มประสิทธิภาพรูปภาพของคุณด้วย
• ใช้CSS Image Spritesสำหรับรูปภาพขนาดเล็กที่เกี่ยวข้องเช่นแถบเครื่องมือ (ดูจุด "ลดการร้องขอ HTTP")
• ใช้สไปรต์รูปภาพ SVGสำหรับรูปภาพขนาดเล็กที่เกี่ยวข้องเช่นแถบเครื่องมือ การระบายสี SVG นั้นยุ่งยากเล็กน้อย คุณสามารถอ่านเกี่ยวกับเรื่องนี้ที่นี่
• เว็บไซต์ไม่ว่างควรพิจารณาองค์ประกอบแยกข้ามโดเมน โดยเฉพาะ ...
• เนื้อหาแบบคงที่ (เช่นรูปภาพ, CSS, JavaScript และเนื้อหาทั่วไปที่ไม่จำเป็นต้องเข้าถึงคุกกี้) ควรอยู่ในโดเมนแยกต่างหากที่ไม่ได้ใช้คุกกี้เนื่องจากคุกกี้ทั้งหมดสำหรับโดเมนและโดเมนย่อยจะถูกส่งไปพร้อมกับทุกคำขอไปยัง โดเมนและโดเมนย่อย หนึ่งในตัวเลือกที่ดีที่นี่คือการใช้เครือข่ายการจัดส่งเนื้อหา (CDN) แต่พิจารณากรณีที่ CDN อาจล้มเหลวโดยรวมถึง CDN อื่นหรือสำเนาในเครื่องที่สามารถให้บริการแทน
• ลดจำนวนการร้องขอ HTTP ทั้งหมดที่เบราว์เซอร์ต้องการให้แสดงหน้านั้น
• เลือกเทมเพลตเอ็นจิ้นและเรนเดอร์ / คอมไพล์ล่วงหน้าโดยใช้นักวิ่งงานเช่นอึกหรือเสี้ยงฮึดฮัด
• ตรวจสอบให้แน่ใจว่ามีไฟล์ในรากของเว็บไซต์คือfavicon.ico เบราว์เซอร์จะร้องขอโดยอัตโนมัติแม้ว่าจะไม่ได้กล่าวถึงไอคอนใน HTML เลย หากคุณไม่ได้มีสิ่งนี้จะส่งผลให้ 404s จำนวนมากระบายแบนด์วิดธ์ของเซิร์ฟเวอร์ของคุณ/favicon.ico/favicon.ico

SEO (การเพิ่มประสิทธิภาพกลไกค้นหา)

• ใช้ URL "เครื่องมือค้นหาง่าย" เช่นใช้example.com/pages/45-article-titleแทนexample.com/index.php?page=45
• เมื่อใช้#สำหรับเนื้อหาแบบไดนามิกเปลี่ยน#ไป#!แล้วบนเซิร์ฟเวอร์$_REQUEST["_escaped_fragment_"]คือสิ่งที่ Googlebot #!ใช้แทน ในคำอื่น ๆจะกลายเป็น./#!page=1 ./?_escaped_fragments_=page=1นอกจากนี้สำหรับผู้ใช้ที่อาจใช้ FF.b4 หรือ Chromium history.pushState({"foo":"bar"}, "About", "./?page=1");เป็นคำสั่งที่ยอดเยี่ยม ดังนั้นแม้ว่าแถบที่อยู่จะมีการเปลี่ยนแปลงหน้าเว็บไม่สามารถโหลดซ้ำได้ สิ่งนี้ช่วยให้คุณใช้?แทน#!การเก็บเนื้อหาแบบไดนามิกและบอกเซิร์ฟเวอร์เมื่อคุณส่งอีเมลลิงก์ที่เราอยู่หลังหน้านี้และ AJAX ไม่จำเป็นต้องขอเพิ่มอีก
• อย่าใช้การเชื่อมโยงที่บอกว่า"คลิกที่นี่" คุณกำลังเสียโอกาส SEO และทำให้สิ่งที่ยากขึ้นสำหรับผู้ที่มีโปรแกรมอ่านหน้าจอ
• มีแผนผังเว็บไซต์ XML/sitemap.xmlเฉพาะอย่างยิ่งในตำแหน่งเริ่มต้น
• ใช้<link rel="canonical" ... />เมื่อคุณมีหลาย URL ที่ชี้ไปยังเนื้อหาเดียวกันปัญหานี้ยังสามารถได้รับการแก้ไขจากGoogle Webmaster Tools
• ใช้Google เครื่องมือของผู้ดูแลเว็บและBing Webmaster Tools
• ติดตั้งGoogle Analyticsตั้งแต่เริ่มต้น (หรือเครื่องมือวิเคราะห์โอเพนซอร์สเช่นPiwik )
• รู้ว่าrobots.txtและสไปเดอร์ของเครื่องมือค้นหาทำงานอย่างไร
• คำขอเปลี่ยนเส้นทาง (โดยใช้301 Moved Permanently) ขอwww.example.comให้example.com(หรืออีกวิธีหนึ่ง) เพื่อป้องกันการแยกการจัดอันดับ google ระหว่างเว็บไซต์ทั้งสอง
• รู้ว่าอาจมีแมงมุมที่ประพฤติตัวไม่ดีออกไป
• หากคุณมีข้อความที่ไม่ดูเนื้อหาลงในส่วนขยายแผนผังเว็บไซต์ของ Google สำหรับวิดีโอ ฯลฯ มีบางข้อมูลที่ดีเกี่ยวกับเรื่องนี้คือคำตอบทิมฟาร์ลี่ย์

เทคโนโลยี

• ทำความเข้าใจกับHTTPและสิ่งต่างๆเช่น GET, POST, เซสชัน, คุกกี้และความหมายของ "ไร้สัญชาติ"
• เขียนของคุณXHTML / HTMLและCSSตามข้อกำหนดของ W3Cและทำให้แน่ใจว่าพวกเขาตรวจสอบ เป้าหมายที่นี่คือการหลีกเลี่ยงโหมดเล่นเบราว์เซอร์และเป็นโบนัสทำให้ง่ายต่อการทำงานกับเบราว์เซอร์ที่ไม่ใช่แบบดั้งเดิมเช่นโปรแกรมอ่านหน้าจอและอุปกรณ์มือถือ
• ทำความเข้าใจวิธีการประมวลผล JavaScript ในเบราว์เซอร์
• ทำความเข้าใจว่าโหลดสไตล์ชีตและทรัพยากรอื่น ๆ ที่หน้าเว็บของคุณใช้และพิจารณาผลกระทบที่มีต่อประสิทธิภาพการรับรู้ ขณะนี้ได้รับการยอมรับอย่างกว้างขวางว่าเหมาะสมในการย้ายสคริปต์ไปที่ด้านล่างของหน้าเว็บโดยมีข้อยกเว้นโดยทั่วไปคือสิ่งต่าง ๆ เช่นแอพวิเคราะห์หรือ HTML5 shims
• ทำความเข้าใจว่า JavaScript sandbox ทำงานอย่างไรโดยเฉพาะถ้าคุณตั้งใจจะใช้ iframes
• โปรดทราบว่า JavaScript สามารถและจะถูกปิดการใช้งานและ AJAX นั้นเป็นส่วนขยายไม่ใช่พื้นฐาน แม้ว่าผู้ใช้ทั่วไปส่วนใหญ่จะทิ้งไว้ในตอนนี้โปรดจำไว้ว่าNoScriptกำลังเป็นที่นิยมมากขึ้นโทรศัพท์มือถืออาจไม่ทำงานตามที่คาดไว้และ Google จะไม่เรียกใช้จาวาสคริปต์ส่วนใหญ่ของคุณเมื่อสร้างดัชนีเว็บไซต์
• เรียนรู้ความแตกต่างระหว่างการเปลี่ยนเส้นทาง 301 และ 302 (นี่เป็นปัญหา SEO)
• เรียนรู้ให้มากที่สุดเท่าที่จะทำได้เกี่ยวกับแพลตฟอร์มการปรับใช้ของคุณ
• พิจารณาใช้แผ่นรีเซ็ตสไตล์หรือNormalize.css
• พิจารณาเฟรมเวิร์กของ JavaScript (เช่นjQuery , MooTools , Prototype , DojoหรือYUI 3 ) ซึ่งจะซ่อนความแตกต่างของเบราว์เซอร์จำนวนมากเมื่อใช้ JavaScript สำหรับการจัดการ DOM
• เมื่อพิจารณาถึงประสิทธิภาพและเฟรมเวิร์ก JS ด้วยกันให้พิจารณาใช้บริการเช่นGoogle Libraries APIเพื่อโหลดเฟรมเวิร์กเพื่อให้เบราว์เซอร์สามารถใช้สำเนาของเฟรมเวิร์กที่แคชไว้แล้วแทนที่จะดาวน์โหลดสำเนาซ้ำจากเว็บไซต์ของคุณ
• อย่าประดิษฐ์ล้อใหม่ ก่อนดำเนินการใด ๆ ให้ค้นหาส่วนประกอบหรือตัวอย่างเกี่ยวกับวิธีการทำ มีโอกาส 99% ที่บางคนทำมันและปล่อยโค้ด OSS
• อย่าลืมเริ่มต้นด้วย 20 ไลบรารี่ก่อนที่คุณจะตัดสินใจได้ว่าความต้องการของคุณคืออะไร โดยเฉพาะอย่างยิ่งในเว็บไซด์ของลูกค้าซึ่งในท้ายที่สุดมันก็สำคัญกว่าเสมอในการทำให้สิ่งต่าง ๆ มีน้ำหนักเบารวดเร็วและยืดหยุ่น

แก้ไขข้อผิดพลาด

• เข้าใจว่าคุณจะใช้เวลาในการเขียนโค้ด 20% และ 80% ของรหัสนั้นดังนั้นให้รหัสตามนั้น
• ตั้งค่าโซลูชันการรายงานข้อผิดพลาดที่ดี
• มีระบบสำหรับคนที่จะติดต่อคุณเพื่อขอคำแนะนำและคำวิจารณ์
• เอกสารวิธีการใช้งานแอปพลิเคชันสำหรับพนักงานสนับสนุนในอนาคตและผู้ปฏิบัติงานบำรุงรักษา
• ทำการสำรองข้อมูลบ่อยๆ! (และตรวจสอบให้แน่ใจว่าการสำรองข้อมูลเหล่านั้นทำงานได้) มีกลยุทธ์การกู้คืนไม่ใช่เพียงกลยุทธ์การสำรองข้อมูล
• ใช้ระบบการควบคุมเวอร์ชันในการจัดเก็บไฟล์ของคุณเช่นการโค่นล้ม , MercurialหรือGit
• อย่าลืมทำการทดสอบการยอมรับของคุณ กรอบงานเช่นซีลีเนียมสามารถช่วยได้ โดยเฉพาะอย่างยิ่งถ้าคุณได้อย่างเต็มที่โดยอัตโนมัติทดสอบของคุณอาจจะโดยการใช้เครื่องมือบูรณาการอย่างต่อเนื่องเช่นเจนกินส์
• ตรวจสอบให้แน่ใจว่าคุณมีการเข้าสู่ระบบที่เพียงพอในสถานที่ที่ใช้กรอบเช่นlog4j , log4netหรือlog4r หากมีสิ่งผิดปกติเกิดขึ้นในไซต์ของคุณคุณต้องหาวิธีในการค้นหา
• เมื่อทำการบันทึกตรวจสอบให้แน่ใจว่าคุณได้จับทั้งข้อยกเว้นที่จัดการและข้อยกเว้นที่ไม่ได้จัดการ รายงาน / วิเคราะห์บันทึกผลลัพธ์เนื่องจากมันจะแสดงให้คุณทราบว่าปัญหาสำคัญอยู่ที่ใดในเว็บไซต์ของคุณ

อื่น ๆ

• ใช้การตรวจสอบและวิเคราะห์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ (ควรดำเนินการเชิงรุกแทนการทำปฏิกิริยา)
• ใช้บริการเช่น UserVoice และอินเตอร์คอม (หรือเครื่องมืออื่น ๆ ที่คล้ายคลึงกัน) เพื่อติดต่อกับผู้ใช้ของคุณอย่างต่อเนื่อง
• ติดตามวินเซนต์ Driessen 's Git รูปแบบแตกแขนง

สิ่งต่าง ๆ ที่ถูกละไว้ไม่จำเป็นเพราะพวกเขาไม่ใช่คำตอบที่มีประโยชน์ แต่เป็นเพราะพวกเขามีรายละเอียดเกินขอบเขตหรือไปไกลเกินกว่าที่ใครบางคนที่มองหาภาพรวมของสิ่งที่ควรรู้ โปรดแก้ไขสิ่งนี้ด้วยฉันอาจพลาดบางสิ่งหรือทำผิดพลาด