Skip to content

Instantly share code, notes, and snippets.

@johnholdun
Last active November 13, 2015 18:27
Show Gist options
  • Save johnholdun/564573c3819d638c0c12 to your computer and use it in GitHub Desktop.
Save johnholdun/564573c3819d638c0c12 to your computer and use it in GitHub Desktop.
Cookie Test: Given the same cookie set to different values on different domains, what persists?
@pmn4
Copy link

pmn4 commented Nov 13, 2015

I was running on localhost and figured I wouldn't be able to simulate the domain stuff, so I toyed around with the path (should have the same effect?).

I added some instructions to the bottom of the rendered page.

require 'sinatra'
require 'json'

get '/*' do
  erb :index
end

__END__

@@ index

<!DOCTYPE html>
<html>
  <head>
    <title>Cookie Test</title>
    <style>
      body {
        max-width: 960px;
        margin: 0 auto;
        padding: 40px;
        text-align: center;
      }
      header,
      section,
      footer {
        text-align: left;
      }
      @media (min-width: 960px) {
        section {
          display: inline-block;
          overflow-x: hidden;
          width: 48%;
          vertical-align: top;
        }
      }
    </style>
  <body>
    <header>
      <h1>What even are cookies?</h1>
    </header>

    <section>
      <h1>Server-side</h1>

      <h2>Raw cookie string*</h2>

      <div><pre><%= (request.env['HTTP_COOKIE'] || '').gsub(/;\s*/, ";\n") %></pre></div>

      <h2><code>request.cookies</code> as JSON</h2>

      <div><pre><%= JSON.pretty_generate request.cookies %></pre></div>

      <h2><pre>request.cookies['abc']</pre></h2>

      <div><pre><%= request.cookies['abc'] %></pre></div>
    </section>

    <section>
      <h1>Client-side</h1>

      <h2>Raw cookie string*</h2>

      <div><pre id="raw-js-cookies"></pre></div>

      <h2><code>$.cookie()</code> as JSON</h2>

      <div><pre id="formatted-js-cookies"></pre></div>

      <h2><pre>$.cookie("abc")</pre></h2>

      <div><pre id="specific-cookie-value"></pre></div>
    </section>

    <footer>
      <p>* Whitespace added after semicolon delimiters</p>
      <div style="background: #eee;">
        Initialize the page with:
        <pre>
          $.cookie("abc", "pathless");
          $.cookie("abc", "has_path", { path: "/somepath" });
        </pre>
        <a href="/somepath">Then click here.</a>
      </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
      $(function() {
        $("#raw-js-cookies").html(document.cookie.replace(/;\s*/g, ";\n"));
        $("#formatted-js-cookies").html(JSON.stringify($.cookie(), null, 2));
        $("#specific-cookie-value").html($.cookie("abc"));
      });
    </script>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment