Clipboard API Workaround in iFrames

Admittedly not the catchiest of titles but if you’re seeing a message like this

Disabled in this document by Feature Policy

in Google Chrome

then you are probably running in to the same problem as me. I’m writing a fulfilment application for Shopify and the UI has a handy ‘Copy’ button for some useful details. Shopify uses an iframe to load apps inside the admin area but here lies the problem!

The solution to this error is to simply allow clipboard-write in the iframe like so;

<iframe src="index.html" allow="clipboard-write"></iframe>

But wait… My app is inside the iframe; I don’t have access to the iframe tag attributes. It seems like I’m not the only person who ran in to this issue but after a year of no response I didn’t have much hope that this would get fixed soon. https://community.shopify.com/c/shopify-apps/using-the-clipboard-api-in-the-app-iframe/td-p/1007594

So for the workaround, we can check if we have the correct permission and use document.execCommand(“copy”) as a fallback;

        navigator.permissions.query({name:'clipboard-write'})
            .then(function(result) {
                 if (result.state == 'granted') {
                    navigator.clipboard.writeText(copyText.value);
                 } else  {
                    document.execCommand("copy");
                 }
        });

And the whole function, passing in the id of an input element;

    function copyToClipboard(id){
        
        var copyText = document.getElementById(id);
        copyText.select();       
        copyText.setSelectionRange(0, 99999); 

        navigator.permissions.query({name:'clipboard-write'})
            .then(function(result) {
                 if (result.state == 'granted') {
                    navigator.clipboard.writeText(copyText.value);
                 } else  {
                    document.execCommand("copy");
                 }
        });
    }

Now, if the permission is not available, the function falls back onto the deprecated method. If the mighty ruler of the iframe tag grants those permissions, the function doesn’t need to change, the preferred method using Clipboard API is chosen.

Advertisement

Introducing WardPal!

WardPal is a care focused fast paced task app for all healthcare workers designed by ward staff for ward staff!

Visit WardPal.com to start using WardPal, its completely free; nothing to install; and no, we won’t even ask for an email address!

Holistic Care

Where a todo list might seem like reducing patients to tasks, WardPal is different. By giving you a fast way to add, check and complete tasks you’ll spend barely any time looking at a screen and more time focused on your patients! Prioritizing effectively and automatically means that unlike a never-ending list, WardPal shows you the time between tasks; and when you have those, you can take Moments to think about your patients.

Continuity of Care

Not only does WardPal help you be consistent in your care throughout your shift, it also helps to deliver continuity of care when your day comes to an end.

Handovers let you to share outstanding items with fellow health workers allowing them to carry on exactly from where you left off.

Continue reading “Introducing WardPal!”

A Really Simple Star Rating Input in React

One of our current projects has come with a few interesting UI designs, some can turn out to be quite complex but this was possibly one of the simplest yet. Looking online there are a few packages that can do this but it soon became clear that it might be much quicker to just write a lightweight component to do just what was needed.

rendered_start_rating.pngContinue reading “A Really Simple Star Rating Input in React”

Testing in .net Core with xUnit

I’ve recently been getting my head around some new technologies that we were looking to use in an upcoming project. With a chance to work with the .Net Core framework as part of this, I wanted to look at unit testing frameworks to see what worked well. I’m familiar with MSTest in the .Net space but there’s been a shift towards xUnit as an alternative.

Continue reading “Testing in .net Core with xUnit”

Fast, Scripted Access to Encrypted Volumes using Dropbox and VeraCrypt

So I finally decided to move everything to the cloud and use Dropbox pretty much exclusively for all my data. The problem is I still wanted an extra layer of security for confidential information; password management, banking, insurance and personal identification in the event of Dropbox having a serious security breach or someone hacking into my account.Continue reading “Fast, Scripted Access to Encrypted Volumes using Dropbox and VeraCrypt”