How do I stop my frame buster from breaking the WordPress Customizer page?

Question

Behold a simple framebuster:

<script type="text/javascript"> 
    if (top.location != self.location) { 
        top.location = self.location.href; 
    } 
</script>

However, it seems to work too well. It breaks the customizer admin page in WordPress whereupon the site is previewed in a frame as you customize certain settings. How can I modify this so that it breaks frames...but not that one.

Perhaps you could:

1. Check if it's on the same domain and not break those frames?
2. Check for the specific customizer URL using a regular expression match of somesort?

I'm happy with either solution, but I don't know how to make them happen. Any help would be appreciated.

Answer 1

So apparently the top.location has a field called pathname that contains the URL without the domain. By checking that field, I can exclude that specific admin page.

            <script type="text/javascript">
            function parentIsEvil(parent) {
                var html = null;
                try {
                  var doc = top.location.pathname;
                } catch(err){
                  // do nothing
                }
                console.log(doc);
                return(doc != "/wp-admin/customize.php");
            }
            console.log(canAccessParent());
            if (top.location != self.location && parentIsEvil()) { 
                top.location = self.location.href;
            }
        </script>';

Update: I added the solution that checks for cross domain and catches any errors.

Answer 2

You could use the wp_customize query arg and is_user_logged_in function to wrap your javascript in an if statement like this:

<?php if ( ! ( isset( $_GET[ 'wp_customize' ] ) && is_user_logged_in() ) ): ?>
<script type="text/javascript"> 
    if (top.location != self.location) { 
        top.location = self.location.href; 
    } 
</script>
<?php endif; ?>