dcousineau/app.js

## app.js
import cookie from 'cookie-cutter';

App.on('before:start', () => {
    //Safari does not respect P3P policies by default and blocks all 3rd party cookies (which is what our cookie is when
    //loaded in an Iframe). To work around this we need to open a window to our application and set the cookies then
    //close it. Safari allows us to interact with cookies that have already been set (but not create new ones).
    if (cookie.get('expected_cookie') === undefined) {
        //However, Safari (like all browsers) puts the kibosh on all windows that open without user interaction!
        //Therefore we intercept all clicks to open the short-lived window that initializes all of our cookies.
        $(document.body).one('click', '[data-goto]', e => {
            let initListener = e => {
                if (e.data === 'cookies:success') {
                    window.removeEventListener('message', initListener);
                    //Turns out we don't need to reload the iframe to work with these cookies. We should turn this back
                    //on if it ever becomes a problem
                    //window.location.href = window.location.href;
                }
            };
            window.addEventListener('message', initListener);
            window.open(location.origin + '/_init', 'initCookies', 'width=200, height=100');
        });
    }
});

## app.py
from application import app
from flask import render_template, make_response

@app.route("/_init", methods=['GET'])
def init_cookies():
    """
    Initialize all cookies your app will ever need
    """
    resp = make_response(render_template("init_cookies.jinja.html"))
    resp.set_cookie('expected_cookie', value='')
    return resp

## init_cookies.jinja.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our App</title>
</head>
<body>
    <script>
        window.opener.postMessage('cookies:success', '*');
        window.close();
    </script>
</body>
</html>
	import cookie from 'cookie-cutter';

	App.on('before:start', () => {
	//Safari does not respect P3P policies by default and blocks all 3rd party cookies (which is what our cookie is when
	//loaded in an Iframe). To work around this we need to open a window to our application and set the cookies then
	//close it. Safari allows us to interact with cookies that have already been set (but not create new ones).
	if (cookie.get('expected_cookie') === undefined) {
	//However, Safari (like all browsers) puts the kibosh on all windows that open without user interaction!
	//Therefore we intercept all clicks to open the short-lived window that initializes all of our cookies.
	$(document.body).one('click', '[data-goto]', e => {
	let initListener = e => {
	if (e.data === 'cookies:success') {
	window.removeEventListener('message', initListener);
	//Turns out we don't need to reload the iframe to work with these cookies. We should turn this back
	//on if it ever becomes a problem
	//window.location.href = window.location.href;
	}
	};
	window.addEventListener('message', initListener);
	window.open(location.origin + '/_init', 'initCookies', 'width=200, height=100');
	});
	}
	});
	from application import app
	from flask import render_template, make_response

	@app.route("/_init", methods=['GET'])
	def init_cookies():
	"""
	Initialize all cookies your app will ever need
	"""
	resp = make_response(render_template("init_cookies.jinja.html"))
	resp.set_cookie('expected_cookie', value='')
	return resp
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Our App</title>
	</head>
	<body>
	<script>
	window.opener.postMessage('cookies:success', '*');
	window.close();
	</script>
	</body>
	</html>