Debug Milo in Safari

[TsayAdobe]

In light of the recent critical system outage on the Safari browser, I have written this show-and-tell on debugging in this browser.

For Chrome, you only need to run the command to use Milo in the local server, which runs on port 6456.

npm run libs

To debug a page, add the query parameter to the URL.

?milolibs=local

The standard setLibs function in a consumer project has the logic to use the local server for the Milo libraries if the query parameter is specified.

However, this setup does not work for Safari due to the browser's security restrictions. Apple believes that any content from http should not be treated as secure, making debugging in Safari challenging.

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
https://bugs.webkit.org/show_bug.cgi?id=171934

To workaround it, you should set up a local SSL proxy. This NPM package can be installed globally or in the project. Start Local SSL Proxy with the following command:

NODE_OPTIONS=--dns-result-order=ipv4first npx local-ssl-proxy --source 6457 --target 6456

It opens a local https on port 6457, which proxies the port 6456. The NODE_OPTIONS is required for the latest NodeJS.

In the setLibs function, you may want to add the condition to use the secure port.

  if (branch === 'securelocal') return 'https://localhost:6457/libs';

Now, you can add the query parameter to the page URL.

?milolibs=securelocal 

Finally, add https://localhost:6457/ to the page's content security policy, similar to http://localhost:6456/.

[chrischrischris]

A simpler way is to setup https on your local - see "Setting up HTTPS for localhost":
https://milo.adobe.com/docs/engineering/running-milo-locally

[chrischrischris]

Oh - to use milolibs=local the port should be set to: --port=6456 instead of 443

[chrischrischris]

One thing I didn't notice is that the consumers setLibs are hardcoded to be http://, as
@tsay
mentions in the discussion this will require setLibs to have securelocal added or to still use the proxy.

[chrischrischris]

Though if you don't want to mess with local - just push your changes to a branch and use that.