15

The standard W3C standard says about localStorages:

Different authors sharing one host name, for example users hosting content on geocities.com, all share one local storage object. There is no feature to restrict the access by pathname. Authors on shared hosts are therefore urged to avoid using these features, as it would be trivial for other authors to read the data and overwrite it.

But for sessionStorages it's said that it does provide separate sessionStorages for tabs and windows even from same origin.

But it seems iframes does share the sessionStorage.

Is there a way to have separate sessionStorages on via iframes on the same origin.

Edit: Since there was confusion if tabs/windows do have separate sessionStorages, here is a sample page. Save the code in a file and open it with two different tabs. Then refresh one tab 5 times and refresh the other tab 1 time. You'll see that the numbers differ.

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
        document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
    </script>
</body>
</html>

Edit2: What I have tried so far is to use the iframe sandbox attribute. But then I got an error within the iframe and I cann't use sessionStorage at all. I had to add sandbox="allow-same-origin". But then the sessionStorage is the same in all iframes again.

Thanks in advance.

McK
  • 653
  • 2
  • 7
  • 24
  • 1
    What is purpose , expected result of creating different `sessionStorage` for `iframes` ? – guest271314 Jan 28 '16 at 15:16
  • 1
    The only difference between `sessionStorage` and `localStorage` is the expiration. Both are origin specific, meaning pages from the same origin, regardless of how they are opened, share the same storage object. If you want seperation, use an object with keys, and stringify it before storing. – adeneo Jan 28 '16 at 15:23
  • @guest271314 Imagine you have a page with a complete window manager. Each window consists of a an iframe with a single html file with according js. Those pages should not have the possibility to use each others storages. But they are all on the same host. This is a very very very simplified version of our setup. – McK Jan 28 '16 at 15:26
  • @adeneo Sry for being harsh, but you're simply wrong. See http://stackoverflow.com/a/11783754/1519125 for more details. – McK Jan 28 '16 at 15:29
  • And I'm saying that answer is wrong. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) says *"sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session"*, meaning it uses the origin to indentify the storage object. Opening a new page in an iFrame does create a new session for that iFrame, but the object is still the same as the one used by the parent page, as long as the origin is the same. If it weren't, why would you be asking, this would be straight forward. – adeneo Jan 28 '16 at 15:32
  • 1
    @McK _"Those pages should not have the possibility to use each others storages."_ At present is `js` within an `iframe` able to access other `iframe` `sessionStorage` ? – guest271314 Jan 28 '16 at 15:41
  • @guest271314 - if all the iFrames are from the same origin, yes they are, not only from the sessionStorage object, but iFrames from the same origin are direcly accessible to each other as well with `window.parent.otherIframeName`. The SessionStorage can easily be tested by just setting something in the parent window, and accessing it in the child iFrame -> https://jsfiddle.net/a4svw4uf/1/, and that's the way it works, and should work. – adeneo Jan 28 '16 at 15:44
  • 1
    @adeneo Do not believe jsfiddle allows setting `Storage` ? , at least here; logged `Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.` ; plnkr http://plnkr.co does allow `Storage` items to be set. Not entirely certain what expected result of Question is ? Why `sessionStorage` is used at `iframes` ? – guest271314 Jan 28 '16 at 15:48
  • @adeneo I'm truly sorry. But the implementation of Firefox, Chrome and IE is telling otherwise! I added an example in the question to reflect that. – McK Jan 28 '16 at 19:25
  • @guest271314 I want the exact behaviour of sessionStorage in iframes with sandboxing like in tabs and windows. The question is how to accomplish that. May by setting some sort of switch in the config of a browser or by constructing a storage manually in js. I don't know... that why I'm asking. – McK Jan 28 '16 at 19:26
  • 1
    @McK Changed one of `sessionStorage` keys to `"counter1"` http://plnkr.co/edit/IHcmr6xyaDhwdXmHkR26?p=preview ? – guest271314 Jan 28 '16 at 21:00
  • @adeneo You are correct http://plnkr.co/edit/Etel4ToABM6gWOw6qAE5?p=preview – guest271314 Jan 28 '16 at 21:02
  • 1
    @guest271314 - I believe I am, yes, the storage container is set to the origin domain, and iframes from the same origin share the same object, even if the iFrame opens a new session. – adeneo Jan 28 '16 at 21:31
  • @adeneo I think we do have a big misunderstanding here. I totally agree with you in order that adeneo's statement is correct for iframes, but only for iframes. But it's totally false for "windows and tabs" alike. And that is the core of my question. Is there any possibility to accomplish the same behaviour for iframes and tabs in order to separates sessionStorages. – McK Feb 02 '16 at 09:45
  • @guest271314 I assume there is no possibility for clean separation. So please make answer which reflects that and I'll accept that as an answer. – McK Feb 02 '16 at 09:46
  • @McK Started bounty for possible workarounds for original Question – guest271314 Feb 03 '16 at 19:43
  • 1
    you get a sessionStorage for each tab; iframes are all on the same tab, so no surprise. you can use other means of storing info on a per-iframe basis: hidden inputs that get session-restored, the window.name "transport", namespacing shared storage, or even just global variables. – dandavis Feb 04 '16 at 04:52

2 Answers2

5

There is a workaround if you have ssl. Using https://... to access one document and http://... to access the other will create separate storages for the same origin.

Bug
  • 508
  • 1
  • 3
  • 15
  • +1 for completeness. Thats very interesting. Didn't know that. Unfortunatelly this isn't possible with our current environment since we are forced to use tls on all our sites. – McK Feb 05 '16 at 06:23
3

@adeneo is correct when indicating

the storage container is set to the origin domain, and iframes from the same origin share the same object, even if the iFrame opens a new session

A workaround does not appear to currently exist

<!DOCTYPE html>
<html>
<body>
    <iframe name="one" src="sessionStorageTest.html"></iframe>
    <iframe name="two" src="sessionStorageTest1.html"></iframe>
</body>
</html>

sessionStorageTest.html

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
        document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
    </script>
</body>
</html>

sessionStorageTest1.html

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        var i = 0;
          while (++i < 10) {
            sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
            document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
          }
    </script>
</body>
</html>

demonstrated at plnkr http://plnkr.co/edit/Etel4ToABM6gWOw6qAE5?p=preview

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • The information that the implementation works that way for iframes has been stated by me in the question already. The correct answer would be to state that there is no workaround. Could you please update your answer to reflect that? Thanks in advance. – McK Feb 02 '16 at 15:11