Bug: Uncaught (in promise) DOMException: The operation is insecure.
Status: RESOLVED
Priority: --
Resolution: WORKSFORME
Created: 2023-08-22 19:04:33+00:00
Resolved: 2023-08-22 20:05:36+00:00

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

Steps to reproduce:

I've made a firefox addon and right now testing it on Nightly and Developer editions of firefox, both are generating the same error. 
The extension's main functionality is that it provides verification of QR images data from an api. So for uploading the images on extension, there are two ways I've implemented; one is that, to upload the image with the file picker package, (the interface of this portion is on the options page); the other way is that I have added a context menu in the right click options inside webpages so that the image url could be sent directly to the options page of the extension.

Here is the code of background.js:
```
import Browser from 'webextension-polyfill';

console.log('This is the background page.');

Browser.contextMenus.create({
  id: 'uploadImage',
  title: 'Upload This Image',
  contexts: ['image'],
});

Browser.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'uploadImage') {
    try {
      console.info('gonna send the image to options page:', info.srcUrl);

      const optionsUrl = Browser.runtime.getURL(
        `options.html?srcUrl=${encodeURIComponent(info.srcUrl)}`
      );

      Browser.tabs.create({ url: optionsUrl });
    } catch (error) {
      console.error('Error sending image: ', error);
    }
  }
});
```
And here the options page's relevant code (its a React.js component):
I'm getting the image src from the url with the useEffect and then proceed:
```
  useEffect(() => {
    // Get the image source from the URL parameter
    const searchParams = new URLSearchParams(window.location.search);
    const imgSrcParam = searchParams.get('srcUrl');

    if (imgSrcParam) {
      const img = new Image();
      img.src = imgSrcParam;
      img.onload = async () => {
        console.info('here goes image:', img);
        setSelectImage(img);
        setTitle('Title');
        setDescription('Description');
        setAutoJob(true);
      };
    }
  }, []);
  useEffect(() => {
    sleep(1500).then(() => {
      if (autoJob) onSubmit();
    });
  }, [selectImage, autoJob]);

// here is the onSubmit function where the problem occurs
  const onSubmit = async () => {

    if (selectImage) {
      setSending(true);
      // Convert the selected image to ImageData
      const imageBitmap = await createImageBitmap(selectImage);
      const canvas = document.createElement('canvas');
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      const context = canvas.getContext('2d');
      context.drawImage(imageBitmap, 0, 0);
      // the execution stops here and I get that err <<<<<<
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      // Decode the QR code
      const qrCode = jsQR(imageData.data, imageData.width, imageData.height);

      if (qrCode) {
        // const encrypted = encryptQRCode(qrCode.data);
        // console.log('Decoded QR Code:', qrCode.data);
        const qr = qrCode.data;
        const qrData = qr.split('|');
        const GenPhoneUID = `${qrData[2]}|${qrData[0]}`;
        const apiKey = qrData[1];
        // send data to the server
        console.log('send data to the server');
        const requestBody = new URLSearchParams();
// rest of the code to send the file to the API
}
```



Actual results:

soon the execution gets at the line:
context.drawImage(imageBitmap, 0, 0);
It throws this error:
Uncaught (in promise) DOMException: The operation is insecure.
And this code of onSubmit works totally fine if I upload the image from the options page (without being directed from the webpage by the right click option).

I have also tried just moving the image url by the right click button to the options page of menu and then instead of letting the extension to auto send the image, I tried it manually pressing the upload button, but still the same behavior. The src moves to the options page and even the preview of src is also shown on the options page but just the error is coming when it comes to the line where the context.getImageData() function is called.

Please help


Expected results:

The expected result is that the image should have been uploaded without any of such issue just like it does when uploading from the options page normally.