Storage Access Headers Demo

Below is the page "https://storage-access-headers-embedded.glitch.me/". Please follow the instructions on the embedded frame below to start the demo.

Below this is a frame from another page on storage-access-headers-embedded, "https://storage-access-headers-embedded.glitch.me/read-cookies", that will call the Storage Access API in order to gain access to unpartitioned cookies. You should be able to see the cookie you set on storage-access-headers-embedded after clicking the Refresh cookies button inside the frame and allowing storage access in the browser prompt.

The frame from "read-cookies" above also embeds an image that is served at "https://storage-access-headers-embedded.glitch.me/dino", and needs access to the cookie you set on storage-access-headers-embedded in order to load. The "read-cookies" page will reply with the response header "Activate-Storage-Access:load" to indicate that it wants to load all content with storage access once the permission exists. If you reload the page after allowing storage access in the browser prompt, the image resource will load properly.

Below is an image that is served at "https://storage-access-headers-embedded.glitch.me/dino". When a request is made to the "dino" page, the server looks for the cookie you set at "https://storage-access-headers-embedded.glitch.me/storage". If it is able to access the cookie, then the image will load. If not, the server next looks for the presence of the "Sec-Fetch-Storage-Access" request header - if the value of this header is "inactive" the server replies with the response header
Activate-Storage-Access:retry; allowed-origin="https://storage-access-headers-demo.glitch.me"
indicating that it wants to retry the request with storage access. If there is no cookie and "Sec-Fetch-Storage-Access" does not have the value "inactive", the image will not load. If you have allowed storage access for "https://storage-access-headers-embedded.glitch.me/", the image should load on refreshing the page.

However, the image below served at "https://storage-access-headers-embedded.glitch.me/failing-dino" should always fail because the server replies with the header
Activate-Storage-Access:retry; allowed-origin="https://foo.bar"
Since this origin, "https://storage-access-headers-demo.glitch.me", was not allowed by the header, the request is not retried.

To view the code for this site, please visit this link.


To view the code for the embedded pages and see how we manage receiving and sending storage access headers, please visit this link.