3rd party cookie blocking inspections (cross-subdomain)

Cookies for cross-site resources are now blocked by default across the board. This is a significant improvement for privacy since it removes any sense of exceptions or “a little bit of cross-site tracking is allowed.”

This has already happened on iOS and iPadOS 13.4 and Safari 13.1 on macOS. Web developers should pay more attention on this topic. That's why I like to do some spilke in some communiicate way to check the effective.

Pleae tap the following button before we start inspecting.

inspect with SameSite:none

image

Use HTML <img /> element to inject 3rd party cookie. This is so common for tracking usage. All we need to do is just replace attribute - src to our tracking api path.

<img src="3rd-party-domain-api" />

HTML <iframe /> element could quick import outsourcing informations into current page's. It's so convenient and easy use. Let's take a look could cookie use in iframe.

<iframe src="3rd-party-domain-page"></iframe>

HTML <form /> element could pass data to attribute action's address. We will test form submitting with method GET.

Notice: this inspection is submitted into current page's iframe.

<form
  action="3rd-party-domain-api"
  method="get"
  target="page-iframe"
>
  <input type="submit" value="submit" />
</form>

HTML <form /> element could pass data to attribute action's address. We will test form submitting with method POST.

Notice: this inspection is submitted into current page's iframe.

<form
  action="3rd-party-domain-api"
  method="post"
  target="page-iframe"
>
  <input type="submit" value="submit" />
</form>

JSONP

JSONP is the older skill for cross-site fetch data. Web developers use <script /> to dynamic pass data throught.

<script>
  window.cb = (data) => {
    // data back
  };

  const script = document.createElement('script');
  script.async = true;
  script.src = '3rd-party-domain-api?callback=cb';
  document.head.appendChild(script);
</script>

fetch[method="GET"]

XMLHttpRequest is so popular and basic skill for frontend fetch data without refresh whole page. Web developers could use Web API - fetch (promise based) to do same works with XMLHttpRequest.

<script>
  fetch('3rd-party-domain-api',
    {
      credentials: 'include',
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }
  )
  .then(res => res.json())
  .catch(error => console.error('Error:', error))
  .then(response => console.log('Success:', response));
</script>

fetch[method="POST"]

XMLHttpRequest is so popular and basic skill for frontend fetch data without refresh whole page. Web developers could use Web API - fetch (promise based) to do same works with XMLHttpRequest.

<script>
  fetch('3rd-party-domain-api',
    {
      method: 'POST',
      credentials: 'include',
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }
  )
  .then(res => res.json())
  .catch(error => console.error('Error:', error))
  .then(response => console.log('Success:', response));
</script>

postMessage

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

Notice: this inspection is post into current page's iframe.

<script>
const data = {
  goThroughWithCookie: true
};

parent.postMessage(JSON.stringify(data), 'http://target-origin.com');
</script>

Direct Submission - GET

HTML <form /> element could pass data to attribute action's address. We will test form submitting with method GET. This inspection is direct submission to 3rd party web page.

Notice: You need to tap Question Mark first to see the result.

<form
  action="3rd-party-domain-page"
  method="get"
>
  <input type="submit" value="submit" />
</form>

Direct Submission - POST

HTML <form /> element could pass data to attribute action's address. We will test form submitting with method POST. This inspection is direct submission to 3rd party web page.

Notice: You need to tap Question Mark first to see the result.

<form
  action="3rd-party-domain-page"
  method="post"
>
  <input type="submit" value="submit" />
</form>