13 דברים ש-htaccess יכול לעשות

htaccess הוא קובץ הגדרות לשרתי אפאצ'י. בעבר הזכרתי את הפרוייקט html5 boilerplate, המומלץ מאוד לשימוש כנקודת התחלה לכל אתר שאתם בונים. בפוסט זה ניקח את ה-htaccess מתוך הבויילרפלייט וננתח את 13 הדברים שהוא עושה.

לפני שמתחילים - כמה מילים על קבצי htaccess

לקבצי htaccess אין שמות מיוחדים, הם תמיד נקראים .htaccess (עם נקודה בתחילתו). קובץ ה-htaccess משפיע על כל מה שנמצא איתו בתיקיה. כך למשל: אם תעלו את הקובץ לתיקיית השורש של האתר - ההגדרות שבו ישפיעו על כל האתר.
משתמשי מק: כמו כל קובץ ששמו מתחיל בנקודה, הקובץ נסתר במחשבי מק. כדי להזיז אותו ממקום למקום במק, אפשר להשתמש בתוכנת הודיני. עורכי קוד רבים מאפשרים לפתוח ולערוך קבצים כאלו, וכן אין בעיה להעלות אותו לשרת עם Filezilla.

1. לגרום לאינטרנט אקספלורר לרנדר לפי הגרסה הנוכחית

כשאתם בונים אתר ומנסים אותו באקספלורר הדנדש שברשותכם (8 או 9 אני מניח), אקספלורר עלול לרנדר את הדף כמו גרסה 7. למה זה קורה? כי אקספלורר לפעמים מגיע למסקנה שהאתר שלכם ישן ושהוא ייראה טוב יותר כך. כדי לוודא שאקספלורר תמיד ישתמש במנוע הרנדור האחרון, יש שני פתרונות:
א. להוסיף את השורה הבאה בתוך ה-head של כל אחד מדפי האתר:

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

ב. להוסיף את הקוד הבא ל-htaccess (תכל'ס, יותר עדיף):

  <IfModule mod_headers.c>
      Header set X-UA-Compatible "IE=Edge,chrome=1"
      <FilesMatch ".(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >
        Header unset X-UA-Compatible
      </FilesMatch>
  </IfModule>

2. הרשאת גישה לפונטים מכל אתר

פונטי רשת יכולים להגיע ממגוון מקורות - גוגל, Typekit, fonts.com ועוד. אם אתם מנסים לטעון פונטים מאתרים אחרים באמצעות ajax, הדפדפן עלול לחסום את הגישה. לשם כך מוסיפים את הקוד הבא:

  <FilesMatch ".(ttf|ttc|otf|eot|woff|font.css)$">
    <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
    </IfModule>
  </FilesMatch>

3. MIME type מתאים לכל סוגי הקבצים

כדי לוודא שהשרת ישלח את כל סוגי הקבצים כראוי צריך להגדיר אותם. החידוש כאן הוא הוספת תמיכה לתכני וידאו ואודיו (דרך התגיות החדשות של html5) וכן פונטי רשת.

  
 
  AddType application/javascript         js



  AddType audio/ogg                      oga ogg
  AddType audio/mp4                      m4a



  AddType video/ogg                      ogv
  AddType video/mp4                      mp4 m4v
  AddType video/webm                     webm


 
  AddType     image/svg+xml              svg svgz 
  AddEncoding gzip                       svgz

                             
  AddType application/vnd.ms-fontobject  eot
  AddType application/x-font-ttf    ttf ttc
  AddType font/opentype                  otf
  AddType application/x-font-woff        woff


                                  
  AddType image/x-icon                   ico
  AddType image/webp                     webp
  AddType text/cache-manifest            appcache manifest
  AddType text/x-component               htc
  AddType application/x-chrome-extension crx
  AddType application/x-xpinstall        xpi
  AddType application/octet-stream       safariextz
  AddType text/x-vcard                   vcf

4. דחיסת gzip

במקום לשלוח את קבצי ה-html, css, javascript כמות שהם, אפשר לדחוס אותם בשרת וכך לשפר את מהירות הטעינה של האתר. דחיסה זו מכונה gzip.

  <IfModule mod_deflate.c>
  
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

 
  <IfModule filter_module>
    FilterDeclare   COMPRESS
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
    FilterChain     COMPRESS
    FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
  </IfModule>

  <IfModule !mod_filter.c>

    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
  </IfModule>
  </IfModule>

5. הוספת תאריכי תפוגה לקבצים

לכל דפדפן יש cache (מעין אחסון מקומי לקבצים שהורדו מאתרים) אין סיבה שהמשתמש שלכם יצטרך להוריד שוב ושוב את קובץ ה-css, קבצי ה-javascript, תמונות הלוגו וכו'. לכן חשוב להגדיר תאריך תפוגה לכל סוג של קובץ.

  <IfModule mod_expires.c>
    ExpiresActive on


    ExpiresDefault                          "access plus 1 month"


    ExpiresByType text/cache-manifest       "access plus 0 seconds"

 
    ExpiresByType text/html                 "access plus 0 seconds"


    ExpiresByType text/xml                  "access plus 0 seconds"
    ExpiresByType application/xml           "access plus 0 seconds"
    ExpiresByType application/json          "access plus 0 seconds"


    ExpiresByType application/rss+xml       "access plus 1 hour"
    ExpiresByType application/atom+xml      "access plus 1 hour"


    ExpiresByType image/x-icon              "access plus 1 week" 


    ExpiresByType image/gif                 "access plus 1 month"
    ExpiresByType image/png                 "access plus 1 month"
    ExpiresByType image/jpg                 "access plus 1 month"
    ExpiresByType image/jpeg                "access plus 1 month"
    ExpiresByType video/ogg                 "access plus 1 month"
    ExpiresByType audio/ogg                 "access plus 1 month"
    ExpiresByType video/mp4                 "access plus 1 month"
    ExpiresByType video/webm                "access plus 1 month"


    ExpiresByType text/x-component          "access plus 1 month"


    ExpiresByType font/truetype             "access plus 1 month"
    ExpiresByType font/opentype             "access plus 1 month"
    ExpiresByType application/x-font-woff   "access plus 1 month"
    ExpiresByType image/svg+xml             "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"


    ExpiresByType text/css                  "access plus 1 year"
    ExpiresByType application/javascript    "access plus 1 year"

    <IfModule mod_headers.c>
      Header append Cache-Control "public"
    </IfModule>

  </IfModule>

מומלץ לשנות את החוק שנוגע ל-css ל-"access plus 1 week" - יש סיכוי טוב שתשנו את ה-css בתדירות של יותר מפעם בשנה.

6. הסרה של ETag

התפקיד של ETag הוא לבדוק האם הקובץ השתנה מאז הפעם האחרונה שבה המשתמש ביקר באתר. מאחר ואנחנו כבר סידרנו את עניין תאריכי התפוגה, אפשר לוותר עליהם. (ETags יוצרים בעיות בעיקר אם האתר שלכם משתמש ביותר משרת אחד)

  <IfModule mod_headers.c>
    Header unset ETag
  </IfModule>
  FileETag None

7. הפעלת מנוע השכתוב

הצעד הזה דרוש בשביל ההמשך. מנוע השכתוב של אפאצ'י מאפשר לשנות כל מיני דברים שקשורים לאיך שה-url באתר שלכם נראה.

  <IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
  </IfModule>

8. הסרה או הוספה של ה-www

מסיבות של SEO לא מומלץ לאפשר גישה לאתר שלכם עם ובלי www
אתם צריכים להחליט:
אפשרות 1: http://mysite.com
(מופעלת בברירת המחדל)

  <IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
  </IfModule>

אפשרות 2: http://www.mysite.com
(לא מופעלת - אם אתם מפעילים אותה, בטלו את אפשרות 1)



  # <IfModule mod_rewrite.c>
  #   RewriteCond %{HTTPS} !=on
  #   RewriteCond %{HTTP_HOST} !^www..+$ [NC]
  #   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  # </IfModule>

9. ביטול MultiViews

אם אתם משכתבים את הכתובת http://mysite.com/?p=1 למשהו כמו http://mysite.com/first-post השרת עלול לנסות למצוא תיקיה בשם first-post, כדי לפתור את הבעיה מוסיפים את השורה הבאה:

  Options -MultiViews

10. שם מיוחד לדף ה-404

לכל אתר שמכבד את עצמו ראוי שיהיה דף 404 מותאם אישית. הכלל הבא מגדיר שקוראים לו 404.html. את הקובץ הזה צריך למקם בתיקיית השורש בשרת. אם יש לכם כבר דף שגיאה באתר, שנו את שמו ל-404.

  ErrorDocument 404 /404.html

11. הגדרת כל המסמכים כ-utf8

כדי להימנע מג'יבריש, במקרה ששכחתם להגדיר charset באלמנט meta, מוסיפים את הכללים הבאים:

AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js .xml .json .rss .atom

12. הרחקת חטטנים

שני הכללים הבאים חוסמים את הגישה לקבצים שלא כולם צריכים לראות:
הכלל הראשון חוסם את האפשרות לצפות ברשימת הקבצים שבתיקיה. למשל, אם מישהו מנסה לגלוש ישירות לתיקיית img שלכם, הוא יקבל הודעת Forbidden:

  Options -Indexes

הכלל השני חוסם גישה לתיקיות נסתרות שמתחילות בנקודה:

  <IfModule mod_rewrite.c>
    RewriteRule "(^|/)." - [F]
  </IfModule>

13. שיפור אבטחת ה-cookies

מפחית את הסיכוי לגניבת זהויות דרך התקפות xss.

  <IfModule php5_module>
          php_value session.cookie_httponly true
  </IfModule>

תגיות:, , ,

3 תגובות