網頁已過期在IE7、IE8

網頁已過期在IE7、IE8

通常這個問題是當form submit出去後,再按上一頁、下一頁就會出現的問題,不過如果在form的action設為錨點,也可能引起這種狀況,而這種情況則是未升級到IE9會發生的。

實際狀況

第一種狀況
form submit出去,由使者點選上一頁、下一頁就會出現這種狀況,或者是透過程式控制history

1
2
history.go()
history.back()

第二種狀況
form的action為’#’時,會導致form送出之後,在被重新導向

1
2
3
<form method="post" action="#">

</form>

而第二種狀況比較特別,只在未升級的成IE9以上瀏覽器,用相容模式在IE8包括以下的瀏覽器,才會出現這種問題。至於目前使用的chromefirefoxIE9+都已經不會有這問題了。但第一種狀況IE還是會出現,其餘瀏覽器都會重新submit和保留之前的畫面。

X-Frame-Options response header

如果要防止頁面被iframe或frame嵌入,比較常用的方法是,在頁面上加入一串script做判斷,或者加入X-Frame-Options header。

X-Frame-Options有下列3個參數值可用:
deny

拒絕被任何嵌入頁面。

SAMEORIGIN

允許來至於相同domain的嵌入。

ALLOW-FROM uri

允許某個domain嵌入。

 

以下是用node.js寫得example:
var express = require('express');

var html = "from http://localhost:3001/SAMEORIGIN<br>" +
            '<iframe src="http://localhost:3001/SAMEORIGIN"></iframe><br>'+
            'from http://localhost:3001/deny<br>' +
            '<iframe src="http://localhost:3001/deny"></iframe><br>' +
            'from http://localhost:3001/allow_from<br>' +
            '<iframe src="http://localhost:3001/allow_from"></iframe><br>';

(function(){       

  var app = express();

  app.get('/', function(req, res){

    res.send( html );
  });

  app.listen(3000);

})();

(function(){

  var app = express();

  app.get('/', function(req, res){

    res.send( html );
  });

  app.get('/SAMEORIGIN', function(req, res){
    res.set('X-Frame-Options','SAMEORIGIN');
    res.send('hello world');
  });

  app.get('/deny', function(req, res){
    res.set('X-Frame-Options','deny');
    res.send('hello world');
  });

  app.get('/allow_from', function(req, res){
    res.set('X-Frame-Options','Allow\-From http://localhost:3001');
    res.send('hello world');
  });

  app.listen(3001);

})();

需先安裝node.jsexpress.js

#使用npm安裝express
npm install express

#執行server.js
node server.js

分別測試http://localhost:3000/ and http://localhost:3001/,其中allow-from測試時,似乎沒辦法取得正確結果,換成其他domain頁面一樣是可讀取的。